Telerik MVC grid-How to Change "no record message" between ajax cals

Question

I am using Telerik MVC grid ajax binding to show some records. While the grid is loaded,the message in grid is "No records found". When ajax cal is complete,then the message goes and data is loaded. But this message of "No records found" till data is loaded is confusing to the user.

Can anyone tell me how to change this message as "Loading..." till the ajax cal is complete.

Thanks.

Answer 1

Instead of using the NoRecordsTemplate, I suggest the following:

1. Add a clientevent to your grid: .ClientEvents(events => events.OnLoad("Grid_onLoad"))
2. Add a javascript function: function Grid_onLoad(e) { $('.t-no-data td').text('Loading'); }

That way if there are no records, the grid will still display the "No Records Found", but the user will see a "Loading" message during the ajax call.

Answer 2

IMO, adding ".NoRecordsTemplate("Loading...")" to grid is better approach.

            @(Html.Telerik().Grid<RatingListItem>()
            .Name("Rating_Index_List")
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Hidden();
                columns.Bound(o => o.Score)
            })
            .DataBinding(dataBinding => dataBinding.Ajax().Select(Model.ListPageGridModel.DataRequestAction.ActionName, Model.ListPageGridModel.DataRequestAction.ControllerName))
            .Pageable(settings => settings.Total(Model.ListPageGridModel.TotalRow))
            .EnableCustomBinding(true)
            .Sortable()
            .NoRecordsTemplate("Loading...")
            )

Answer 3

Do a search for the t-no-data class in your grid. Something like

$('#ReportGrid').find('.t-no-data td').text('Loading...');

should go in your grid's onLoad()

Answer 4

You can use .NoRecordsTemplate for loading time with OnDataBound Event to specify when no records.

  @Html.Telerik().Grid<ViewModel>().Name("Temp")
  .NoRecordsTemplate("Loading ... Please Wait")
  .ClientEvents(e => e.OnDataBound("onDataBound"))

Script Code

function onDataBound() {
    $("tr.t-no-data td").html("No records to display");
}