Toolbar Templates Within the Grid Detail Template

[Steven]

Hello,
I've got a grid that leverages the detailInit feature and the detail grid has a toolbar with a button in it.

I want each button in those detail grids to have the same link with a different id parameter. (eg: /my/link?id=1, /my/link?id=2, etc..)

Here are a few lines to give an idea of what I've got:

    // ...
    grid = $el.kendoGrid({
        dataSource: ds,
        detailTemplate: kendo.template($('#cc_ajax_contact_group_grid_detail_tpl').html()),
        detailInit: function (e) {
            // ...
            // Calling method to init a detail grid.
        },
    // ...
    // Init detail grid...
    const detailGrid = $detailEl.kendoGrid({
        dataSource: ds,
        toolbar: kendo.template($('#cc_ajax_contact_group_grid_detail_toolbar_tpl').html()),
        columns: [
            // ...
        ],
        autoBind: true,
        noRecords: false,
        sortable: false,
        scrollable: false,
        pageable: false
    }).data('kendoGrid');
    // ...

    <!-- Grid Detail template -->
    <script type="text/x-kendo-template" id="cc_ajax_contact_group_grid_detail_toolbar_tpl">
        <div class="btn-group ml-2">
            <a href="/ActionLink/GoesHere" class="btn btn-primary btn-sm cc_ajax_contact_group_member_add">
                <i class="fa fa-plus" aria-hidden="true"></i>
                Add Group Member
            </a>
        </div>
    </script>
---

So, what I was hoping for was something in the template like this:

    <a href="/ActionLink/GoesHere?GroupId=#=GroupId#" 

But I'm seeing now after trying this that the dataSource model context for the grid rows won't be available in that toolbar template.
This makes sense I think.

So what I ended up doing is just adding a data attribute to the detail grid element.
This way I can use the toolbar buttons click event to select the parent grid and scoop up that data attribute.

Something like this:

    // ...
    const groupId = e.data.id;
    const $detailRow = e.detailRow;

    const $detailEl = $(app.foo.memberGridSelector, $detailRow);
    $detailEl.data('contact-group-id', groupId);
    // ...

And the button's click event:

    // ...
    const $btn = $(e.currentTarget);
    const $gridEl = $btn.parents(app.foo.memberGridSelector).data('kendoGrid');
    const groupId = $gridEl.data('contact-group-id');

    // Now use that group id to make an $.ajax call with jquery.
    // ...

---

So my question: Is there an easier way to do this or is above approach a reasonable solution?

 

Thanks,
Andy

[Steven]

Figured out what I was looking for.. so wanted to post here in case anybody else stumbled across this and might find it helpful.

// Using the click event of my detail grid's toolbar buttons
// Traverse up the DOM to the 'k-master-row'
// Use the master row's "uid" to retrieve it's dataItem

// Something like this in my click event handler:

const $btn = $(e.currentTarget);

const uid = $btn.parents('tr.k-detail-row').prev('tr.k-master-row').data('uid');
const parentGrid = app.foo.getGroupGrid();
const parentDataItem = parentGrid.dataSource.getByUid(uid);

console.log(parentDataItem);

[Petar]

Hi Steven,

Thank you for sharing the solution of your scenario with the community. It will surely help someone who wants to implement a similar to your scenario. 

Regards,
Petar
Progress Telerik