I have a sub grid which contains a single foreign key column. As such, it doesn't make sense for this grid to allow edits, just deletes and inserts. However, if I remove the edit command, the cancel button is no longer visible.

I have tried the suggestion in the post here Grid: Insert and Delete only, no update of existing records in UI for ASP.NET MVC | Telerik Forums however this does not seem to work.

I am using version v2023.2.718.

How can I remove the edit button, but keep the cancel button for inserts when using inline editing?

My grid definition is:-

<script id="subdetailsTemplate" type="text/kendo-tmpl">


                            @(Html.Kendo().Grid< KPIDataEntryForms.Models.IndicatorBundlesToMetricsMap> ()
                                        .Name("mapGrid_#=ID#")
                                        .Columns(col =>
                                        {

                                            col.Bound(o => o.ID).Title("ID").Width(150);
                                            //col.Bound(o => o.IndicatorBundle).Title("Bundle ID");
                                            //col.Bound(o => o.MetricID).Title("Metric ID");
                                            col.ForeignKey(p => p.MetricID, ds => ds.Read(r => r.Action("GetMetrics", "ScoreCards")), "MetricID", "MetricName")
            .Title("Metric").Width(500);

                                            col.Command(command => { command.Destroy().Text(" "); command.Edit().Text(" ").UpdateText(" ").CancelText(" "); });
                                        })
                                        .ToolBar(tb => tb.Create())
                                         .Editable(e => e.Mode(GridEditMode.InLine))
                                         .Events(e=>e.DataBound("hideUpdateBtn"))
                                      .DataSource(ds => ds
                                      .Ajax()
                                        .Events(e => e.Error(o => gridTemplateHelper("#=ID#")))
                                     .Model(m =>
                                     {
                                         m.Id(p => p.ID);
                                         m.Field(p => p.ID).Editable(false);

                                     })
                                      .PageSize(15)
                                      .Read(rd => rd.Action("RD_BundleMaps", "ScoreCards", new { BunID = "#= ID #" }))
                                      .Create(u => u.Action("InsertBundleMap", "ScoreCards", new { BunID = "#= ID #" }))
                                      .Destroy(u => u.Action("DeleteBundleMap", "ScoreCards"))
                                      .Update(u => u.Action("DeleteBundleMap", "ScoreCards"))


                                      .Sort(s =>
                                      {
                                          s.Add(a => a.ID).Descending();

                                      })
                                      )


                                      .Pageable(p=>p.Refresh(true))
                                      .Sortable()
                                      .ToClientTemplate()


            )



</script>

		<script type="text/javascript">
		
    function hideUpdateBtn()
    {
            this.table.find(".k-grid-edit").hide();
        }
    

</script>

-

I have updated kendo version 2021.3.1109 to 2023.1.425. After upgrading I am not able to see series colors. 

Could someone please help:  

     I am reviewing ASP MVC Core using the Telerik KendoUI Grid for our company and I'm having an issue doing the following.  I am trying to use an html select to send, via an ajax call, the selected count value to the controller to reload the grid with the amount of database rows in the count.  I default the grid count to 50 on load with the following in _Layout.cshtml.   

 <li class="nav-item">
     <a class="nav-link text-dark" asp-area="" asp-controller="LocalOptions" asp-action="KendoTest" asp-route-count="50">KendoTest</a>
 </li>

     What is happening, is the grid loads with the 50 rows.  Then, when I select from the drop down ie: 500, the ajax function calls the controller action and the parameter count  and ViewData["SelectedOption"] are set to 500.  Then in the Views first @{ } code block, the database call fires and repopulates the list CurrOptionData with the new list of data.   The problem is that the Kendo grid never reloads with the new rows, it stays at the initial 50.

Note:  I have tried using  $("#dataGrid").data("kendoGrid").dataSource.read(); and $("#dataGrid").data("kendoGrid").refresh(); in the ajax success: but no change.

Any help would be greatly appreciated.

Thanks

Dave.

*********  LocalOptionsController.cs *********

 public IActionResult KendoTest(int count)
 {
     ViewData["SelectedOption"] = count;
     return View();
 }

************ VIEW ************

 @model List<Asp_Core_MVC.Models.CurrOption>
@inject IERNIEData _db

