I am trying to implement a custom tool in the Kendo Editor, following demo/doc implementation and always getting a typeError of some form whenever the custom tool uses a kendo template.  For example:

@(Html.Kendo().Editor()
    .Name("editor")
    .Tools(tools => {
            tools
        .Clear()
        .Bold()
        .Italic()
        .CustomTemplate(temp => temp.Template(
                Html.Kendo().DropDownList()
                    .Name("ddl1")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<object>
                    {
                        new { Text = "text 1", Value = "Value 1" },
                        new { Text = "text 2", Value = "Value 2" },
                        new { Text = "text 3", Value = "Value 3" },
                        new { Text = "text 4", Value = "Value 4" }
                    })
                    .ToClientTemplate()
                    .ToHtmlString()
                ));
    })
)

In this case the error is as follows:

Uncaught TypeError: Cannot read properties of null (reading 'length')

We are using KendoEditor in our MVC application. When assigend HTML to it it is auto formatting it. E.g.
<p style="font-size:13.3333px;"><span style="font-family:Verdana, Geneva, sans-serif;font-size:14pt;">Dear ABC</></></></span></p><p style="font-size:13.3333px;"><span style="font-family:Verdana, Geneva, sans-serif;font-size:14pt;">We have received your details:&nbsp;</span><span style="color:#ffffff;"><span id="spa123"><span> Certificates</span><table class="tbl" border="1" cellpadding="1" cellspacing="0" style="width:100%;font-family:inherit;font-size:inherit;color:inherit;" ><tr style="font-weight:bold;"><td style="text-align: right">Id</td><td style="text-align: left">name</td><td style="text-align: left">Amount</td><td style="text-align: left">Other</td><td style="text-align: left">Comments</td></tr><tr><td style="text-align: right;">1</td><td style="text-align: left;"></td><td style="text-align: left;"></td><td style="text-align: left;"></td><td style="text-align: left;"></td></tr></table></span></span> <span style="background-color:#ffffff;color:#ffffff;"></span></p>

changing to 

<p style="font-size:13.3333px;"><span style="font-family:Verdana, Geneva, sans-serif;font-size:14pt;">Dear ABC</span></p>
<p style="font-size:13.3333px;"><span style="font-family:Verdana, Geneva, sans-serif;font-size:14pt;">We have received your details:&nbsp;</span><span style="color:#ffffff;"><span id="spa123"><span>Certificates</span></span></span></p>
<table class="tbl k-table" border="1" cellpadding="1" cellspacing="0" style="width:100%;font-family:inherit;font-size:inherit;color:inherit;"><tbody><tr style="font-weight:bold;"><td style="text-align:right;">Id</td>
<td style="text-align:left;">name</td>
<td style="text-align:left;">Amount</td>
<td style="text-align:left;">Other</td>
<td style="text-align:left;">Comments</td>
</tr>
<tr><td style="text-align:right;">1</td>
<td style="text-align:left;">&nbsp;</td>
<td style="text-align:left;">&nbsp;</td>
<td style="text-align:left;">&nbsp;</td>
<td style="text-align:left;">&nbsp;</td>
</tr>
</tbody></table>
<span style="background-color:#ffffff;color:#ffffff;"></span><p>&nbsp;</p>

Here <span> and <P> tags automatically getting closed before table. while extected is all should be in span with <span style="color:#ffffff;">.

Not able to trace why it is happning.

Hello,

I'm fairly new to Kendo and having an issue when attempting to pass a CustomerID to a TabStrip from a Grid.

Based on the following article I have tried to follow to get Order data loaded on the TabStrip however I'm running into the below JavaScript error

https://demos.telerik.com/aspnet-core/grid/detailtemplate

Syntax error, unrecognized expression: #tabStrip_#=CustomerID# & Uncaught Error: Syntax error, unrecognized expression: #grid_#=CustomerID#

Please see Grid and TabStrip code below.

