OnDataBound firing before data is loaded

[Edward]

Hi Guys,

If I have a grid running in "full client" mode, I will need to get the current height of the table the grid has outputted as HTML and adjust any containing divs accordingly. 

This is because the grid will typically load its data after the page has loaded, meaning that the tables produced by the grid often spill out beyond their containing elements on the page, which sort of spoils the UI.

To fix this, I created an OnDataBound JS function and attached it to my grid's OnDataBound event. This is how my function looks:

function onDataBound() {
    var gridHeight = $('#Grid').height();
    if ($('#containingDiv').height() < gridHeight) {
        $('#containingDiv').height(gridHeight + 60);
    }
}

The only problem is that the OnDataBound event appears to be firing before any data has actually been loaded in using it's AJAX call. This basically means that my $('#Grid').height() is 0.

Should the event be firing at this time - or am I doing something wrong? Any ideas would be much appreciated. Have tested in IE9 and Chrome.

[Atanas Korchev]

Hi Edward,

 Could it be that you have subscribed to the OnDataBinding event instead of OnDataBound?

Kind regards,
Atanas Korchev
the Telerik team

[Edward]

Hi Atanas,

Thanks very much for your prompt reply - I'm definitely attaching to the correct event:

.ClientEvents(events => events.OnDataBound("onDataBound"))

[Atanas Korchev]

Hello Edward,

 I will need a sample code then as the OnDataBound event should definitely be raised when the grid is bound. You can check our online example here.

Greetings,
Atanas Korchev
the Telerik team

[Edward]

Hi, Below is my code:

View - This is a partial view, and the Html Elements specifically referenced are created by other partial views:

@model SomeModel

@(Html.Telerik().Grid<ItemDTO>()
     .Name("Grid")
     .Columns(columns =>
     {
         columns.Bound(o => o.ItemId).Title("Actions").Width(80).ClientTemplate("<a class='button' alt='<#=ItemId#>' href='javascript:claimDamagedItems.editItem(<#=ItemId#>)'> <img src='" + Links.Content.Assets.images.icons.fugue.pencil_png + "' alt='edit' /> </a> <a class='button' alt='<#=ItemId#>' href='javascript:claimDamagedItems.deleteItem(<#=ItemId#>)'> <img src='" + Links.Content.Assets.images.icons.fugue.cross_circle_png + "' alt='delete' /> </a>");
         columns.Bound(o => o.ItemText).Title("Item");
         columns.Bound(o => o.ItemTypeText).Title("Type");
         columns.Bound(o => o.ItemQuantityOrArea).Title("Size/Qty").ClientTemplate("<#= formatter('{0:N}m²', ItemQuantityOrArea) #>");
         columns.Bound(o => o.ItemTotal).Title("Total");
     })
     .NoRecordsTemplate("No Items Found...")
     .DataBinding(dataBinding => dataBinding.Ajax().Select(MVC.ClaimCosts.BuildingItemsCallBack(@Model.ClaimId).GetRouteValueDictionary()))
     .EnableCustomBinding(true)
         .ClientEvents(events => events.OnDataBound("buildingItems_onDataBound"))
)

<script type="text/javascript">
    function buildingItems_onDataBound() {
        var gridHeight = $('#Grid').height();
        if ($('#sub-tab-building-items').height() < gridHeight) {
            $('#sub-tab-building-items').height(gridHeight + 60);
        }
    }
</script>

I can also post the controller call back if its needed.

Thanks

[Atanas Korchev]

Hello Edward,

 I am afraid this code snippet is not sufficient. What is "sub-tab-building-items" for example? We cannot help unless we reproduce the problem locally.

Regards,
Atanas Korchev
the Telerik team

[Lee]

I too am having this same problem. I can post the code if you'd like

This is the code for the Popup Window.

