This is a migrated thread and some comments may be shown as answers.

Grid client databinding (data loading indicator?)

1 Answer 80 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
loi
Top achievements
Rank 1
loi asked on 18 Nov 2011, 06:30 AM
I'm just wondering if there is built-in option in the Grid to show some kind of indicator while the grid is loading data on the client side..
Most of our MVC grids are loading data via ajax databinding.. and sometimes it can take a while to before the data is loaded.. We need some sort of indicator to tell users that a grid is loading data.

So far, our work-around was to use this jquery plugin below in the OnDataBinding and OnDataBound grid client events
http://code.google.com/p/jquery-loadmask/

@(Html.Telerik().Grid(Model)
    .Name("TestingGrid")
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetSomeData", "Test", new { categoryID = ViewBag.CategoryID}).OperationMode(GridOperationMode.Client))   
    .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
    .Footer(false)
    .Columns(columns =>
    {
        columns.Bound(o => o.Selected)
            .Title(" ")
            .Width(150)
            .Sortable(false);       
        columns.Bound(o => o.Text)
            .Title("Text");
        columns.Bound(o => o.Value)
            .Title("Name");
    })
    .ClientEvents(events => events
            .OnDataBinding("onGridDataBinding")
            .OnDataBound("onGridDataBound"))
)
 
<
script type="text/javascript">
 
    function onGridDataBinding(e)
    {
        $(this).mask('Loading');
    }
    function onGridDataBound(e)
    {
         $(this).unmask();
    }
 
</script>

Is there a built-in support for this that I missed?

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Nov 2011, 05:19 PM
Hello Misterii0,

The Grid natively provides a loading indicator inside its pager row. You can see it in action here:

http://demos.telerik.com/aspnet-mvc/grid/externalservicetwitter

If this is not visible enough for your users, you can implement a custom loading panel, and show and position it manually. Show it in the Grid's OnDataBinding event and hide it in the OnDataBound event.

http://demos.telerik.com/aspnet-mvc/grid/clientsideevents

Regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
Grid
Asked by
loi
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or