Refresh the content of a ClientDetailTemplateId

[Jacob]

Hi,

Below is the beginning of the kendo grid and its template.

@(Html.Kendo().Grid<CompanyDomainView>()
    .Name("customer-grid")
    .ClientDetailTemplateId("customerTemplate")
    ........

<script id="customerTemplate" class="gridtemplates" type="text/x-kendo-tmpl">
    <section>
        <div class="k-widget inline-grid-box">
.....

The template have a SAVE and a CANCEL button and I have problem with the CANCEL button.
When the user makes some changes and hit the cancel button, the template content should go back and show its previous data.

I don't want to refresh all the controls in the template in code, just to remove current instance of the template from the kendo-list of created templates.
I am able to programmatically collapse and expand any row in the grid, but I don't know how to instruct kendo to forget a template.

Think this: I collapse the row, remove its created template and expand the row again and a fresh template with data from its parent (the row).
How can i do that ?
Thanks.

[Daniel]

Hello,

The grid will reinitialize the detail if you remove the detail row so you could use logic similar to the one in the snippet below in the click handler:

function onCancelClick() {
    var detailRow = $(this).closest(".k-detail-row");
    var masterRow = detailRow.prev();
    var grid = $("#customer-grid").data("kendoGrid");
    grid.collapseRow(masterRow);
    kendo.destroy(detailRow);
    detailRow.remove();
    grid.expandRow(masterRow);
}

Regards,
Daniel
Telerik

 

 

[Jacob]

Hi Daniel and thanks.

I see there are a lot of things I don't know anything of :-)

Below is my cancel-test.
There are three steps in the code. 1:Find the MODEL and cancel the changes, 2:Replace the row with the old data, 3:select and expand the template again + deactivating the buttons.

function TEST_CancelChanges(ItemID, uid) {
    try {
        kendo.ui.progress($("#" + gridname), true);
        var grid = $("#" + gridname).data("kendoGrid");
        var model = grid.dataSource.get(ItemID);
        grid.dataSource.cancelChanges(model);

        var row = grid.items().filter("[data-uid=" + uid + "]");
        var template = row.hasClass("k-alt") ? grid.altRowTemplate : grid.rowTemplate;
        var tmp = $(template(model));
        row.replaceWith(tmp);

        if (expandedRowUid != null) {
            $('[data-uid=' + expandedRowUid + ']').addClass('k-state-selected');
            expandItem(expandedRowUid);
            ActivateTemplateButtons(expandedRowUid, false);
        }
    }
    finally {
        kendo.ui.progress($("#" + gridname), false);
    }
}

From your code, I see you find the detailrow and destroy + remove it.
Where would that fit into the sample above (please feel free to change the sample code) ??
Thanks.

[Daniel]

Hi again,

You can execute the logic before replacing the row:

var detailRow = row.next(".k-detail-row");
if (detailRow.length) {
    grid.collapseRow(row);
    kendo.destroy(detailRow);
    detailRow.remove();
}
row.replaceWith(tmp);

Otherwise, you should find the row for the model again or use replaceAll instead of replaceWith so that you have a reference to the new row.

Regards,
Daniel
Telerik

 

 

[Jacob]

Much appreciated !!