@{ Html.Telerik().Grid<HubPlastics.Web.Areas.Admin.Models.SubCategoryViewModel>()
    .Name("CategorySubCategories")
    .ToolBar(commands =>
    {
        commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left: 0" });
    })
    .DataKeys(dataKeys =>
    {
        dataKeys.Add(m => m.CategoryId);
        dataKeys.Add(m => m.SubCategoryId).RouteKey("subcategoryId");
    })
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("_SelectSubCategory", "Category", new { id = Model.CategoryId })
        .Insert("_InsertSubCategory", "Category", new { id = Model.CategoryId })
        .Update("_UpdateSubCategory", "Category")
        .Delete("_DeleteSubCategory", "Category")
    )
    .Columns(columns =>
    {
        columns.Template(o => o.SubCategoryId).ClientTemplate("<span class='t-subcategory'><#= Description #></span>").Title("Subcategory");
        columns.Bound(o => o.Deleted).Width(120).ClientTemplate("<input type='checkbox' name='Deleted' <#= Deleted ? checked='checked' : '' #> disabled='disabled'  />");
        columns.Command(commands =>
        {
            commands.Edit().ButtonType(GridButtonType.ImageAndText);
            commands.Delete().ButtonType(GridButtonType.ImageAndText);
        }).Width(200).Title("Commands");
    })
    .ClientEvents(events => events.OnDataBound("resizeWindow"))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .Pageable(paging => paging.PageSize(25))
    .Sortable()
    .Footer(false)
    .Render();
}

It is loading inside of a Telerik Window:

@{ Html.Telerik().Window()
        .Name("Window")
        .Title("Update SubCategories")
        .Buttons(b => b.Close())
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Resizable()
        .Height(300)
        .Render();
}

Which is triggers this javascript:

<script type="text/javascript">

    function resizeWindow(e)
    {
        var window = $('#Window').data('tWindow');
        $(window.element).find(".t-window-content").css("height", "auto").css("width", "auto");
    }

</script>

But when the databound event is triggered, no data has been loaded into the control and so the height becomes incorrectly set .

Any suggestions?

[Travis]

Yep, have the same problem. 

.ClientEvents(events => events.OnDataBound("onDataBound"))

<script type="text/javascript">
    function onDataBound(e) {
        alert("I am loaded before I see any data on the page!");
    }
</script>

A sample project is attached.  The alert appears before the grid is rendered.  Is there any even to call that will make the alert appear after the grid is rendered? 

[Lee]

Surprisingly, I fixed this problem by introducing a 200ms delay with a setTimeout function. I'm thinking the problem here is that the OnDataBound *is* in fact firing right when it has finished binding the data, but it takes another second or so to render the grid and update the DOM. In the future, they might consider creating an "OnRendered" event, though how they would be able to detect that the grid has finished rendering is beyond me at this time of the night.

Hope this helps someone else in the same problem.

[Rosen]

Hello Travis,

 Unfortunately I'm not able to observe such behavior in the application you have send us. Please take a look at the screenshot attached, maybe I'm missing something obvious.

Regards,
Rosen
the Telerik team

[Travis]

The setTimeout worked.  Thanks Lee!  I noticed that the problem does not occur in Firefox, but does for me in IE8.  Perhaps Firefox just renders things faster.  Also, when I do a print screen the page seems to render before I capture it so I can't prove I'm right!  :)

It would seem that the OnDataBound event is firing correctly, but the page is still rendering and updating the dom while the OnDataBound event is called almost like it was asynchronous.

[Randy]

I have the same problem.  The real problem here isn't that the OnDataBound event doesn't work, it's that its the wrong type of event for what we want to do.  We want to execute JavaScript against the rendered elements AFTER the data grid has rendered.  You might say well, then execute JavaScript after the page loads, but that won't work because the Grid is making a separate AJAX call for the loading of its data (separate from the page load), therefore the items don't get rendered until the AJAX call is complete.  Having a timeout is a bubble-gum and bailing wire solution and a hack. not a proper solution.  Telerik, please tell us that you have an event that we can use for after the grid has rendered its items.

[Lee]

Oh no, don't get me wrong, I know that the way I'm solving this problem is a hack... and as a paying customer of the product, I would hope that telerik is looking at resolving this, so far they're still saying that there isn't a problem.

[Randy]

Well it looks like the OnDataBound() is working... strange.  I opened a ticket with Telerik and the response I got was:
------------------------------

Hi Randy,

 You need to use the OnDataBound event (not to be mistaken with OnDataBinding):

function onDataBound(e) {
  $(this).find(".t-grid-delete,.t-grid-edit, .t-grid-add").hide()
}

Regards,
Atanas Korchev
the Telerik team 
--------------------------------

So I did exactly as he instructed and it works (go figure).  My Add, Edit and Delete buttons are now hidden after the grid renders.  See if that helps you.  Thanks.