[Solved] Changing wording "No records to display."

[Tawit]

How can I changing wording "No records to display."?

When loading, I want to show "Loading data..."
When loaded and no record, I want to show "No records to display."

[Petur Subev]

Hello Tawit,

Generally speaking to achieve the behavior you described you will need to:

• set the NoRecordsTemplate to show "Loading ..."
• create a JavaScript function subscribed to the OnDataBound event, which checks if the "no records" row is still present (i.e. Grid has no data) and if so, changes the message to display "No records to display"

Here is a code snippet showing how to do this. Note that if you are using server binding, OnLoad should be used instead of OnDataBound.

@(Html.Telerik().Grid(Model)
    // omitted for brevity
    .NoRecordsTemplate("Loading...")
    .ClientEvents(events => events.OnDataBound("restoreNoRecordsText"))
)

<script type="text/javascript">
    function restoreNoRecordsText() {
  $("tr.t-no-data td").html("No records to display");
    }
</script>

I hope this helps.


Greetings,
Pesho
the Telerik team

[Jacob]

Is there a way to put this as a grid extension so I do not have to write these lines of code for each grid we implement?

[Jacob]

Answered.

Adding the first part of this code in the Grid constructor of your Telerik Extensions file allows you to edit the template for all grids. 

Then in an event listener that we were already were using, I added the remaining js code.


Note: the javascript function above will not work if you have more than 1 grid on a page.  The $('...') will grab all of the elements on the page and you may see that when the first response comes in, all grids are updated with "No records to display".  To be more specific, you can use "e.target" as the grid and then do a grid.find('...') for this function.

[Renee]

Tawit's question brings up the larger mystery of why Telerik's grid doesn't simply support this out of the box.  For long running queries to populate a grid (as happens in our software) this has been an extreme pain-point for our users and a question we get more often than you might imagine.  It's a superior user experience to implement it the way Tawit explains.  Has there been an issue logged against this and/or a plan to fix it?  It's such a minor change for Telerik to make, and yet reaps significant a usability improvement.  Why make each of your clients have to code a work around?

[Atanas Korchev]

Hi Renee,

 Those are two different features. The no-records-template is display only when the grid is empty. There is currently no message displayed when the grid is loading data - only the refresh button icon changes.

Regards,
Atanas Korchev
the Telerik team

[Tawit]

Hi, Jacob,

    Do you have the sample for me?

Thank you,
Tawit.

[Jacob]

Hi Atanas,
Unless what you are talking about is a recently added feature (we have not upgraded yet), then I believe there may be a misunderstanding.  

This is what currently happens:
1. Grid renders on a page (BEFORE ajax call is made), and there is a message that says "No records to display." (Technically there is not data, but this is confusing to the user)
2. Then the ajax call is made
3. If data is returned, it shows, else the original "No records to display." message appears again. 

Step #1 is the problem, because it can be confusing to the user to see that message for a bit before the call to the server has even been made. This situation is not always seen because most web pages can make the ajax calls pretty quickly.  However, on my page the ajax call is made a couple of seconds after the page renders because I have so many other things happening before the ajax call can be made.

What happens now: 
The message in step #1 now says "Please Wait..." and the rest is the same.

[Jacob]

Tawit, I'm not sure what you need, but I can try to help.

You need a Telerik extensions file, and you can put this code in there. (I cannot help you with extending Telerik).

public static GridBuilder<T> Grid<T>(this WidgetHelper widgetHelper, IEnumerable<T> dataSource) where T : class

{

    var additions;

 

    //Prevent Telerik from showing "No records to display" by default before AJAX call is made

    additions.NoRecordsTemplate("Please Wait...");
      additions.ClientEvents(events => events.OnDataBound("restoreNoRecordsText"));


 

    return additions;

}

Then for the javascript part you'll need an event handler like this which requires jQuery.

onDataBound : function (e) {
     if (init()) {
          var $grid =$(e.target);

         // In case there were no records found, add this message in place of "Please Wait..."
         $grid.find("tr.t-no-data td").html("No records to display");
     }
};

[Tawit]

Thank you all.

[Leonid]

i am unable to make it work. does ti require .Net 4.0 (We have 3.5)?