[Solved] Master/Detail binding and hide if empty

[Lutz]

Hi,

I have a Grid With Master-Detail logic implemented which works just fine except 2 things:

 

1.) detailInit gets called every time I expand a row. Why? Can this be changed?

 

2.) If the detail grid has no data to show due to filtering I would like to remove the detail grid completely and show a text message instead "no Data".

I also want to get rid of the columns etc...so the complete Grid should disapear.

 

My MasterGrid and DetailGrid is defined as:

$("#kendoGefahrstoffGrid").kendoGrid({
    groupable: true, //Können die Records per Drag and Drop grupiert werden?
    sortable: true, //Dürfen die Spalten sortiert werden oder nicht
    scrollable: false,
    resizable: true,
    detailInit: detailInit,
    dataBound: function() {

        this.expandRow(this.tbody.find("tr.k-master-row"));

    },
    columnMenu: true, //Zeigt ein Menü an um Sortierung vorzunehmen oder eine Spalte ein bzw. auszublenden
    toolbar: kendo.template($("#toolbarTemplateGefahrstoff").html()),
    columns: [{
        field: "ID",
        title: "ID",
        width: 50
    },
    {
        field: "SelGefarhrstoff.Title",
        title: "My Gefahrstoff Title"
    },
    {
        field: "SelGefarhrstoff.Modified",
        title: "CheckDate"
    }, {
        field: "SelGefarhrstoff.CMR_Kat",
        title: "CMR Kategorie"
    }, {
        command: [{
            text: "Edit",
            click: editItem,
            iconClass: "k-icon k-i-edit"
        }],
        title: "Actions",
        width: "120px"
    }, {
        command: [{
            text: "create $18",
            click: createp18,
            iconClass: "k-icon k-i-file-add"
        }],
        title: "§18 Action",
        width: "120px"
    }
    ],
    dataSource: dataSourceGefahrstoff
}); //kendoGefahrstoffGrid

 

function detailInit(e) {

    dataSourceSelectedBAsDetails = new kendo.data.DataSource({
        schema: {
            model: {
                id: "ID"
            }
        },
        transport: {
            read: function (options) {
                $pnp.sp.web.lists.getByTitle("SelectedBAs").items
                    .select("*,UniqueId,FieldValuesAsText")
                    .expand("FieldValuesAsText")
                    .filter("INGAId eq " + currentINGA)
                    .get()
                    .then(function (items) {
                        console.log("SelectedBAs results:", items);
                        options.success(items);
                    }) //then function
                    .catch(function (e) {
                        console.log(e);
                        options.error(e);
                    }) //catch function
            } //read function
        }, //transport
        filter: { field: "GefahrstoffbezugId", operator: "eq", value: e.data.SelGefarhrstoff.Id }
    }); //datasource


    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: dataSourceSelectedBAsDetails,
        noRecords: {
    template: "No data available"
  },
        columns: [{
            field: "ID",
            title: "ID",
            width: 50
        }, {
            field: "OData__dlc_DocIdUrl.Url",
            title: "Doc",
            template: '<a href="#=OData__dlc_DocIdUrl.Url#">Details</a>'
        },
        {
            command: [{
                text: "Edit",
                click: editItem,
                iconClass: "k-icon k-i-edit"
            }, {
                text: "view",
                click: showDocInBrowser,
                iconClass: "k-icon k-i-file"
            }],
            title: "Actions",
            width: 240
        }
        ]
    });
}

 

[Stefan]

Hello, Lutz,

Thank you for the code.

Regarding the questions:

1) The detailInit function is expected to be called only on the initial expanding for the corresponding row(it will be called once for every detail Grid in order to create it). If the function is called for the same row after it has already been expanded once, this is not expected and we would like and runnable example, so we can test it locally:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailinit

2) I can suggest the read function to check if the items.length is 0, and based on that to initialize the Grid or not. If there are no items(empty Grid) instead of appending the Grid to append a custom DOM element to show that there are no items.

Let me know if you need additional assistance on this matter.

Regards,
Stefan
Progress Telerik