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

The close x on all of my kendo windows is not correctly aligned with the title. 

See screenshot of example and computed css at at https://imgur.com/a/unB1XOs 

All of my css is loaded here:

This is happening with all of my kendo windows, but one example of how i create the example:

first sorry for my bad english.i have a grid with data from mysql iam using php to connect my grid with mysql data.

the grid is working fine with the fetch data but now i need a external dropdown to search data from the grid here the main thing is that

i want to search data from database and get the searched data  in the grid.i dont know what code i do in my dropdown to search the data.  function is same for both fetch or search data.

i want to send my dropdown value as a parameter in the function get_sql_for_journal_inquiry_iq().i want to send the dropdown value in the $account param of php function. how do i do this.

plz tell me what change i do here

change: function(e){
 
});
}

my code is...

<!----------------grid------------------>
<html>
<head>
<title>GRID PHP</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />
<!-- <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css" />-->
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />
<script type="text/javascript" src="path/to/date.js"></script>
<!-- <script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>-->


<script type="text/javascript"></script>

<script>

$(function() {


$('#ddl').kendoDropDownList({
autoBind: false,
filter: "startswith",
placeholder: "Select country...",
// separator: ", ",

serverFiltering: true,
enforceMinLength: true,
dataTextField: "account_name",
dataValueField: "account_code",
dataSource: {

// autoBind: true,
dataType: "json",

transport: {


read: "data/statusdropdown.php",

}
},

change: function(e){
var grid = $('#grid').data('kendoGrid');
// $("#grid").data("kendoGrid").dataSource.filter({});

var field = 'CategoryID';
var operator = 'eq';
var value = e.sender.value();

grid.dataSource.filter({
field: field,
operator: operator,
value: value
});
}
});

$("#grid").kendoGrid({


dataSource: {


transport: {
// read: "data/fetch.php",

read: {
url: "../includes/db/gl_db_trans.php",
// url: "data/fetch.php",
type: "post",
data:{method:"get_sql_for_journal_inquiry_iq"},
dataType: "json",

},


},

schema: {
model: {
id: "trans_no",
fields: {

tran_date: { type: "date" },
trans_type: { type: "string" },
trans_no: { type: "number" },
name: { type: "string" },

reference: { type: "string" },
cheque: { type: "string" },
amount: { type: "number" },
memo_: { type: "string" },
user_id: { type: "string" },


}
},


},
batch: true,
pageSize: 5,
navigatable: true,

},
groupable: true,
reorderable: true,
editable: "inline",// editable: "incell",
resizable: true,
scrollable: true,
filterable: true,
sortable: true,
columnMenu: true,
pageable: {
alwaysVisible: false,
pageSizes: [5, 10, 20, 100],
buttonCount: 5,
refresh: true,
},

columns: [


{

type: "date",
field: "tran_date",
title: "start_date",
width: "8%",
format:"{0:dd/MM/yyyy}",
template: '#= kendo.toString(tran_date, "dd-MM-yyyy")#',

},
{

field: "trans_type",
title: "trans_type",
width: '50px' ,

},
{
field: "trans_no",
width: "50px",
title: "trans_no",

template: "#=trans_no#",

},
{
field: "name",
width: "50px",
title: "name",
},
{

field: "reference",
title: "reference",
width: '50px' ,

},
{
field: "cheque",
title: "cheque",
width: '50px' ,

},
{

field: "amount",
title: "amount",
width: '50px' ,

},
{

field: "memo_",
title: "memo",
width: '50px' ,

},
{

field: "user_id",
title: "user_id",
width: '50px' ,

},
{
field: "trans_no",
title: "View",
template:"<button id='qq' class='editButtons' style='float:right'><a target='popup' onclick=\"window.open('../view/gl_trans_view.php?type_id=#=trans_type#&trans_no=#=trans_no#','popup','width=600,height=600'); return false;\" >view</a></button>",
width: '50px'
}

],



});

});

</script>

</head>
<body><div id="example">

<style>

* {
font-family: "Verdana", sans-serif;
font-size: 10pt;

}

.k-grid td
{
padding: 0.5em 2em
}


#grid table {
table-layout:fixed
}



</style>
<div id="grid" style="width: 100%;" >

<div id="filters">
<input id="ddl" />
</div>
</div>

</div>
<script>

</script>
</body>
</html>

//my php function is this

$method = $_POST['method'];
$method();

//$method = $_POST['method'];
//==============iqra
function get_sql_for_journal_inquiry_iq($dimension=null,$account='')
{
// print $account;

$sql = "SELECT IFNULL(a.gl_seq,0) as gl_seq,gl.tran_date,
gl.type as trans_type,
gl.type_no as trans_no,
IFNULL(MAX(supp.supp_name), MAX(cust.name)) as name,
gl.dimension_id,
gl.dimension2_id,'',
refs.reference,gl.cheque,"
.($dimension ? " -SUM(IF(dim.dimension in(gl.dimension_id,gl.dimension2_id), gl.amount, 0))
as amount,":" SUM(IF(gl.amount>0, gl.amount,0)) as amount,")
."com.memo_,
IF(ISNULL(u.user_id),'',u.user_id) as user_id
";

define("TB_PREF","0_");
$sql .= ", gl.approval
, gl.counter as id,
gl.account ,a.stamp
";

$sql.= " FROM ".TB_PREF."gl_trans as gl
LEFT JOIN ".TB_PREF."audit_trail as a ON
(gl.type=a.type AND gl.type_no=a.trans_no)

LEFT JOIN ".TB_PREF."comments as com ON
(gl.type=com.type AND gl.type_no=com.id)

LEFT JOIN ".TB_PREF."refs as refs ON
(gl.type=refs.type AND gl.type_no=refs.id)

LEFT JOIN 0_users as u ON
a.user=u.id
LEFT JOIN 0_debtors_master cust ON gl.person_type_id=2 AND gl.person_id=cust.debtor_no
LEFT JOIN 0_suppliers supp ON gl.person_type_id=3 AND gl.person_id=supp.supplier_id"
.($dimension ?
" LEFT JOIN (SELECT type, type_no, MAX(IFNULL(dimension_id, dimension2_id)) dimension
FROM
".TB_PREF."gl_trans GROUP BY type, type_no) dim
ON gl.type=dim.type AND gl.type_no=dim.type_no" : '').

" where gl.amount!=0";



if ($account != null)
$sql .= " AND gl.account = ".db_escape($account);

$sql .= " GROUP BY gl.tran_date, a.gl_seq, gl.type, gl.type_no";
$sql .= " ORDER BY a.stamp DESC";
// return $sql;
$query = mysql_query($sql)or die(mysql_error());
// print_r(mysql_fetch_array($query));

while($obj = mysql_fetch_array($query)) {



$arr[] = array(
'tran_date' => str_replace("\'", "'", $obj["tran_date"]),
'trans_type' => str_replace("\'", "'", $obj["trans_type"]),

'trans_no' => str_replace("\'", "'", $obj["trans_no"]),

'name' => str_replace("\'", "'", $obj["name"]),

'reference' => str_replace("\'", "'", $obj["reference"]),
'cheque' => str_replace("\'", "'", $obj["cheque"]),
'amount' => str_replace("\'", "'", $obj["amount"]),

'memo_' => str_replace("\'", "'", $obj["memo_"]),
'user_id' => str_replace("\'", "'", $obj["user_id"]),


);
}
print json_encode($arr);

}