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

[Solved] t-no-data - how to customize no data row text?

15 Answers 234 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.

15 Answers, 1 is accepted

answered on 27 Jul 2010, 10:49 AM

Hello Jihae,

While there is no way to set the text through the server-side or client-side API, you can set it in the following way:

Create a function that sets the empty text,

function showNoDataText(e) {

$('#Grid').find('.t-no-data td')

.html('<div style="text-align:center;font-style:italic">No records to display</div>');

}
Attach the function to the events that you need:
1. OnDocumentReady
  
  <% Html.Telerik().ScriptRegistrar()
  
            .OnDocumentReady(() => {%>
  
              showNoDataText();
  
            <%}); %>
2. If you are using ajax binding, the OnDataBound client-side event
  
  .ClientEvents(config => config.OnDataBound("showNoDataText"))

We consider adding an easier way to do all of this (through the server-side API).
All the best,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 29 Jul 2010, 06:48 PM

Thanks, I am a bit of a novice when it comes to Telerik. I have the view with this in it:
                <%=
            Html.Telerik().Grid(Model)
                .Name("Devices")
                .DataKeys(dataKeys => dataKeys.Add(p => p.ID))
                .DataBinding(dataBinding=> dataBinding.Ajax().Select("AjaxBinding", "Device"))
                .Columns(columns =>
                             {
                                 columns.Bound(f => f.ID).Format("<a href='#'id='{0}' class='lnkDelete'>" + Resources.Resource.Device_Grid_Delete + "</a>")
                                     .Encoded(false).Title(" ");
                                 columns.Bound(f => f.Name).Title(Resources.Resource.Device_Grid_Name);
                                 columns.Bound(f => f.DeviceType).Title(Resources.Resource.Device_Grid_Type);
                                 columns.Bound(f => f.DisplayLastReport).Title(Resources.Resource.Device_Grid_Date);
                                 columns.Bound(f => f.Status).Title(Resources.Resource.Device_Grid_Status);
                                 columns.Bound(f => f.ID).Format("<a href='/Device/Index?device={0}'>" + Resources.Resource.Device_Grid_Locate + "</a>")
                                     .Encoded(false).Title(Resources.Resource.Device_Grid_Locate);
                            })
               .Pageable()
               .Sortable()
               .HtmlAttributes(new { @class = "content_table" })
                %>

                <a href="#" class="lnkNew"><%= Resources.Resource.Device_Grid_New %></a>
    </div>

I did add the javascript function and can see it in asset.axd, I can get to my the empty row using:
$('#Devices').find('.t-no-data td')
      .html('No devices available') I could confirm this by running this in the console part of Firebug.

I have no idea where to add the other parts? Any help?

answered on 30 Jul 2010, 08:42 AM

Hello Jack,

Use the following Grid declaration:
<%=
            Html.Telerik().Grid(Model)
                .Name("Devices")
                .DataKeys(dataKeys => dataKeys.Add(p => p.ID))
                .DataBinding(dataBinding=> dataBinding.Ajax().Select("AjaxBinding", "Device"))
                .Columns(columns =>
                             {
                                 columns.Bound(f => f.ID).Format("<a href='#'id='{0}' class='lnkDelete'>" + Resources.Resource.Device_Grid_Delete + "</a>")
                                     .Encoded(false).Title(" ");
                                 columns.Bound(f => f.Name).Title(Resources.Resource.Device_Grid_Name);
                                 columns.Bound(f => f.DeviceType).Title(Resources.Resource.Device_Grid_Type);
                                 columns.Bound(f => f.DisplayLastReport).Title(Resources.Resource.Device_Grid_Date);
                                 columns.Bound(f => f.Status).Title(Resources.Resource.Device_Grid_Status);
                                 columns.Bound(f => f.ID).Format("<a href='/Device/Index?device={0}'>" + Resources.Resource.Device_Grid_Locate + "</a>")
                                     .Encoded(false).Title(Resources.Resource.Device_Grid_Locate);
                            })
           .ClientEvents(config => config.OnDataBound("showNoDataText"))
               .Pageable()
               .Sortable()
               .HtmlAttributes(new { @class = "content_table" })
                %>

