{ field: "LastName", label: "LastName:", validation: { required: true, message: "test" }, hint: "Hint: enter alphanumeric characters only." },

The validation attribute message seems to be wrong

It should be validationMessage not message

Hi team,

As the question says, Im trying to define my template content as part of an html data attribute, see dojo: https://dojo.telerik.com/UxAPOXeV

But i get a syntax error when the widget is initialized.

Please advise.

Thanks,
Grant

Below is the kendo ui nested grid sample code and I highlighted the code which is the issue. Here I am trying to reference the nested grid inside a parent grid, but getting undefined exception. Not sure what I am doing wrong here.

var filterWorkOrderBundleDetails = function (DetailId) {
        var control = $("#grid_" + DetailId).data("kendoGrid");                                                              //(undefined): Not able to reference nested grid.
        //Todo

        return {            
            WorkOrderDetailId: DetailId
        }
    }

@(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_Result>()
    .Name("WorkOrderDetailGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.WorkOrderDetailNo).Title("Order Detail No").Filterable(e => e.Extra(false)).Width(80);
        columns.Bound(p => p.Description1).Title(productColumnTitle).Filterable(e => e.Extra(false)).Width(200);
        columns.Bound(p => p.AccountDetails).Title("Account").Filterable(e => e.Extra(false)).Width(200);
        columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')#");
        columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
        columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
        columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
        columns.Bound(p => p.Description).Title("Description").Filterable(e => e.Extra(true)).Width(200);
    })
    .ClientDetailTemplateId("rowDetailTemplate")
    .DataSource(ds => ds
        .Ajax()
        .Read(read => read.Action("GetAppWorkOrderDetails1", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderDetails"))
        .PageSize(PageSize)
    )
    .NoRecords(NoRecordFound)
    .AutoBind(true)
    .Events(e => e.DataBound("window.pm.order.tracking.onDataBound"))
    .Pageable(page => page.PageSizes(PageSizes).Messages(msg => msg.Display("{0} - {1} of {2:n0} items")))
    .Scrollable(a => a.Height("auto"))
    .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
    .Resizable(e => e.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    )
</div>

<script id="rowDetailTemplate" type="text/x-kendo-template">
    #if (WorkOrderDetailId != null){#
    @(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_BundleItems_Result>()
        .Name("grid_#=WorkOrderDetailId#")
        .Columns(columns =>
        {
            columns.Bound(o => o.WorkOrderNo).Title("Order").Width(80);
            columns.Bound(o => o.WorkOrderDetailNo).Title("Order Detail No").Width(80);
            columns.Bound(o => o.Partner).Title("Partner").Width(120);
            columns.Bound(o => o.BillChargeCode).Title("Charge Code").Width(80);
            columns.Bound(o => o.AccountDetails).Title("Account").Width(120);
            columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$\\\\#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')\\\\#");
            columns.Bound(p => p.Quantity).Title("Quantity").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
            columns.Bound(o => o.Description).Title("Description").Width(120);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(PageSize)
            .Read(read => read.Action("GetAppWorkOrderBundleDetails", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderBundleDetails('#=WorkOrderDetailId#')"))
        )
        .Pageable()
        .Scrollable(a => a.Height("auto"))
        .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
        .Resizable(e => e.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .ToClientTemplate()
    )
    #}else{  }#
</script>

Please help me!

I'm trying to put a context menu on a treeview. Which is working.But when I use the same code to target another css class (targeting <a> tags it's only showing the first letters of each word)

Hello,

I tried to add/edit data in dynamically added grids of a main grid. See code below.  When I added a new record in sub grid, the selected row in parent grid was collapsed and the first row was expanded. You can see screen captures in attached pdf file. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//Lib/Kendo/css/kendo.common-bootstrap.min.css">
    <link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//lib/kendo/css/kendo.bootstrap.min.css">
    <script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-3.3.1.js"></script>
    <script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-migrate-3.0.1.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/Lib/KendoNew/js/kendo.all.min.js"></script>
    
    <title></title>
    
</head>
<body>
    <div id="divMain">
       <div id="dsgrid" class="grid"
                             data-role="grid"
                             data-sortable="true"
                             data-toolbar="['create']"
                             data-detail-init="viewModel.dsgrid_detailInit"
                             data-bind="source: dsSource, events: { dataBound: ds_dataBound }"
                             data-editable='{"mode": "popup" }'
                             data-columns='[
                                 {"field":"Name","title":"Name"},
                                 {"field":"Title","title":"Title"},
                                 {"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
                                 ]'
                             data-detail-template='dssubgrid'
                             data-scrollable="false">

        </div>
    </div>

    <script>
        
        var viewModel;
        $(document).ready(function () {
            var reobj = {};
            reobj.Sources = [];

            viewModel = kendo.observable({
                dsSource: new kendo.data.DataSource({
                    data: reobj.Sources,
                    schema: {
                        model: {
                            id: "Name",
                            fields: {
                                Name: { validation: { required: true } },
                                Title: { validation: { required: true } },
                                TableName: { editable: true },
                                GetDataUrl: { editable: true },
                                TextField: { editable: true },
                                ValueField: { editable: true }
                            }
                        }
                    }
                }),

                dsgrid_detailInit: function (e) {
                    if (!e.data.Values) e.data.Values = [];
                    var ds = new kendo.data.DataSource({
                        data: e.data.Values,
                        schema: {
                            model: {
                                id: "Text",
                                fields: {
                                    Text: { editable: true, validation: { required: true } },
                                    Value: { editable: true, validation: { required: true } }
                                }
                            }
                        }
                    });
                    e.detailRow.find(".grid").kendoGrid({
                        dataSource: ds,
                        editable: "popup",
                        toolbar: ['create'],
                        columns: [{
                            title: "Value",
                            field: "Value"
                        }, {
                            title: "Text",
                            field: "Text"
                        }, {
                            command: ["edit", "destroy"]
                        }
                        ]
                    });
                },


                ds_dataBound: function (e) {
                    e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
                },


            });

            kendo.bind($("#divMain"), viewModel);
        });

    </script>
    <script id="dssubgrid" type="text/x-kendo-template">
        <div class='grid'></div>
    </script>
  </body>
</html>

How can I solve this issue?

Thanks

Lei

Hi Team, 

As my question says, Im having trouble with a DataSource bound to a ListBox. Take a look at my Dojo here, https://dojo.telerik.com/ipIfAROK.
I have bound a DS to the listbox, and it displays the DS content, great. The content is (suppose to be) linked to the enabled state of the ActionButton, no content = disabled button. however if i removed the listbox items, the button remains enabled.

To Replicate:
1) Click the "Log List" button and check your console, there are 2 items in the viewModel DS
2) Remove them and click the Log button again. There are STILL 2 items in the DS, but they've been removed from the listbox.

Please advise on how i can link the enabed state of a button to the content of the list box, preferably using the View Model. I hope this isnt something simple I've missed.

THanks,
Grant

I'm forced to upgrade jQuery to 3.4.1 because of security implications, and now I get an error working with a bubble layer.  Using jQuery 1.12.4 the error does not occur.

KendoUI 2020.1.114 is listed as compatible with 3.4.1.  I am using 2020.1.406 so I just assumed it is compatible.  This is part of a MVC application. 

I've attached the stack trace from the debugger console.  Any help is greatly appreciated since I am forbidden to use any earlier versions of jQuery.

Thanks!

Kevin