[Solved] Access DetailView during onRowDataBound

[Steve Dayton]

Can someone give me a little help on accessing the DetailView row when doing a client-side event
I put a div with a unique id and tried to access it with jQuery during onRowDataBound but no luck.
And I've triple checked for typos.

<td colspan="4" class="t-detail-cell">
   <div id="details2734"></div>
</td>

<script type="text/javascript">
function onRowDataBound(e) {
   var grid = $(this).data('tGrid');
   var dataItem = e.dataItem;
   $("#details" + dataItem.ID).html('custom client side calculation');
}
</script>

The reason why I'm trying to do this is that in the JSON object for each row there is another array for the details view that i would like to iterate and insert into the details view. and i don't want to do a grid within a grid, I just want to create a simple list in the detail view for each row.

TIA

[Atanas Korchev]

Hi Steve Dayton,

 The detail view is not created during databinding. It is created when the user expands it for the first time. You should use the OnDetailViewExpand event instead.

Regards,
Atanas Korchev
the Telerik team

[Steve Dayton]

Is there a way to set a datakey for the row and grab the datakey for the row that was expanded?

[Steve Dayton]

The solution I worked out was to add the Primary key to a column and set that column to hidden.
onRowDataBound, I performed the operations on the JSON being passed back from the server and entered it into a hidden field that i placed inside a clientTemplate column for each row.

Here's the grid.

<%=

    Html.Telerik().Grid<ClaimItem>()

        .Name("ClaimedItems")

        .DataKeys(datakeys => datakeys.Add(c => c._item.ItemId))

        .Columns(c =>

            {

                c.Bound(o => o._item.ItemId).Hidden(true);

                c.Bound(o => o._item.ItemDesc).Title(ItemDesc).Width(300).Filterable(true);

                c.Bound(o => o._item.BarCode).Title(BarCode).Width(100).Filterable(true);

                c.Bound(o => o._item.Amt).Title("Amount").Width(100).Filterable(true);

                

                c.Bound(o => o._item.ItemId).Title(" ").ClientTemplate("<input type=\"button\" style=\"cursor: pointer;\" value=\"REMOVE\" class=\"trackBtn ui-state-active ui-corner-all button-outer cursor_hand\" onclick=\"RemoveItem(<#= _item.ItemId #>);\">" +

                                                                                 "<input type=\"hidden\" id=\"validationDetail<#= _item.ItemId #>\" style=\"display:none;\"></div>").Filterable(false).Sortable(false);

            })

     .DetailView(details => details.ClientTemplate("<div id='claimValidationDetails<#= _item.ItemId #>' ></div>"))            

        .DataBinding(db => db.Ajax().Select("_AllItems","Item"))

        .ClientEvents(events => events.OnRowDataBound("onRowDataBound")
                                          .OnDetailViewExpand("onDetailViewExpand"))

        .Filterable()

        .Pageable()

        .Sortable()

         

     %>

Here's the JS

<script type="text/javascript">
    function onDetailViewExpand(e) {
        var masterRow = e.masterRow;
        var detailRow = e.detailRow;
        var ItemID = masterRow.cells[1].innerHTML;
        var _html = $("#validationDetail" + ItemID).val();
        $("#claimValidationDetails" + ItemID).html(_html);
    }

        function onRowDataBound(e) {
            var grid = $(this).data('tGrid');
            var row = e.row;
            var dataItem = e.dataItem;
            var _html = "";
             _html = '';// perform calculations, format data

            row.cells[4].innerHTML = '$ ' + dataItem._claimitem.Amt;
            $("#validationDetail" + dataItem._item.ItemId).val(_html);


        }

    </script>

In the onRowDataBound the object passed back from the ajaxBinding is fairly complex and I'm iterating through the JSON to pull out data and perform calculations, that's why a grid within a grid would be overkill.

[scubakiz]

Is there a way to hide the expansion button under certain conditions?   I'm displaying a grid inside a DetailView template and I'd like to hide the expansion button if there are no child records (rather than just displaying an empty grid).  I can calculate this field at the parent (HasChildren or something) if needed.

By hiding the button when empty, it give the user a better indication of when there is actually detail data available. 

Thanks

[Mark]

Did you find any solution on how to hide the expansion button for records that contain no data? 

[Faulenzer]

Hi scubakiz,
 
In order to hide the expansion button under conditions, try to add property on your record (like ChildsCount), and use onRowDataBound to change innerHtml of td that contains expansion link.

@(Html.Telerik().Grid<ParentModele>(Model.Data)
                    .Name("parents-grid")
                    .Columns(columns =>
                    {
                        columns.Bound(x => x.Id)
                            .ClientTemplate("<#= Id #>")
                            .Title("Id");
                    })
                    .DetailView(ssSsdetailView => ssSsdetailView.ClientTemplate(
                            Html.Telerik().Grid<ChildsModele>()
                                .Name("Childs_<#= Id #>")
                                .Columns(columns =>
                                {
                                    columns.Bound(x => x.Id)
                                        .Title("Id");
                                    columns.Bound(x => x.Title)
                                        .Title("Title");
                                })
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("Liste", "Childs", new { idParent = "<#= Id #>" }))
                            .Pageable(settings => settings.PageSize(25).Position(GridPagerPosition.Both))
                            .ToHtmlString()))
                    .Pageable()
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("List", "Parents"))
                    .EnableCustomBinding(true)
                    .ClientEvents(events => events.OnRowDataBound("onRowDataBound")))

            <script type="text/javascript">
                function onRowDataBound(e) {
                    if (!e.dataItem.ChildsCount)
                        e.row.cells[0].innerHTML = '';
                }
            </script>

You just have to set property Childscount of your ParentModele objects.