If you add a GridBoundColumn with Display="false" (static declaration in aspx) while using client-side data-binding things can get weird.
First off, since the grid is not populated on the server, when it originally displays on the page it mysteriously has 10 empty rows. Once the client-side data-binding occurs the 10 empty rows disappear and the correct rows appear.
Kinda.
If there are less than 10 rows of data obtained during client-side data-binding then everything is great. The invisible GridBoundColumn is invisible. Perfect. However, if there are more than 10 rows then the "invisible" column suddenly becomes visible. If the "invsible" column is the first column, than all subsequent columns are displayed under the incorrect header. I've moved the "invisible" column to the end (last column) and set its width to 0px, but it still appears.
Furthermore, if I set AllowMultiRowSelection="true" and add a GridClientSelectColumn, the selection checkbox for each row does not appear. The checkbox in the header is there, but not the one on each row. Even though there are only 2 rows displayed in the grid, if I check the box in the header to select all rows the "grid.get_masterTableView().get_selectedItems().length" property shows 10 rows selected.
I tried to get rid of these mysterious 10 empty rows by data-binding the grid to an empty list on the server in the initial page load. That works, except that the "NoRecordsTemplate" is now displayed on initial page load and is not removed when client-side data-binding occurs. Now that I think about it, I don't think the NoRecordsTemplate ever works with client-side data-binding.
I realize that client-side data-binding will have it's limitations. I don't know how much (if any) of the above items telerik might be willing and able to fix.
Here's what I'm trying to accomplish, maybe there is another way:
1. Store the row id on the client (via client-side data-binding) and be able to retrieve that id using javascript. The id should not be visible to the user (it's a Guid).
2. Use the GridClientSelectColumn with client-side data-binding.
3. Show a message when no rows exist (NoRecordsTemplate).
16 Answers, 1 is accepted
Rank 1
It looks like this:
ยค14.00
Indeed there is an issue with populating ClientDataKeyValues when the column does not exists and RadGrid is with client-side data binding. However our developers has already addressed it. Therefore the fix will be available in the next service pack of this year's Q2 release of RadControls For ASP.NET AJAX suite.
As to the GridClientSelectColumn. I'm afraid that the scenario in which the rows are more then initial PageSize is currently not supported.
Regards,
Rosen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
"First off, since the grid is not populated on the server, when it originally displays on the page it mysteriously has 10 empty rows. Once the client-side data-binding occurs the 10 empty rows disappear and the correct rows appear."
Im having the same problem and am wondering if there is only a work around to get this to work.
Please let us know.
Rank 1
You never answered Scott R. Does this work with Client Side data-binding?
Also, is this a bug or an limitation which was not documented but yet released to your users as if it worked.
Rank 1
The mysterious 10 empty rows can be fixed by binding your grid to an empty data set on the server (this works as of the Q3 release).
Rank 1
Rank 1
Those rows are VERY important for the client-side code to bind new data to the grid properly. Do NOT bind to an empty datasource in the code-behind. That may save you some bytes but will cause you headaches in the client.
For example, if you bind to an empty datasource:
- the "totals" count is forever screwed (always says items "0 to x of y").
- because set_virtualItemCount(n) internally calls set_currentPageIndex(0), your grid will fire an extraneous "page" command, which depending on whether you are fetching data on such a command, may send your grid rebinding again.
- because the first call to dataBind() must create new table rows for the data (as they were excluded by the empty datasource binding), depending on the size of your data IE6 will freeze completely (100 rows ought to lock it up for a solid minute).
- If you use GridClientSelectColumn NONE of your new rows will have their checkboxes
- The GridClientSelectColumn header checkbox will render "checked" for some reason.
The reason for the first 4 is that Telerik has taken the approach of re-using the existing DOM rows to rebind new data to. The pros of doing this are (presumably): they don't need to re-create any controls that the server created (like the checkbox in GridClientSelectColumns) and speed.
Just a word of warning.
> The "NoRecordsTemplate" appears to be working in Q3 SP1
Yes, it appears they hide/show that first row (the row that the NoRecords message got rendered to) on dataBind() depending on if there are records or not. Simple hack. I personally want to be able to change that message dynamically (for example depending on what the user filtered on), but alas, no "set_noRecordsMessage()" method exists in the client.
Rank 1
- the "totals" count is forever screwed (always says items "0 to x of y").
It looks like it says "0 to 0 of Y". Once you change to a different page it corrects itself. Very odd.
- because set_virtualItemCount(n) internally calls set_currentPageIndex(0), your grid will fire an extraneous "page" command, which depending on whether you are fetching data on such a command, may send your grid rebinding again.
I set a breakpoint in the grid "command" event and didn't see where "set_virtualItemCount(n)" caused any command event to fire.
- because the first call to dataBind() must create new table rows for the data (as they were excluded by the empty datasource binding), depending on the size of your data IE6 will freeze completely (100 rows ought to lock it up for a solid minute).
My personal opinion is that anyone using IE6 gets what they deserve. I realize that doesn't resolve the issue for applications that *must* support IE6. IE7 also has real performance issues when it comes to heavyweight javascript sites. Again, for my application I don't mind telling customers to use a different browser if they want better performance (we support IE7, it's just slow), but I realize that may not work for everyone.
Rank 1
Ah yes it's coming back to me. In order to fix the aforementioned "0 to 0 of y" I remember having to do:
| view.set_virtualItemCount(count); | |
| view.CurrentPageIndex = -1; | |
| view.set_currentPageIndex(pageIndex, true); |
The problem with the "Page" command firing arose because in the code-behind Page_Load() I was telling the grid what the CurrentPageIndex was (which was grabbed from a cookie). That, combined with the internal call to set_currentPageIndex(0) that line 1 above does, caused ANOTHER client-side "Page" command to fire and fetch the data twice.
I ended up having to add "view.CurrentPageIndex = 0;" before calling set_virtualItemCount() in order for the internal call to set_currentPageIndex(0) to be ignored and not fire the "Page" command. The third line passes the undocumented second parameter "true" to set_currentPageIndex(), to avoid firing the command but to render the page numbers correctly. And it took me about a day to figure out those two hacks.
Rank 1
In order to initially hide the empty rows you can simple hook to server-side ItemCreated event and set the GridDataItems' display to false. Similar to the following:
| protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridDataItem) |
| { |
| e.Item.Display = false; |
| } |
| } |
All the best,
Rosen
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Rank 1
Thx your work around helped me to get rid off empty rows.
However the Pager element still shows 11 items on 2 pages even though the Grid is empty. How I can fix it ?
Thx
Gani
In order to correctly instantiate Grid client-side you should databind it. Therefore if you want to show no data you should still binding it but to an empty dataset. Similar to the following:
| <script type="text/javascript"> |
| function pageLoad() { |
| var table = $find("<%=RadGrid1.ClientID %>").get_masterTableView(); |
| table.set_dataSource({}); |
| table.set_virtualItemCount(1); |
| table.dataBind(); |
| } |
| </script> |
Kind regards,
Rosen
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
when i binding a Radgrid using following
function pageLoad() {
var table = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
table.set_dataSource({});
table.set_virtualItemCount(1);
table.dataBind();
}
then i can't get the radgrid values on server side ..How to get the values??
Rank 1
<telerik:RadGrid Width="80%" Skin="Metro" runat="server" ID="RadGrid2" AutoGenerateColumns="False" AllowMultiRowSelection="True" >
<MasterTableView ClientDataKeyNames="INVNUMBR" DataKeyNames="INVNUMBR">
<Columns>
<telerik:GridTemplateColumn HeaderText="Select" UniqueName="check">
<ItemTemplate>
<asp:CheckBox runat="server" ID="NSC_Certify" onclick="checkboxClicked1(this)" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="INVNUMBR" HeaderText="Invoice No." UniqueName="INVNUMBR" ItemStyle-Width="150px"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="INVCDATE" HeaderText="Invoice Date" UniqueName="INVCDATE" ItemStyle-Width="150px"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="WRKORDNO" HeaderText="WO No" UniqueName="WRKORDNO" ItemStyle-Width="150px"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="NETTAMNT" HeaderText="Net Amount" UniqueName="NETTAMNT" ItemStyle-Width="150px"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="BALAMONT" HeaderText="Bal. Amt" UniqueName="BALAMONT" ItemStyle-Width="150px"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Paid Amt" UniqueName="Paidamt" ItemStyle-Width="100px" HeaderStyle-Width="100px">
<ItemTemplate>
<telerik:RadNumericTextBox ID="txt_paid" Enabled="false" runat="server" MinValue="0" Width="100px" AutoCompleteType="Disabled"
MaxLength="8" >
<ClientEvents onblur="PaidAmntValueChanged" />
<NumberFormat DecimalDigits="2" GroupSeparator="" AllowRounding="true" />
<EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
<IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
</telerik:RadNumericTextBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="" UniqueName="Paidamt1" ItemStyle-Width="100px" HeaderStyle-Width="0px">
<ItemTemplate>
<telerik:RadNumericTextBox ID="txt_paid1" Enabled="false" runat="server" MinValue="0" Width="0px" AutoCompleteType="Disabled"
MaxLength="8" >
<NumberFormat DecimalDigits="2" GroupSeparator="" AllowRounding="true" />
<EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
<IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
</telerik:RadNumericTextBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="OS Amount" UniqueName="OSAmnt">
<ItemTemplate>
<telerik:RadNumericTextBox ID="txt_OS" Enabled="false" runat="server" MinValue="0" Width="100px" AutoCompleteType="Disabled"
MaxLength="8" >
<NumberFormat DecimalDigits="2" GroupSeparator="" AllowRounding="true" />
<EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
<IncrementSettings InterceptMouseWheel="false" InterceptArrowKeys="false" />
</telerik:RadNumericTextBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="INVPREFNO" HeaderText="INVPREFNO" UniqueName="INVPREFNO" Visible="false"></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowMouseOver="RowMouseOver" OnRowDataBound="RowDataBound" />
<Scrolling AllowScroll="true" />
</ClientSettings>
</telerik:RadGrid>
function OnbuttonClient() {
var grid = $find("<%=RadGrid2.ClientID %>");
mtv = grid.get_masterTableView();
mtv.set_dataSource(opt);
mtv.dataBind();
}
This is my coding...Please give a suggestion to fix it...