onSelectionChanged(e) { e.component.collapseAll(-1); e.component.expandRow(e.currentSelectedRowKeys[0]); }, onContentReady(e) { if (!e.component.getSelectedRowKeys().length) { e.component.selectRowsByIndexes(0); } },

hi,
How can I add dxDataGrid1 onSelectionChanged and onContentReady function.

I want to open the detail grid as in the link https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailAPI/jQuery/Light/. can you help me.

onSelectionChanged(e) {
e.component.collapseAll(-1);
e.component.expandRow(e.currentSelectedRowKeys[0]);
}

onContentReady(e) {
if (!e.component.getSelectedRowKeys().length) { e.component.selectRowsByIndexes(0); }
}

C#

this.dxDataGrid1.Options = new
{
// redirect data requests to the WebRequest handler.
dataSource = serviceUrl + “&action=getEmployees”,
keyExpr = “IND”,
showBorders = true,

filterRow = new
{
visible = false
},
searchPanel = new
{
visible = true
},
paging = new
{
pageSize = 25
},
pager = new
{
visible = true,
showPageSizeSelector = true,
allowedPageSizes = new[] { “25”, “50”, “500” },
showNavigationButtons = true,
showInfo = true,
infoText = “{0} / {1} Sayfa ({2} Kayıt)”
},

columnsAutoWidth = true,
columns = new dynamic[]
{
new
{
dataField = “IND”,
caption = “IND”,
width = 100,
visible=false
},
new
{
dataField = “NAME”,
caption = “NAME”,
width = 100
},
new
{
dataField = “SURNAME”,
caption = “SURNAME”
},
},
masterDetail = new
{
autoExpandAll = false,
enabled = true,
// the name of the template in WidgetFunctions.
template = “detailTemplateInit”,
}
};

detailTemplateInit Script

// get the parameters.
var container = arguments[0];
var options   = arguments[1];
var gridState = {};
// store the widget context.
var me = this;

// get the postback url to communicate with the Wisej application.
var serviceUrl          = this.getPostbackUrl();

// get the master data grid data.
var currentEmployeeData = options.data;

// adds some text.
$("<div>")
    .addClass("master-detail-caption")
    .text(currentEmployeeData.NAME+"'a Ait Talep Detay")
    .appendTo(container);

   
    // creates a new child data grid within the master widget's context.
this[this.getId() + "_detail_" + options.rowIndex] = $("<div>")
    .dxDataGrid({
        showBorders: true,
        onSelectionChanged: function(e) {
            gridState[options.key] = e.selectedRowKeys;
            me.fireWidgetEvent("Select", {
                secim: gridState[options.key]
            });
        },
        selectedRowKeys: gridState[options.key],
        selection: {
            mode: "multiple"
        },
        columnAutoWidth: true,
        columns: [
        "TD_IND",
        {
            dataField: "PRODUCT",
            caption: "PRODUCT"
        }, 
         {
             dataField: "COUNT",
            caption: "COUNT"
        }
        ],
        dataSource: serviceUrl + "&action=getTasks&IND=" + options.key.IND
        }).appendTo(container).data("dxDataGrid");