My company has three very large apps that are dependent on Kendo. I've been trying for several days to update the Kendo version in our largest app from version 2022.3.913. I was able to update with no problems to version 2023.1.117. But when I try to go beyond that, it's completely hosed. Worst of all is the use of icons. I can't make them work no matter what I do. We've been using .SpriteCssClass() to attach icons to buttons and menu items as well as using the k-icon k-i-xxx classes in grid item templates. None of that works anymore. None of the suggested fixes for this work with version 2023.2.829 either. I've tried telling the app to use font icons via KendMvc.Setup() in my Startup.cs and BaseController.cs files, neither of which worked. I installed both the FontIcons and SvgIcons NuGet packages, which at least allowed me to build the app. I was able to use the .Icon() method on a Button widget to use one if the SVG icons that I saw in an example, but nowhere on your site can I find a list of standard SVG icons like the list of font icons, so I wasn't able to find the icons I had been using. In addition to the complete inability to make icons work, the way you've changed font sizing for widgets has made the app look very different than before the update and has made various customizations we've made in our site.css file look very bad. Ditto for some random styling changes you've made for menu items and anchor tags in grid templates.

In short, you have really screwed us over and I don't know if we're going to be able to update past 2023.1.117. I see lots of others have had these same issues and I don't see you responding with any real solutions.

Hello,

I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected. 

Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx

My TabStrip coding

@(Html.Kendo().TabStrip()
        .Name("ReimbusementDetails")
        .Items(x =>
        {                
        x.Add().Text("Submitted")
        .Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentSubmitted")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");
                    column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
                })
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement Submitted.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )               
                .DataSource(ds => ds
                    .Ajax()                    
                    .GroupPaging(true)
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);
                    })
                    .Aggregates(ag =>
                    {
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
                )
            )
            </text>
        );

        x.Add().Text("In Progress")            
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentInProgress")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");                        
                    column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
                })                    
                .Pageable()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()  
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement In Progress.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )
                .Events(ev => ev.DataBound("ExpandProgress"))
                .DataSource(ds => ds
                    .Ajax()                                    
                    .GroupPaging(true)                    
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);                                
                    }) 
                    .Aggregates(ag =>
                    {                            
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
                )
            )
            </text>
        );
        })
    )

I have tried with Event DataBound("ExpandProgress") javascript but still not working.

Any advice to achieve this. Thank you.

Okay, here is what I have and I'll try to describe it as best I can here.

I have an ASP.NET MVC page that contains a Tab Strip (with 4 tabs).  Each one of the tabs contain a kendo.grid.  Each grid is basically identical looking with the only difference being the data source it is grabbing the model data.  Each grid has 4 buttons defined with command.Custom.

