Kendo Grid detail template is not working on loading grid again(second time) using ajax form post(MVC)

Question

Below is the function for creating kendo grid and in that different function is called for column option and data source and detail template

     var kendoDataSource = currentOtherMerchant.model.dataSource();
        var columnsOptions = currentOtherMerchant.columnOptions();
        currentOtherMerchant.$el.kendoGrid({
            dataSource: kendoDataSource,
            columns: columnsOptions,
            dataBound: currentOtherMerchant.onDataBound,
            pageable: {
                refresh: true
            },
            detailTemplate: '<div class="tabstrip"><ul><li class="k-state-active" id="first">' + currentOtherMerchant.options.prompts.details + '</li></ul><div class="merchant-details"></div></div>',
            detailInit: currentOtherMerchant.detailInit,
            detailExpand: currentOtherMerchant.detailExpand,
            resizable: true,
            scrollable: true
        });

Below is the function for detail template

detailInit: function (e) {

        currentOtherMerchant.detailTab(e);
        currentOtherMerchant.animateTabStrip(e.detailRow);
    },
    detailExpand: function (e) {
        var grid = currentOtherMerchant.$el.data("kendoGrid");
        grid.collapseRow(grid.tbody.find(' > tr.k-master-row').not(e.masterRow));
        debugger;
    },
    /* Fetch details for expanded Pspid */
    detailTab: function (e) {
        var detailRow = e.detailRow;
        var ajaxData = { "PSPId": e.data.PSPId,
            "HashedParam": e.data.HashedParam
        };
        var ajaxParameters = { "ajaxData": ajaxData, "ajaxURL": currentOtherMerchant.model.attributes.urls.detailTemplateUrl, dataType: 'html' };
        grid_ajaxCall(ajaxParameters, function (data) {
            if (data != null) {
                currentOtherMerchant.genarateDetailTemplateId(detailRow, e);
                detailRow.find(".merchant-details").html(data);
            }
        });
    },

Please help to solve this issue. Thank you in advance

Answer 1

I got the solution for this, This is issue because of kendo grid is not destroyed from dom on ajax form post so i have used kendo grid destroy method before creating grid,so all the objects and events for grid is destroyed

  if (current.$el.find('#gridId').data().kendoGrid != undefined)
            current.$el.find('#gridid').data().kendoGrid.destroy();

Make kendo grid element empty

           current.$el.find('#girdid').empty();