Trouble with client-side data-binding

15 posts, 0 answers
  1. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 16 Sep 2008 Link to this post

    I'm having a bit of trouble with client-side data-binding. I've looked through the examples and haven't seen where any of them address these problems.

    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).
  2. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 16 Sep 2008 Link to this post

    Oh yeah, a couple of the columns display monetary amounts and have DataFormatString="{0:C2}". The currency symbol displayed when using client-side data-binding is very odd.

    It looks like this:

    ¤14.00
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rosen
    Admin
    Rosen avatar
    3235 posts

    Posted 19 Sep 2008 Link to this post

    Hi Scott,

    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.
  5. Kevin Castle
    Kevin Castle avatar
    18 posts
    Member since:
    Feb 2007

    Posted 01 Dec 2008 Link to this post

    Are you guys making any effort to fix this issue:

    "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.
  6. Kevin Castle
    Kevin Castle avatar
    18 posts
    Member since:
    Feb 2007

    Posted 01 Dec 2008 Link to this post

    "I don't think the NoRecordsTemplate ever works with client-side data-binding."

    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.
  7. Scott
    Scott avatar
    23 posts
    Member since:
    Mar 2008

    Posted 01 Dec 2008 Link to this post

    The "NoRecordsTemplate" appears to be working in Q3 SP1 (I haven't tried it yet). http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q3-2008-sp1-version-number-2008-3-1125.aspx

    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).



  8. Kevin Castle
    Kevin Castle avatar
    18 posts
    Member since:
    Feb 2007

    Posted 01 Dec 2008 Link to this post

    Thank you Scott.
  9. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 01 Dec 2008 Link to this post

    > it mysteriously has 10 empty rows

    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.
  10. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 01 Dec 2008 Link to this post

    For example, if you bind to an empty datasource:
    • 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.
  11. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 02 Dec 2008 Link to this post

    > It looks like it says "0 to 0 of Y". Once you change to a different page it corrects itself. Very odd.

    Ah yes it's coming back to me. In order to fix the aforementioned "0 to 0 of y" I remember having to do:

    1 view.set_virtualItemCount(count);
    2 view.CurrentPageIndex = -1;
    3 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.

  12. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 02 Dec 2008 Link to this post

    One more problem with binding to an empty datasource in your code-behind: if you have <PagerStyle AlwaysVisible="false" />, telerik will fail to render any of the DOM elements necessary for paging and the "totals" count. So any client-side data binding you do will be missing those controls.
  13. Rosen
    Admin
    Rosen avatar
    3235 posts

    Posted 03 Dec 2008 Link to this post

    Hi Crescent,

    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.
  14. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 26 Mar 2009 Link to this post

    Very helpful, everyone.  Thanks!
  15. Gani
    Gani avatar
    3 posts
    Member since:
    May 2009

    Posted 22 May 2009 Link to this post

    Rosen,

    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
  16. Rosen
    Admin
    Rosen avatar
    3235 posts

    Posted 26 May 2009 Link to this post

    Hi 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017