Here is one of the tab/grid sections...

            tabstrip.Add().Text("Product A")
                 .Selected(@bWR)
                 .Content(@<text>
                    @(Html.Kendo().Grid(Model)
                        .Name("updategrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Hidden(true);
                            columns.Bound(p => p.AllowEditDelete).Hidden(true);
                            columns.Bound(p => p.AllowDeploy).Hidden(true);
                            columns.Command(command =>
                            {
                                command.Custom("DeployA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDeploy");
                                command.Custom("EditA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showEdit");
                                command.Custom("EraseA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showErase");
                                command.Custom("DeleteA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDelete");
                            }).Locked(true).HtmlAttributes(new { style = "background-color: lightgrey;" }).Width(125).MinResizableWidth(125); ;
                            columns.Bound(p => p.Product).Width(180);
                            columns.Bound(p => p.Version).Width(100);
                            columns.Bound(p => p.TargetVersion).ClientTemplate("<span title='#= TargetVersion #'>#= TargetVersion #</span>").Width(245);
                            columns.Bound(p => p.Name).Width(100);
                            columns.Bound(p => p.Description).Width(210);
                            columns.Bound(p => p.File).ClientTemplate("<span title='Click to download'><a href='https://*******/updates-blob-container/" + "#= File #'><u>#= File #</u></a></span>").Width(150);
                            columns.Bound(p => p.Created).Filterable(x => x.UI("datePicker")).Width(100);
                            columns.Bound(p => p.Pilot).ClientTemplate("#= Pilot ? '<span style=\"color: green; \">✔</span>' : '' #").Width(100);
                            columns.Bound(p => p.Deployed).Width(120);
                            columns.Bound(p => p.Success).Width(120).ClientTemplate("<font color=green><a href='" + Url.Action("Success", "UpdateQueue") + "/#= Id #'><u>#= SuccessCount # (#= kendo.toString(Success,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Failure).Width(120).ClientTemplate("<font color=red><a href='" + Url.Action("Failure", "UpdateQueue") + "/#= Id #'><u>#= FailureCount # (#= kendo.toString(Failure,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Pending).Width(120).ClientTemplate("<font color=blue><a href='" + Url.Action("Pending", "UpdateQueue") + "/#= Id #'><u>#= PendingCount # (#= kendo.toString(Pending,'n0') #%)<u></a></font>");
                        })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .Pageable(pager => pager.Refresh(true))
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Selectable()
                        .Resizable(resize => resize.Columns(true))
                        .HtmlAttributes(new { style = @styleGrid })
                        .DataSource(datasource => datasource
                            .Ajax()
                            .Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
                            .PageSize(50)
                            .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
                            .Sort(sort => { sort.Add("Name").Ascending(); sort.Add("Version").Ascending(); })
                        )
                        .Events(events => events
                        .DataBound("onDataBoundA")
                        .FilterMenuInit("onFilterMenuInit"))
                    )
                </text>);

This all works fine and tabbing between each grid displays the correct data and the command buttons work fine.

I am trying to introduce persistence on the filters for each grid.  Based on other posts I have read here, it seems straightforward.  In the onDataBound I have added the getOptions method and saved to local storage.

    function onDataBoundA(e) {
        console.log('onDataBoundA');

        // save the state of each grid.
        localStorage["wrGridOptions"] = kendo.stringify($("#updategrid").data("kendoGrid").getOptions());
}

And then, instead of the  $(document).ready(function () I have a onTabSelect function that checks which tab has been selected and then does a setOptions.

    function onTabSelect(e) {
        if ($(e.item).find("> .k-link").text() == 'Product A') {
            var wrOptions = localStorage["wrGridOptions"];
            if (wrOptions) {
                console.log('Loading wr grid options');
                var grid = $("#updategrid").data("kendoGrid")
                grid.setOptions(JSON.parse(wrOptions));
                grid.dataSource.read();
            }
        }
}

The problem is that when I first visit the page and click on any of the command buttons, the appropriate dialog window displays.  Then if I select a different tab and click on a command nothing happens.  It has lost its click event.  If I refresh the page (F5), the command button works.  And if I again select another tab, the command button does not.

If I comment out the setOptions code, then the command buttons work normally again, but I lose filter persistence.

Any thoughts on what might be causing this?

Regards,

Shawn

Hi,

We are wondering if it is possible to create a pop up message box using kendo UI for MVC that only shows up in the webpage if any value within a Kendo grid's column exceeds a certain number? Below is the code we have.  col.Bound(c => c.Current).Title("Current") would be the column that contains Double and if any of the values under Current exceeds the number 3, we'd like to have a pop up box in the web. 

Thanks!

    @(Html.Kendo().TabStrip()
    .Name("Tabs")
         .Items(items =>
         {

         items.Add()
         .Text("Table").Selected(true)

                    .Content(@<text>

             <div>

                            @(Html.Kendo().Grid(Model.XXTable).Name("XXTable")
                                .Columns(col =>
                                {
                                    col.Bound(c => c.Name).Title("XXX").Width(200).HeaderHtmlAttributes(new {style = "background:#d50032;font-weight:bold;color:white"});
                                    col.Bound(c => c.Current).Title("Current").Width(100).HeaderHtmlAttributes(new { style = "background:#d50032;font-weight:bold;color:white" });

                                }))
        </div>