@(Html.Kendo().Grid<LewisTestProject.Models.Customer>()
  .Name("grid")
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => {
          model.Id(p => p.CustomerID);
          model.Field(p => p.CustomerID).Editable(false);
      })
      .PageSize(18)
      .Read(read => read.Action("Customers_Read", "Customer"))
      .Create(create => create.Action("Customers_Create", "Customer"))
      .Update(update => update.Action("Customers_Update", "Customer"))
      .Destroy(destroy => destroy.Action("Customers_Destroy", "Customer"))

   )
  .Columns(columns =>
  {
      columns.Bound(order => order.CustomerID);
      columns.Bound(order => order.CompanyName);
      columns.Bound(order => order.ContactName);
      columns.Bound(order => order.ContactTitle);
      columns.Bound(order => order.Address);
      columns.Bound(order => order.City);
      columns.Bound(order => order.Region);
      columns.Bound(order => order.PostalCode);
      columns.Bound(order => order.Country);
      columns.Bound(order => order.Phone);
      columns.Bound(order => order.Fax);
      columns.Command(command =>
      {
          command.Edit();
          command.Destroy();
      }
      ).Title("Actions");
  })
  .ToolBar(toolbar => {
      toolbar.Create();
      toolbar.Search();
  })
  .Pageable()
  .Sortable()
  .ClientDetailTemplateId("template")
  .Events(events => events.DataBound("dataBound"))
  .Editable(e => e.Mode(GridEditMode.InLine))
 )

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=CustomerID#")
    .SelectedIndex(0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items =>
    {
        items.Add().Text("Orders").Content(@<text>
            @(Html.Kendo().Grid<LewisTestProject.Models.OrderViewModel>()
                .Name("grid_#=CustomerID#") // template expression, to be evaluated in the master context
                .Columns(columns =>
                {
                    columns.Bound(o => o.CustomerID);
                    columns.Bound(o => o.OrderID).Title("ID").Width(100);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("OrdersDetail_Read", "Customers", new { customerID = "#=CustomerID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
                )
        </text>
        );
        //items.Add().Text("Contact Information").Content(
        //    "<div class='employee-details'>" +
        //        "<ul>" +
        //            "<li><label>Country:</label>#= Country #</li>" +
        //            "<li><label>City:</label>#= City #</li>" +
        //            "<li><label>Address:</label>#= Address #</li>" +
        //            "<li><label>Home Phone:</label>#= Phone #</li>" +
        //        "</ul>" +
        //    "</div>"
        //);
    })
    .ToClientTemplate()
    )
</script>

Any help would be greatly appreciated.

Thanks,

Lewis.

hi I have the following in my cshtml pages.

<div class="grid-scrollable">@(Html.Kendo().Grid<ViewModels.Admin.CDSUtilizationViewModel>() .Name("cdsgrid") .Columns(columns => { columns.Bound(c => c.Id).Width(150).Hidden(true); columns.Bound(c => c.Transaction_Id).Width(150).Hidden(true); columns.ForeignKey(p => p.Contract_Id, (System.Collections.IEnumerable)ViewData["ContractNumber"], "Id", "ContractNumber").Width(140); columns.ForeignKey(p => p.Contractor_Id, (System.Collections.IEnumerable)ViewData["ContractorName"], "Id", "ContractorName").Width(200); columns.ForeignKey(p => p.ServiceDetail_Id, (System.Collections.IEnumerable)ViewData["ServiceNameString"], "Id", "ServiceNameString").Width(300); columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date").Format("{0:MMMM yyyy}").Width(120); columns.Bound(p => p.UnitsDelivered).EditorTemplateName("Integer").Width(80); columns.Command(command => { command.Edit().HtmlAttributes(new { @class = "btn-primary" }); command.Destroy().HtmlAttributes(new { @class = "btn-primary" }); }).Width(150); }) .ToolBar(tools => { tools.Create().Text("Add CDS Utilization Record").HtmlAttributes(new { @class = "btn-primary" }); tools.Excel().Text("Excel").HtmlAttributes(new { @class = "pull-right" }); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5)) .Selectable() .Filterable(f => f.Operators(o => o.ForString(s => s.Clear() .Contains("Contains") .DoesNotContain("Does not contain") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") .StartsWith("Starts with") .EndsWith("Ends with ")))) .Resizable(resize => resize.Columns(true)) .Events(e => e.Edit("oncdsutilizationGridEdit")) .Excel(excel => excel.FileName("CDSUtilization.xlsx").Filterable(true).AllPages(true)) .DataSource(dataSource => dataSource.Ajax().PageSize(10).Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); }) .Read(read => read.Action("CDSUtilizationRead", "CDSContractUtilization")) .Create(create => create.Action("CDSUtilizationCreate", "CDSContractUtilization")) .Update(update => update.Action("CDSUtilizationUpdate", "CDSContractUtilization")) .Destroy(destroy => destroy.Action("CDSUtilizationDestroy", "CDSContractUtilization")) .Events(events => events.Error("error"))) )</div>

[AcceptVerbs(HttpVerbs.Post)] public ActionResult CDSUtilizationCreate([DataSourceRequest]DataSourceRequest request, CDSUtilizationViewModel cdsutilization)

