Center a NoRecordsTemplate?

[Xorcist]

Is there any easy way to center (both horizontally and vertically) a NoRecordsTemplate within the body of the RadGrid when using:

<ClientSettings EnableRowHoverStyle="true">
  <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
  <Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>

on a RadGrid that has a height of 100%?

[Shinu]

Hi,

Try the following CSS.
CSS:

.rgNoRecords td
{
      text-align:center !important;
}

Thanks,
Shinu

[Xorcist]

That will only get me horizontal. I'm using:

<ClientSettings EnableRowHoverStyle="true">
  <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
  <Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>

and a grid height of 100% because I want my grid to size to the window (and that works perfectly). But I want to try and center my "No Records Found" message BOTH horizontally and vertically so it shows in the very center of the grid body.

Edit: If I change the parent table to have a height of 100% (Tested in FireFox w/ FireBug) I get the results I want, but I only want to do this when the no records template is shown... any ideas on how to achieve this?

[Eyup]

Hello John,

You can try the following approach:

function pageLoad() {
    var masterEl = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element();
    var noItemsEl = $(masterEl).find(".rgNoRecords")[0];
    if (noItemsEl) {
        masterEl.style.height = "95%";
        $(masterEl).find(".rgNoRecords").children()[0].style.textAlign = "center";
    }
}

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
the Telerik team

[Xorcist]

That looks like it works, thanks.