I have a ListView that works very nicely with most of the default behavior as shown below.  However, I would like to create a new item in the ListView by using a Popup form.  This form could also be used by the edit event if that simplifies the code, but does not have to be the same, and the edit functionality could work as it does now.  I have looked at the popup editing feature as described here.  However, I could not figure out how to make this work for create as there is no create event on the ListView.  Does everything have to work outside the framework of the control, so that the add is using a separate Ajax call and then refreshing the view, or is there a better way to keep this within the structure of the ListView and its events?

Add Button and ListView:

            @(Html.Kendo().Button()
                .Name("AddNew")
                .Icon("plus")
                .FillMode(ButtonFillMode.Solid)
                .Rounded(Rounded.Medium)
                .HtmlAttributes(new { @class = "add-button" })
                .Events(e=>e.Click("addNewClick"))
            )

            @(Html.Kendo().ListView<MyNamespace.Models.ItemComment>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("commentListTemplate")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id(comment => comment.CommentID))
                    .Read(read => read.Action("Comments_Read", "Comment").Data("getCommentReadParameters"))
                    .Update(update => update.Action("Comments_Update", "Comment"))
                    .Destroy(destroy => destroy.Action("Comments_Delete", "Comment"))
                    .Events(e => e.Error("epic.error.kendoErrorHandler"))
                )
                .Events(e => e.DataBound("onCommentsDataBound"))
                .Events(e => e.Remove("deleteConfirmation"))

            )

Display Template:

<script type="text/x-kendo-tmpl" id="commentListTemplate">
     <div class="k-card">
            <div class="k-card-body k-card-horizontal k-vbox k-column" style="margin:0;padding:4px 4px 0">
                <img class='k-card-image' style="height:16px; margin-right:5px;" src="@Url.Content("~/Content/assets/images/blue-person.png")">
                <div class='commentHeader'>
                    <h6 class='k-card-subtitle'>#= UserID #</h6>
                    <div class="edit-buttons">
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-edit-button" href="\\#">#= kendo.ui.icon({ icon: 'pencil' }) #</a>
                        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-delete-button" href="\\#">#= kendo.ui.icon({ icon: 'x' }) #</a>
                    </div>
                    <p>
                        #: Comment #
                    </p>
                </div>
            </div>
    </div>
</script>

Supporting JavaScript functions:

<script type="text/javascript">

    function onCommentsDataBound() {
        if (this.dataSource.data().length == 0) {
            $("#listView").append("<h3 style='padding: 2px 4px 0;'>No comments</h3>");
        }
    }

    function addNewClick(e) {
        var listView = $("#listView").data("kendoListView");
        listView.add();
        e.preventDefault();
    }

    function deleteConfirmation(event) {

        if (!confirm("Are you sure you want to delete this comment?"))
            event.preventDefault();
    }

</script>

Thanks, Bob

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.