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;

I have upgraded kendo UI for ASP.NET MVC from 2021.2.1109 to 2023.1.435. After it it started giving me this error. 

Hi Experts,

Please help me in displaying below data in grid like result which i mention.

@model = [ { val : 1, columnName : 'column1' }, { val:2, columnName: 'column2'}, { val:3, columnName: 'column3'} ]

Result should be

column1   column2  column3

1                   2              3

we can do this in jquery, but i need this in Asp.net MVC kendo grid.

Hi
Currently, I'm using the following code to display data with initial grouping:
...
.DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Method", "Controller"))
                .ServerOperation(false)
                .GroupPaging(true)
                .PageSize(50)
                .Group(g => 
                    {
                        g.Add(x => x.JahrText);
                        g.Add(x => x.QuartalText);
                        g.Add(x => x.MonatText);
                        g.Add(x => x.TagText);
                    }
                )
                .Aggregates(aggr =>
                {
                    aggr.Add(e => e.JahrText).Count();
                    aggr.Add(e => e.QuartalText).Count();
                    aggr.Add(e => e.MonatText).Count();
                    aggr.Add(e => e.TagText).Count();
                    aggr.Add(e => e.Description).Count();
 
                })
...
Now I'd like to do the initial grouping (when the page gets rendered for the first time) based on a value in the model. 
Let's say, if the model property "GroupLevel" is set to 1, only the "JahrText" is added to the group. 
If the property "GroupLevel" is set to 2, "JahrText" and "QuartalText" are added to the group, etc.

Is there an easy way to implement such a behaviour? 

Thank you for your support!

Best regards,
Daniel

I have a Kendo dropdown list in my project, data of which is dependent from some external conditions and can be changed while widget is already constructed.

When you have 1 item initially and you open dropdown - height for the suggestions popup is fine and covers this 1 item.

When you later change number of items to 6 for example and try to open it - height is still covers only one item and creates a scroll instead of just expand to all available area.

Here is a Dojo example of how it works: https://dojo.telerik.com/oGubaqiX

You should open dropdown, then hit "Change DS" button and the open dropdown again.

As you can see the behavior is absolutely wrong.

How can I change it or what am I doing wrong?

I have a kendo grid which is populated by a model from an MVC controller.  Column 1 and 2 are not editable and are populated with data from the model. Column 3 is an editable column. Column 4 is rendered empty and is not editable.

I need to allow the user to enter a numeric value in the cell in column 3 and then when that cell looses focus, execute a javascript function which will compute a value and place it into the cell in column 4.  So, for example, if row 1, column 1 has a value of "2023/24" and row 1, column 2 has a value of 1000, and the user enters 50 into row1, column 3, the javascript function will compute 1000 - 50 and will place the value of 950 into row1, column 4.

Here is the complete kendo grid definition:

                            @(Html.Kendo().Grid<TaxCertApp.ViewModels.SettlementMemoViewModel>()
                                  .Name("SettlementMemodGrid")
                                  .Columns(columns =>
                                  {
                                      columns.Bound(nr => nr.TaxYear).Width(50).Title("Tax Year");
                                      columns.Bound(nr => nr.OriginalAssessment).Width(100).Title("ORIG. ASSESSMENT").Format("{0:##########0}");
                                      columns.Bound(nr => nr.Reduction).Width(100).Title("REDUCTION").EditorTemplateName("Integer");
                                      columns.Bound(nr => nr.FinalAssessment).Width(100).Title("FINAL ASSESSMENT").Format("{0:###,###,##0}");
                                      columns.Bound(nr => nr.Rate).Width(100).Title("RATE").EditorTemplateName("Currency");
                                      columns.Bound(nr=> nr.RefundSavings).Width(100).Title("REFUND/SAVINGS").Format("{0:###,###,##0}");
                                      columns.Bound(e => e.Type).Width(100).EditorTemplateName("TypeList").Title("TYPE (R S R/S)");
                                  })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .Pageable()
                                .Scrollable()
                                .Selectable(selectable => selectable
                                    .Mode(GridSelectionMode.Single)
                                    .Type(GridSelectionType.Cell))
                                .Events(e => e.Edit("OnEdit"))
                                .Events(ev => ev.Change("OnChange"))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(n => n.TaxYear);
                                        model.Field(n => n.OriginalAssessment).Editable(false);
                                        model.Field(n => n.Reduction).Editable(true);
                                        model.Field(n => n.FinalAssessment).Editable(false);
                                        model.Field(n => n.Rate).Editable(true);
                                        model.Field(n => n.RefundSavings).Editable(true);
                                        model.Field(n => n.Type).Editable(true);
                                    })
                                    .PageSize(20)
                                    .Read(read => { read.Action("SettlementMemoFetchGrid", "Forms").Data("BuildObjectGridSettMemo"); })
                                 )
                            )

Currently, when a user clicks in row1, column 3, the onChange AND onEdit events fire, even before the user types any data into the cell.  Neither event first when the user moves off the cell.

And the second piece of this question is, once the javascript computes the 950 value, how do I get that 950 value to display in the grid?

Thank you for any assistance.

Hello friends,

For the  Kendo Grid, when we add a new record, a date field is always the default value 01/01/0001 in the post back record. It should return the input date value rather than 01/01/0001 (or null if this date field is not required)

However, when we update this 01/01/0001 field in this new created record, the correct date value is returned in the post back record and can be updated successfully.

We are using VS 2022. (When checking mdGiving, we found that date field value is always 01/01/0001 no matter what we entered for that field in the grid.)

        }

Any ideas?

Thank you very much for your help.

Andrew  

Hi, buttons in toolbar template are smashed together after loading a saved grid state. The problem can be reproduced in demo application https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-preserve-server-toolbar-template-after-set-options

I have used the same code for at long time without issues but this was just noticed during testing. Please see attached images to see how the buttons are smashed together after pressing Save-/Load Settings.

Please advise.

/Br. Anders

Hi,

I am working on a grid having inline edit functionality.  I am trying to create a dropdown which display a list of persons, however, I want to save the email id of the person in our backend SQL DB.

I am trying to implement this with editor template approach -

I have tried the below code -

Grid:

columns.Bound(mm => mm.Person).Title("Assigned To").EditorTemplateName("PersonList").HeaderHtmlAttributes(new { style = "white-space: normal" });

PersonList.chstml

@(Html.Kendo()
            .DropDownList()
            .Filter("contains")
            .Name("Person")
            .DataTextField("Name")
            .DataValueField("Email")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("GetPeopleByArea", "Common").Data("getPeopleByArea"))
                .ServerFiltering(true);
            })
            //.HtmlAttributes(new { required = "required", data_required_msg = "Select Person Name", style = "width: 100px" })
            .ValuePrimitive(true)
            .AutoWidth(true)
            .OptionLabel("-- Please Select --")            
    )

function getPeopleByArea() {
        var grid = $("#Grid").data("kendoGrid");
        var dataItem = grid.dataItem("tr.k-grid-edit-row");
        return {
            Area: dataItem.Area
        };
    }

When I edit the grid the dropdown work list works fine and it displays the filtered list of people as expected.  However, Instead of the email id the record is getting updated with Null or blanks in the backend table.

However, this approach works fine if I do not use getPeopleByArea function to filter the area based on certain conditions and use a different controller function to get the whole list.

Also, if I am using  .DataTextField("Name") and  .DataValueField("ID"), ID is getting stored and same is getting displayed on the grid instead of the Name.

What am I doing wrong here ? Can anyone please suggest.

Please let me know if you have any questions.

Thanks

Saurabh