{

if (ModelState.IsValid) { cdsutilization.CreateDate = DateTime.Now; cdsutilization.Transaction_Id = Convert.ToInt32(cDSUtilizationService.GenerateMaxTrasactionIdCDSUtlization()); var cdsutilizationDataObj = cDSUtilizationService.AddAndSave(Mapper.Map<CDSUtilizationViewModel, CDSUtilization>(cdsutilization)); cdsutilization.Id = cdsutilizationDataObj.Id; }

return Json(new[] { cdsutilization }.ToDataSourceResult(request, ModelState));

}

and I want to display only Month and Year calendar

similar to this.

and up on my month selection I want to insert the first day of the selected month in to database.

can you please help.

Hi, I'm having an issue with kendo charts. Basically I need to get both the cost and consumption y-axes on the chart to cross the category axis at 0. Kendo has .AxisCrossingValue() which looks like its supposed to fix this issue by setting the value however it doesn't seem to work when there is more than one y axis on a graph.

Here is the code im using:

@(Html.Kendo().Chart<PlotPoint>()

    .Name("InvoiceChart")

    .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))

    .ChartArea(chartArea => chartArea.Background("transparent"))

    .PlotArea(pa => pa.Background("#FFFFFF"))

    .AutoBind(false)

    .SeriesDefaults(x => x.Column().Labels(y => y.Visible(true).Format("{0:N0}").Background("transparent").Position(ChartBarLabelsPosition.InsideEnd).Rotation(90)))

    .ValueAxis(axis => axis.Numeric().Name("cons").Title("Consumption").Labels(labels => labels.Format("{0:N0}")).AxisCrossingValue(0))

    .ValueAxis(axis => axis.Numeric().Name("cost").Title("Cost £").Labels(labels => labels.Format("{0:N0}")).AxisCrossingValue(0))

    .HtmlAttributes(new { style = "height:480px;" })

    .CategoryAxis(axis => axis.Labels(x => x.Rotation(-45)).AxisCrossingValue(0, 1000))

    .Events(x => x.LegendItemClick("OnChartLegendClickToHideShowSeriesData")))

And here is what the graph looks like when there are negative y axis values:

Any help would be greatly appreciated.

Thanks

 i.Add()
 .Id(Id.ToString())
 .Name(Id.ToString())
 .Title(Name.ToString())
 .Field(Id.ToString())
 .Label(l => l.Text(Lab + ":"))
 .Editor(e =>
 {
     e.NumericTextBox<Decimal>()
         .Format("c")
         .Value(System.Convert.ToDecimal(Answer));
 });

Posted above is an item on a form unfortunately the Value property doesn't display anything nor does hard coding a number into Value property. However, when I place the same variable into the placeholder property, it does seem to display what its supposed to. Is there a reported bug for why this is happening or perhaps a work around to assist this. 

Thank you in advance for your assistance

Attempting to create persistence on filter.

I have the following filter:

                    @(Html.Kendo().Filter<...>()
                        .Name("fltMatrix")
                        .Events(e => e.Change("fltMatrix_Change"))
                        .DataSource("dataSource1")
                        .ExpressionPreview()
                        .Fields(f =>
                        {
...
                        }))
                    @Html.HiddenFor(model => model.FILTER)

I have the following JS code:

    function fltMatrix_Change(e) {
        e.sender.applyFilter();
        $("#FILTER").val(JSON.stringify(e.expression));
    }

    function getInitialExpression() {
        if ($("#FILTER").val()) {
            return JSON.parse($("#FILTER").val());
        }
    }

document.ready looks like this:

    $(document).ready(function () {
        if (getInitialExpression()) {
            var filter = $("#fltMatrix").data("kendoFilter");
            console.log(filter);
            var options = filter.getOptions();
            options.expression = getInitialExpression();
            filter.setOptions(options);
            filter.applyFilter();
        }
    });

console shows undefined and I get an error on the highlighted line:

jQuery.Deferred exception: Cannot read properties of undefined (reading 'getOptions') TypeError: Cannot read properties of undefined (reading 'getOptions')  

Everything else seems to work OK.  The filter is loading and updating the data source on change. The filter expression makes the round trip to the server and back.  It is just the .data("kendoFilter") that comes back with nothing.

We recently upgraded Telerik to 2024.3.806.  Adding a reference to kendo.min.all.js to the Scripts file in the MVC project updated the styles in our grids, but the custom template no longer displays when clicking on a button for it from the grid.

Removing the reference to the new JS restores the functionality but breaks the styling, which makes it difficult for our users to navigate through the grid (control buttons are invisible until the user hovers over them; the new style fixes that issue).  Is there anything wrong with this code as written?  None of it has been changed.

