I display grids with a page size control. In one page within my project it still looks fine - and this is where I create the grid using kendo ui for JQuery.

In the instances when I create it using MVC, there are styling errors. (See in the image how the number "10" is truncated.)

After much drilling into the HTML, I found the difference in how the Razor library creates the HTML elements, as opposed to how the JQuery creates the HTML elements.

JQuery generates the following element structure. Note that the k-pager-sizes element comes after the k-pager-numbers-wrap element

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->
     <div class="k-pager-numbers-wrap">
             <!-- ... -->
     </div>
     <span class="k-pager-sizes k-label">
            <!-- The page-size picker goes here -->
     </span>
</div>

In contrast, the Kendo Razor libraries generates the following element structure, where the k-pager-sizes element falls inside the k-pager-numbers-wrap element:

<div class="k-pager k-grid-pager k-pager-md"> <!-- The pager bar -->

     <div class="k-pager-numbers-wrap">
             <!-- ... -->
            <span class="k-pager-sizes k-label">
                  <!-- The page-size picker goes here -->
             </span>
     </div>

</div>

This breaks the styling. There is styling rule that imposes a minimum width on all buttons under .k-pager-numbers-wrap. This makes the drop-down arrow too wide, which causes the page size number to truncate.

    @each $size, $size-props in $kendo-pager-sizes {
        $_padding-x: k-map-get($size-props, padding-x);
        $_padding-y: k-map-get($size-props, padding-y);
        $_item-group-spacing: k-map-get($size-props, item-group-spacing);
        $_item-min-width: k-map-get($size-props, item-min-width);
        $_pager-dropdown-width: k-map-get($size-props, pager-dropdown-width);

        .k-pager-#{$size} {
            padding-inline: $_padding-x;
            padding-block: $_padding-y;
            gap: $_item-group-spacing;

            .k-pager-numbers-wrap {
                .k-button {
                    min-width: $_item-min-width;
                }

After writing this, I realize it might be more appropriate as a logged defect, which I've done here:

https://feedback.telerik.com/aspnet-mvc/1621268-kendo-razor-controls-renders-grid-pager-differently-to-kendoui-for-jquery-breaks-styling

@(Html.Kendo().Grid<AssessmentsViewEntityViewModel>()
                          .Name("AssessmentsGrid")
                         .Columns(columns =>
                         {
                             columns.Template(@<text></text>).ClientTemplate("<label class='sr-only'>Assessments CheckBox</label><input class='assessmentDetailSelection' type='checkbox' title='checkbox' data-assessmentId=#AssessmentId#/>")
    .HeaderTemplate("<label class='sr-only' for='masterAssessmentsCheckBox'>master Assessments CheckBox</label><input type='checkbox' id='masterAssessmentsCheckBox' onclick='checkAllAssessments()' title='masterAssessmentsCheckBox' class='assessmentDetailSelectAll'/>").Width(30);
        columns.Bound(c => c.Title).Template(@<text>@Html.ActionLink(@item.Title, "Index", "Assessment", new { area = "V2", assessmentId = @item.AssessmentId, assessmentFolderId = @item.AssessmentFolderId, authoringArea = @item.Area, onclick = "onAssessmentDescriptionClick();" })</text>)
                                  .ClientTemplate("<a href='#=AssessmentUrl#'>#=String.htmlEncode(Title)#</a>")
                                  .Title(CommonResources.Title)
                                  .Width(350);

I would like to replace #AssessmentId# with its value. Unable to access its value. Please help.

when i grid sorting is applied, it highlights the entire column a different shade (header and row cells).

What css dark magic do i use to turn that all off? The sorting icon is enough for me.

Merci

Kendo grid with kendo buttons above it which are associated with different Json grid settings (i.e column Filters).
I need to show the row counts for each of these different grid filters inside the buttons so the user understands how many rows these options will contain.  What is the most efficient way to apply the grid filters and get a count against the DataSource without rendering the grid?

Merci

Hello, 

I am grouping the data by field "AccountCategoryName". After that, groups are sorted alphabetically. I want to sort the groups by AccountCategoryName. Is that achievable? Here is the code snippet:

@(
        Html.Kendo().Grid(Model.Data)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(r => r.BudgetDataID).Visible(false);
            columns.Bound(r => r.AccountCategoryName).Title(BudgetDataRes.AccountCategory);
            columns.Bound(r => r.AccountCategoryID).Visible(false);
            columns.Bound(r => r.BudgetPositionName).Title(BudgetDataRes.BudgetPositionName);
            columns.Bound(r => r.BudgetPositionID).Visible(false);
            columns.Bound(r => r.Year).Title(BudgetDataRes.Year);
            columns.Bound(r => r.PlannedValue).Title(BudgetDataRes.PlannedValueBAM).Format(Constants.KendoGridMoneyFormat);
            columns.Bound(r => r.FinalValue).Title(BudgetDataRes.FinalValueBAM).Format(Constants.KendoGridMoneyFormat);
        })
        .ToolBar(toolBar =>
        {
            toolBar.Save().SaveText(BudgetDataRes.SaveChanges).CancelText(BudgetDataRes.CancelChanges);
            toolBar.Excel().Text(BudgetDataRes.ExcelExport);
        })
        .Editable(r => r.Mode(GridEditMode.InCell))
        .Excel(r => r.AllPages(true))
        .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .ServerOperation(true)
            .Model(model =>
            {
                model.Id(r => r.BudgetDataID);
                model.Field(r => r.AccountCategoryID).Editable(false);
                model.Field(r => r.AccountCategoryName).Editable(false);
                model.Field(r => r.AccountTypeID).Editable(false);
                model.Field(r => r.BudgetPositionID).Editable(false);
                model.Field(r => r.BudgetPositionName).Editable(false);
                model.Field(r => r.BudgetDataID).Editable(false);
                model.Field(r => r.Year).Editable(false);
                model.Field(r => r.MunicipalityID).Editable(false);
                model.Field(r => r.PlannedValue).Editable(true);
                model.Field(r => r.FinalValue).Editable(false);
            })
            .Update(r => r.Action("SavePlannedValues", "BudgetData"))
            .Sort(r =>
            {
                r.Add("AccountCategoryID").Ascending();
            })
            .Group(groups =>
            {
                groups.Add(r => r.AccountCategoryName);
            })
        )
    )

I have loaded up saved grid settings with a filter such as col state = 'Maine'. 

I have the grid searchable fields set to only a specific column.

.Search(s =>

Now when i apply the search, its blowing away the state filter criteria and pulling back many more records then it should.

Now i did read this article https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-filters-when-search-input-is-used

Im prepared to go that route if its required, but what's the point of specifying search fields? Just to tell it how to search the column? Does anyone have a less painful solution then the link above?

Hello,

I am trying to automatically format number on input. I am using kendo grid with asp .net core tag helper. The behaviour which I am trying to accomplish is as same as the autonumeric.js library. I want to use "." as thounsands separator and "," as decimal separator. For example, number "1234" is formatted as "1.243". The separator dot is added on input.

Any kind of help is appreciated.

I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.

Please help.

This is how i have prepared my grid :

$("#ListofMF").kendoGrid({
            dataSource: {
                data: extractedData,
                schema: {
                    model: {
                        fields: {
                            Id: {type: "integer"},
                            FullName: { type: "string" },
                            Temp1: { type: "boolean" },
                            Temp2: { type: "boolean" },
                            Industry: { type: "string" },
                            //Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            //scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: true,
                pageSize: 6
            },
            columns: [
                {
                    title: " ",
                    width: 30,
                    field: "Id",
                    hidden: true
                },
                {
                    title: " ",
                    width: 40,
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="isMFSelected"/>'
                },
                {
                    field: "FullName",
                    title: "Data",
                    //width: "140px",
                    headerAttributes: { style: "font-weight: bold;" }
                },
                {
                    field: "Temp1",
                    title: "Temp 1",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
                },
                {
                    field: "Temp2",
                    title: "Temp 2",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
                },
                {
                    field: "Industry",
                    title: "Industry",
                    editor: function (container, options) {
                        // Get the industry template and apply it to the column editor
                        console.log(container.html);
                        var industryTemplate = $("#industryTemplate").html();
                        container.html(industryTemplate);
                    }
                }
            ]
        });

<script id="industryTemplate" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
        .Name("Industry")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
    )
</script>

I have Kendo Grid i need to add validation on innner textbox on updating a row.

I am using code like that.

@html.kendo()

After upgrading the Kendo UI Asp.net MVC version from 2021 to 2023 in our application, we are getting an error saying "Invalid template" . It looks like there is an error in client template. Please let me know if there is anything to update in client template code.

 Html.Kendo().Grid<Report>()
                .Name("ReportsGrid")
                .Columns(columns =>
                {
                columns
                    .Bound(r => r.Name);

                columns
                    .Template(@<Text></Text>)
                               .ClientTemplate(string.Format("<a class='k-button' href='{0}?reportPath=#= ReportPath #' target='_blank'>Open Report</a>", Url.Action("OpenReport", "Report")));
                })

Error - Invalid template:'<a class='k-button' href='/Report/OpenReport?reportPath=#= ReportPath #' target='_blank'>Open Report</a>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<a class=\'k-button\' href=\'/Report/OpenReport?reportPath='+( ReportPath )+'\' target=\'_blank\'>Open Report</a>';}return $kendoOutput;