[Solved] How to do a double-click on a Hierarchical Grid?

[Neil]

In my project, I have a hierarchical grid with one level of Parent/Child hierarchy. 

When my Parent grid is initially created, it has 3 rows (with index 0, 1, and 2).  Each row has an id field that is hidden.  I need to be able to access the id so that I can call a detail screen when a row is doubleclicked.  I need to be able to call two separate detail screens - one if a parent is double-clicked, and one if a child is double-clicked.
0 - Parent
1 - Parent
2 - Parent

So the second Parent row is index 1.

However, the first row has two children.  When I expand the row to look at the children, the indexes of the client-side grid change.  Now it appears that there are 5 rows in the grid:
0 - Parent
1- Child
2 - Child
3 - Parent
4 - Parent

If I double click the second parent row, it now has index "3" instead of index "1".

However, my grid.data still has the same, original indexing on the rows.  And there is NO index "3" (only indexes 0, 1, and 2).

As I mentioned, I need to access the grid.data so I can get the (hidden) id of the row.  But the index retrieved by my double-click (reflecting the current state of the grid) has no relation to the original grid.data indexing.

Any ideas?  Code below:

<div class="gridSection prepend-1 span-22 last">
        <% Html.Telerik().Grid<DirectInstall.Core.QueryDtos.ProjectDto>()
        .Name("GridProjects")
        .ClientEvents(events => events
            .OnLoad("projectOnLoad"))
        .DataKeys(keys => keys.Add(p => p.Id))
        .Columns(columns =>
            {
                columns.Bound(p => p.Name);
                columns.Bound(p => p.Description);
                columns.Bound(p => p.StartDate);
                columns.Bound(p => p.EndDate);
                columns.Bound(p => p.Status);
                columns.Bound(p => p.Id).Hidden(true);
            })
        .DataBinding(dataBinding => dataBinding
            .Ajax()
            .Select("BindGridProjects", "Projects"))
        .DetailView(ordersDetailView => ordersDetailView.ClientTemplate(
            Html.Telerik().Grid<DirectInstall.Core.QueryDtos.ScopeDto>()
                .Name("GridScopes_<#= Id #>")
                .DataKeys(keys => keys.Add(s => s.Id))
                .ClientEvents(events => events
                    .OnLoad("scopeOnLoad"))
                .Columns(columns =>
                {
                    columns.Bound(s => s.Name);
                    columns.Bound(s => s.Description);
                    columns.Bound(s => s.Status);
                    columns.Bound(s => s.ScopeTypeName);
                    columns.Bound(s => s.Id).Hidden(true);
                })
                .DataBinding(dataBinding => dataBinding
                    .Ajax()
                    .Select("BindGridScopes", "Projects", new { projectId = "<#= Id #>" }))
                .Filterable()
                .Pageable(paging => paging.PageSize(50))
                .Selectable()
                .Sortable()
                .Reorderable(reorder => reorder.Columns(true))
                .Resizable(resizing => resizing.Columns(true))
                .ToHtmlString()
            ))
        .Scrollable(scrolling => scrolling.Height(200))
        .Resizable(resizing => resizing.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable()
        .Filterable()
        .Pageable(paging => paging.PageSize(50))
        .Selectable()
        .Render();
    %>
    </div>


<script type="text/javascript">
        function projectOnLoad() {
            // NOTE: This selector is for selecting only the hierarchical parent rows
            $('.t-grid-content tbody > .t-master-row:not(.t-no-data)', this).live('dblclick', function (e) {
                debugger;
                var grid = $('#' + e.liveFired.id).data('tGrid');
                var data = grid.data[$(grid.$tbody[0].rows).index(this)];
                var id = data["Id"];
                var url = '<%= Url.Action("Edit") %>/' + id;
                //window.location = url;
                alert(url);
            });
        }

        function scopeOnLoad() {
            //NOTE: This selector is for selecting only rows with data
            $('tbody > tr:not(.t-no-data)', this).live('dblclick', function (e) {
                debugger;
                var grid = $('#' + e.liveFired.id).data('tGrid');
                var data = grid.data[$(grid.$tbody[0].rows).index(this)];
                var id = data["Id"];
                var url = '<%= Url.Action("Scope") %>/' + id;
                //window.location = url;
                alert(url);
            });
        }
    </script>

[Dan]

Was a solution provided for this?

[Daniel]

Hello,

The Grid's dataItem client-side method could be used to get the row data without depending on the index.


Kind regards,
Daniel
the Telerik team

[Dan]

Yeah, just ended up doing this

function onLoad() {
    var grid = $(this).data('tGrid');
    $('tr:has(td)', this).live('dblclick', function () {
        var $tr = $(this);
        var dataItem = grid.dataItem($tr);
        var path = "/";
        if (location.pathname != path)
            path = location.pathname + "/";
        location.href = path + "Season/Index/" + dataItem.MyObjectId;
    });

}