<% Html.Telerik().ScriptRegistrar()
          .OnDocumentReady(() => {%>
            showNoDataText();
          <%}); %>

Best wishes,
Alex Gyoshev
the Telerik team

answered on 30 Jul 2010, 02:06 PM

Thanks for this, I added your grid deceleration but it still does not show the "no data" text. I go into Firefox, Firebug and run the following command: showNoDataText() and the "no data" text appears. This means that the function is in my .js file and I can execute it. This is not written to the client while it is rendered, am I correct? What part of the grid tells it to write the showNoDataText only when the result set count is zero? I viewed the source of the page looking for showNoDataText and could not find it.I also looked in the asset.axd files and could just find it once where it was included as the function.

Can you give me any advice to debug this? Is there a good example of where this was done before?

Thank you
Jacj

answered on 30 Jul 2010, 03:52 PM

gridnodatatext.zip

Hello Jack,

> What part of the grid tells it to write the showNoDataText only when the result set count is zero?
The grid adds the t-no-data class when there are no data rows.
> This is not written to the client while it is rendered, am I correct?
Adding the lines in green from my previous response should render the function call on two places, namely:

.ClientEvents(config => config.OnDataBound("showNoDataText")) should render the showNoDataText in the grid initialization code, like this:
```
jQuery('#Grid').tGrid({ /*....*/ onDataBound:showNoDataText /* .... */ }); 
```
<% Html.Telerik().ScriptRegistrar()
          .OnDocumentReady(() => {%>
            showNoDataText();
          <%}); %>
should render as
```
jQuery(document).ready(function(){
    /* ... */
    showNoDataText();
    /* .... */
});
```

Both snippets should be at the end of the page, where the ScriptRegistrar is rendered.

> Can you give me any advice to debug this? Is there a good example of where this was done before?
Confirm that the two snippets are rendered on the page. I'm attaching the sample project that I used for testing.
Best wishes,
Alex Gyoshev
the Telerik team

answered on 03 Aug 2010, 02:13 AM

Ok, I am nearly there. I am using master pages and added this to my masterpage:
<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
                                    group.Add("~/Scripts/jquery-ui-1.8.custom.min.js")
                                     .Add("~/Scripts/jquery.simplemodal-1.3.4.min.js")
                                     .Add("~/Scripts/jquery.hoverIntent.js")
                                     .Add("~/Scripts/json2.js")
                                     .Add("~/Scripts/portal.js")
                                     .Add("~/Scripts/jquery.form.js")
                                     .Add("~/Scripts/jquery.imgpreload.js")
                                .Combined(true)
                                .CacheDurationInDays(365)
                                .Compress(true)
            )
%>
<% Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(() => {%>
          showNoDataText();
        <%}); %>
but still cannot get the function call to load an document ready? I looked in the .axd files and could not fine and instance of showNoDataText() If I call that function from the console in Firebug it renders the "no data" text. What am I missing?

Thanks for the help!! Telerik is great.

answered on 12 Aug 2010, 11:18 AM

Hi,

I have a similar problem, with the no data label appearing for a second and then disappearing. If I use your sample application it works fine, but then if I modify your sample application to work in an ajax bound way, the no data label disappears.

All I changed to your app was the following:

The Grid definition is now this:

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

.Name("Grid")

.Columns(columns =>

{

columns.Add(c => c.CustomerID).Width(100);

columns.Add(c => c.CompanyName);

columns.Add(c => c.ContactName).Width(180);

columns.Add(c => c.Phone).Width(280);

})

.ClientEvents(config => config.OnDataBound("showNoDataText"))

.Scrollable(scrollOptions => scrollOptions.Height(500))

.DataBinding(d => d.Ajax()

.Select("GetData","Home"))

.Render();%>

and the HomeController now contains this:

[GridAction]

public ActionResult GetData()

{

return View(new GridModel(Enumerable.Empty<Customer>()));

}