I've got a Kendo Grid like this:
<%: Html.Kendo()
...
.Pageable()
.Columns(c => {
c.Bound(x => x.ProductId).Width(80);
c.Bound(x => x.ProductCode).Width(40);
c.Bound(x => x.ProductName).Width(80);
c.Bound(x => x.Created).Format("{0:yyyy-MM-dd}").Width(70);
c.Bound(x => x.CreatedBy).Width(80);
})
.Sortable()
.Selectable()
...
When you click on a column header an up or down arrow appears to indicate sorting. So far so well, but the sort arrow makes the column expand its width which is very annoying. I want to avoid the columns changing their width, how do you do that?
Adding css rule to the grid's table: table-layout:fixed should resolve your problem.
Related
I'm using a Kendo Grid.
#(Html.Kendo().Grid<Kosten>()
.Name("gridKosten")
.Columns(columns =>
{
columns.Bound(c => c.Costs);
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("gridError"))
.Model(model => model.Id(c => c.Id))
.Create(create => create.Action("Kosten_Create", "FahnenSettings"))
.Read(read => read.Action("Kosten_RetrieveAll", "FahnenSettings"))
.Update(update => update.Action("Kosten_Update", "FahnenSettings"))
)
.Editable(editable => editable
.Mode(GridEditMode.InLine)
)
.ToolBar(toolbar => toolbar.Create())
)
Also I set the culture to German.
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/cultures/kendo.culture.de-DE.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/messages/kendo.messages.de-DE.min.js"></script>
<script>
$(function () {
kendo.culture("de-DE");
})
</script>
Everything works fine. In my column "Costs" the displayed value is like "1.245,21 €". But when I'm activating the "Edit" function, the value in the input has changed to "1245.21" (check the separator). Do I change the value now to something like "1245.20", the value will become "124.520,00 €".
So if I want to have the correct value, I always have to change back the separator "." to "," manually. My culture is set to German, it shows the german value and it interprete the german spelling with comma correctly after editing. But in the moment I open the inline editing mode, the separator is changing to us format with a dot.
How can I avoid that? Someone has an idea?
The column property is set in the model like
[DataType(DataType.Currency)]
public decimal Costs { get; set; }
For anyone who has the same problem.
I solved it by including the "~\Views\Shared\EditorTemplates" folder. I removed it at the beginning from my solution because I thought these Views were only examples and didn't thought they were actually used. The grid wanted to use the missing "Currency.cshtml" in it.
I am using Kendo Grid for displaying.
#(Html.Kendo().Grid<ReportModel>()
.Name("myReport")
.Columns(cols =>
{
columns.Bound(c => c.sNo).Title("S.No.");
columns.Bound(c => c.particulars).Title("Particulars");
}
)
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Read(read => read.Action("myReportList","Reporting")
)
.Resizable(resize => resize.Columns(true))
)
I want the formatting of the row to change to bold if and only if the cell in the SNo column is an alphabet otherwise the formatting must be normal.
Help me achieve this.
There are a few different ways to achieve that:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values
Use a row template. This approach is suitable if you do not intend to apply hierarchy, grouping, editing, and frozen columns to the Grid.
Use a databound handler and iterate the table rows. This approach is suitable if you intend to customize all rows of the Grid.
Use a databound handler and iterate the data items. This approach is suitable if you intend to customize only part of the Grid rows.
You can write it like this:
columns.Bound(c => c.sNo)
.ClientTemplate("<strong> #=DateOfService#</strong>")
.Title("S.No.")
I am trying to embed a chart in a Kendo Grid Cell, following this example: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template
I have managed to embed the graph in the grid, but I am unable to find a way to bind to row data.
The ViewModel has properties for each bar value - but how do I bind to those properties (maybe some #= ... # expression?).
I expect something similar to this:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.DataID).Filterable(false);
columns.Template(#<text></text>).ClientTemplate(
Html.Kendo().Chart()
.Name("chart#=DataID#")
.Series(series =>
{
series.Bar("\\#= FirstBarValue \\#");
series.Bar("\\#= SecondBarValue \\#");
})
.ToClientTemplate().ToHtmlString()
);
})
.DataSource(dataSource => dataSource.Ajax().PageSize(20).Read(read => read.Action("Read", "Grid"))))
But the FirstBarValue and SecondBarValue are not properly evaluated, although DataID is. Maybe a different scope? I can only make it work with hard coded values.
Any suggestions?
I have an ASP.NET MVC Telerik Grid (not Kendo). I have a grid with two columns. The first column is a drop down list of items I can select from, and the second column is just an editable textbox.
I want to set the first column to READ ONLY on edits, meaning I can only edit the second column but not the first column. I set the first column to read only in both the model ([ReadOnly] tag in the model class) and in the view (i.e. Editable(false)).
When I do this, I'm not allowed to edit the first column in edit mode like I want. However, when I go to insert/create a new record... the first column is blank and I can only enter values for the second column.
I've tried everything and looked around, but couldn't find a solution.
try this :
model.Field(p => p.Name).Editable(false)
Example:
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Sortable(false).Visible(false);
columns.Bound(p => p.Name);
columns.Bound(p => p.Notes);
columns.Command(command => { command.Edit(); }).Width(172);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Model(model => {
model.Id(p => p.Id);
model.Field(p => p.Name).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "Grid"))
)
)
Ref: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#model
I had a similar issue with a text field. I solved it by hooking the Edit event.
#Html.Kendo().Grid<MyViewModel>()...Events(e => e.Edit("onGridEdit"))
<script type="text/javascript">
function onGridEdit(e) {
if (!e.model.isNew())
e.container.find('input#ID').prop('disabled', true);
}
</script>
In this example I wanted my ID field to be unchangeable after it's created. Your mileage and jQuery may vary, but I suspect the solution would be similar.
TL;DR;
If you are using grid template columns, keep the EditItemTemplate empty as follows:
<telerik:GridTemplateColumn DataField="opt_id" UniqueName="opt_id" DataType="System.Int32">
<ItemTemplate>
<telerik:RadLabel Text='<%# DataBinder.Eval(Container.DataItem, "opt_id") %>' runat="server" />
</ItemTemplate>
<EditItemTemplate></EditItemTemplate>
</telerik:GridTemplateColumn>
So by using above, when entered into edit mode, the item will still be read only.
A little background on how my grid works:
My grid is making use of .Sortable(), .Reorderable(), .Filterable() and .ColumnMenu(). On the dataBound event, the grid saves the state of the grid (column order, items per page, current pagination page, and column sorting [asc and desc]). This is so when a user comes back to that page, their settings are reloaded in the grid when some initializing Javascript makes a query on the grid.
My issue comes into play when I have the same data for two columns:
#(Html.Kendo().Grid<GridDataType>()
.Name("ActiveThreats_Grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(r => r.Id).Title("<input id='checkAll', type='checkbox', class='check-box' />")
.Sortable(false)
.ClientTemplate("<input type='checkbox' class='check_row' id='#= Id#' />")
.Filterable(false);
columns.Bound(r => r.OtherField).Title("Other Field");
columns.Bound(r => r.Id).Title("ID").Hidden(true);
})
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Sortable()
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
// Other HtmlHelpers here
)
What I've noticed, is if I have the same data-field attribute and I am using the .Reorderable() HtmlHelper, the grid reorders the first r.Id column to the same position where the second r.Id column appears.
Q: Is there an HtmlHelper or way to change the data-field attribute output to prevent .Reorderable() from ordering the two identical columns next to each other?