Refresh the content of a ClientDetailTemplateId

5 posts, 1 answers
  1. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 17 Feb 2015 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 19 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 24 Feb 2015 in reply to Daniel Link to this post

    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.
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 26 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Daniel Link to this post

    Much appreciated !!
Back to Top