@(Html.Kendo().Grid<ESGR.Icms.Core.Domain.QuickViewCasesDto>()
                 .Name("grid")
                 .Sortable()
             .Pageable(pager =>
             {
                 pager.Input(true);
                 pager.Info(true);
                 pager.Numeric(false);
                 pager.PreviousNext(true);
                 pager.PageSizes(new int[] { 25, 50, 100 });
             })
             .Columns(columns =>
             {
                 columns.Bound(column => column.FirstName).Title("First Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.LastName).Title("Last Name").Media("(min-width: 768px)");
                 columns.Bound(column => column.DateOpened).Title("Date Opened").Width(200).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseNumber).Title("Case Number").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseStatus).Title("Status").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseState).Title("State").Width(80).Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseRegion).Title("Region").Width(100).Media("(min-width: 768px)");
                 columns.Bound(column => column.AssignedTo).Title("Assigned To").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.EnteredBy).Title("Entered By").Width(120).Media("(min-width: 768px)");
                 columns.Bound(column => column.LastUpdate).Title("Last Update").Width(130).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
                 columns.Bound(column => column.CaseIdentifier).Title("Case Identifier").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.Employer).Title("Employer").Width(80).Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanFirstName).Title("OmbudsmanFirstName").Media("(min-width: 768px)").Hidden();
                 columns.Bound(column => column.OmbudsmanLastName).Title("OmbudsmanLastName").Media("(min-width: 768px)").Hidden();
                 columns.Group(group => group.Title("Action Required").Width(150).Columns(info =>
                 {
                     info.Bound(x => x.TwoDayRequired).Title("2 Day").Width(50);
                     info.Bound(x => x.SevenDayRequired).Title("7 Day").Width(50);
                     info.Bound(x => x.FourteenDayRequired).Title("14 Day").Width(56);
                 }).Media("(min-width: 768px)")
                 );
                 columns.Bound(column => column.CaseID).Width(40).ClientTemplate("<a class='k-button manage' aria-label='ManageCase' href='" +
                 @Url.Content("~/ManageCase") + "?caseId=#= CaseID #'" + ">ManageCase</a>").Sortable(false)
                     .Title("Manage Case").Width(100).Media("(min-width: 768px)");
                 columns.Template("#=resColTemplate(data)#").Title("Records").Media("(max-width: 768px)");
                 columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");
             }).DataSource(ds => ds.Ajax()
              .Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
                 .Model(m => m.Id(id => id.CaseID))
                 .PageSize(25))
                 .Pageable()
             )

 @*ViewDetail Modal view*@
 @(Html.Kendo().Window()
     .Name("Details")
     .Title("Case More Information")
     .Visible(false)
     .Modal(true)
     .Resizable()
     .Draggable(true)
     .Width(500)
 )

<script type="text/x-kendo-template" id="template">
    <div>
        <div class='viewdetails'>
            <ul class="form-group p-3 mt-2">
                <li><span class="b">Date Opened:&nbsp;</span>#= DateOpenedString #</li>
                <li><span class="b">Ombudsman:&nbsp;</span>#= OmbudsmanFirstName # #= OmbudsmanLastName # </li>
                <li><span class="b">Employer:&nbsp;</span>#= Employer #</li>
                <li><span class="b">Primary Point of Contact First Name:&nbsp;</span>#= PriPocFirst #</li>
                <li><span class="b">Primary Point of Contact Last Name:&nbsp;</span>#= PriPocLast #</li>
                <li><span class="b">Email:&nbsp;</span>#= Email #</li>
                <li><span class="b">State:&nbsp;</span>#= CaseState #</li>
                <li><span class="b">Summary:&nbsp;</span>#= Summary #</li>
            </ul>
        </div>
    </div>

</script>

<script>
 var detailsTemplate;
        
 $(document).ready(function() {
     detailsTemplate = kendo.template($("#template").html());
 });

//Open ViewDetail Window
function showDetails(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var wnd = $("#Details").data("kendoWindow");
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
};

</script>

I am also including screenshots.  In the browser tools I can see that the data does load in the template, but it does not display on the screen.

Any ideas?

Hi,

I have a kendo grid. On copy the records from excel and paste on the kendo grid Paste event is triggered.

Suppose I have pasted 50 records from the excel to the grid. From that 50 records 10 records are invalid and I want to validate and show the error message for each row by row.

Please let me know how we can validate row by row on paste these 50 records from excel to kendo grid.

Events(events => events.Paste("onPaste"))

function onPaste(e) {

}