<div class="text-center">
    <h1 class="display-4">Current Options</h1>
</div>
<br />

<div>
    <div class="text-center">         

        @{
            List<CurrOption>? CurrOptionData;
            int countToDisplay = 50;
            int loadedRows = 50;

            countToDisplay = Convert.ToInt32(ViewData["SelectedOption"]);
            loadedRows = countToDisplay;

            CurrOptionData = await _db.GetCurrOptionsByCount(countToDisplay);

        }


        @if (CurrOptionData == null)
        {
            <p><em>Loading ...</em></p>
        }
        else
        {
                <table>
                    <tr>
                        <td style="padding: 0 15px; text-align: left; vertical-align: middle;">Sample Row Count:</td>
                        <td style="text-align: left; vertical-align: middle;"><label id="lblCount">@loadedRows</label></td>
                    </tr>
                </table>

                <br />
                <div>
                    <table>
                        <tr>
                            <td style="padding: 0 15px; text-align: center;">
                                Select Current Options To Display:
                            </td>
                            <td style="text-align: center;">
                            <select name="options" id="OptionCount" style="height: 25px;">
                                    <option value="">--Please choose an option--</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="500">500</option>
                                    <option value="1000">1000</option>
                                    <option value="10000">10000</option>
                                    <option value="100000">100000</option>
                                    <option value="200000">200000</option>
                                    <option value="300000">300000</option>
                                    <option value="400000">400000</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            <br /><br />            

            @(

                    Html.Kendo().Grid(CurrOptionData)
                            .Name("dataGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.ID).Title("ID").Width(105);
                                columns.Bound(p => p.USID).Title("USID").Width(120);
                                columns.Bound(p => p.SellID).Title("SellID").Width(130);
                                columns.Bound(p => p.OptionID).Title("OptionID").Width(170);
                            })
                            .Pageable()
                            .Sortable()
                            .Scrollable(scr => scr.Height(430))
                            .Filterable()
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .ServerOperation(false)
                            )
                    )
             }

    </div>
</div>



<script>   

    document.getElementById('OptionCount').addEventListener('change', function () {
        var selectedValue = this.value;       

        $.ajax({
            url: '@Url.Action("KendoTest", "LocalOptions")',
            type: 'GET',
            data: { count: selectedValue }, 
            success: function () {
                $("#dataGrid").data("kendoGrid").dataSource.read();
                $("#dataGrid").data("kendoGrid").refresh();
                //alert(selectedValue);
            },
            error: function () {
                console.log('Error occurred during the AJAX call.');
            }
        });

    });  


</script>

Hi, we were previously using the Telerik editor for asp.net/webforms and it had the option to use <br> elements instead of <p> for line breaks. We used this for many years and are now transitioning to MVC.

The new Kendo editor has the same options (kind of) for using <br>, but now the ordered/unordered lists (and possibly other functionality we haven't tested yet) no longer work with the the <br> tags where they did in the previous asp.net editor.

This is a big issue for us as we are maintaining backwards compatibilty with the old version and need to keep the functionality and formatting the same.

I found a similar issue posted in 2013 here (https://www.telerik.com/forums/headers-or-bullet-list-in-editor-without-p-) and was hoping that in the 10 years since, some support for this, or at least a better work-around, might have been implemented. The one suggested here wont exactly work for us as we do intend to allow for paragraph tags if the user inserts them intentionally, but just not as standard carriage returns. We might could do somethin like intercept the carriage return and add a special class to them and have that swapped out, but I'm not sure that will work for all cases and I'm hoping there is a better way.

I have a question about the jquery version that is bundled with kendo UI. According to what I've read, there were several vulnerabilities in jquery that were patched in later jquery releases (CVE-2020-11022, CVE-2020-11023, CVE-2015-9251, CVE-2019-11358). Do these vulnerabilities exist in the jquery.min.js file that is included with the product download?

I saw a post here that said it was fixed for the ASP.NET AJAX version: https://www.telerik.com/forums/bundled-jquery-library-version-1-12-4-is-vulnerable

Did the MVC version also get this fix or was that just for ASP.NET AJAX?

I'm not sure if I should have posted this here or in the Kendo UI for jquery because we use the MVC helper and the jquery syntax for creating widgets.

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);
            })
        )
    )