Rebind RadListView with ClientDataSource

12 posts, 0 answers
  1. Macedo
    Macedo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 09 Sep 2014 Link to this post

    Hello I am trying to rebind a RadListView after a button click handled client side

    this is my datasource:
    <telerik:RadClientDataSource ID="rcdsStagingKofax" runat="server" AllowBatchOperations="true"><br>        <ClientEvents OnDataParse="Parse" /><br>        <DataSource><br>            <WebServiceDataSourceSettings BaseUrl="Webservice/KofaxService.svc/" ><br>                <Select Url="GetStagingDocs" DataType="JSON" /><br>            </WebServiceDataSourceSettings><br>        </DataSource><br>        <Schema><br>            <Model ID="DocumentId"><br>                <telerik:ClientDataSourceModelField FieldName="DocumentId" DataType="Number" /><br>                <telerik:ClientDataSourceModelField FieldName="NotifiedCompany" DataType="String" /><br>                <telerik:ClientDataSourceModelField FieldName="Origin" DataType="String" /><br>                <telerik:ClientDataSourceModelField FieldName="NotificationType" DataType="String" /><br>                <telerik:ClientDataSourceModelField FieldName="VatNumber" DataType="String" /><br>                <telerik:ClientDataSourceModelField FieldName="DocumentNumber" DataType="Number" /><br>                <telerik:ClientDataSourceModelField FieldName="DocumentValue" DataType="Number" /><br>                <telerik:ClientDataSourceModelField FieldName="ReceptionDate" DataType="Date" /><br>                <telerik:ClientDataSourceModelField FieldName="AnalysisStatus" DataType="Boolean" /><br>            </Model><br>        </Schema><br>    </telerik:RadClientDataSource>

    and this is my radlistview
    <telerik:RadListView ID="lvStagingKofax" runat="server" ClientDataSourceID="rcdsStagingKofax"<br>                    ItemPlaceholderID="ItemPlaceHolder" AllowPaging="true" PageSize="10"><br>                    <LayoutTemplate><br>                        <div style="width: 98%"><br>                            <ul class="padding-top" id="itemPlaceholder" runat="server"><br>                            </ul><br>                        </div><br>                    </LayoutTemplate><br>                    <ClientSettings><br>                        <DataBinding><br>                            <ItemTemplate><br>                                    <li class="selectItem" data-DocumentId="#= DocumentId #"><br>                                        <div class="ym-grid box-shadow"><br>                                          <h6><br>                                          #= SupplierName # </h6><br>                                            <div class="xpts ym-grid"><br>                                            <div class="ym-g40 ym-gl"><br>                                                <div class="ym-gbox"><br>                                                    <div class="ym-g25  ym-gl"><br>                                                        <img class="fr" src="../../Shared/image/64x64/Document-icon.png" /><br>                                                    </div><br>                                                    <div class="ym-g75 ym-gl"><br>                                                      <p><b>Document Number: </b><br>                                                         #= DocumentNumber #</p><br>                                                     <p><b>Process Number: </b><br>                                                      #= ProcessNumber #</p><br>                                                      <p><b>Type: </b><br>                                                     #= NotificationType #</p><br>                                                       <p><b>Origin: </b><br>                                                       #= Origin #</p><br>                                                 </div><br>                                                </div><br>                                            </div><br>                                            <div class="ym-g40 ym-gl"><br>                                              <div class="ym-gbox"><br>                                                    <div class="ym-g25 ym-gl"><br>                                                      <img class="fr" src="../../Shared/image/64x64/user.png" /><br>                                                 </div><br>                                                    <div class="ym-75 ym-gl padding-top"><br>                                                      <p><b>Company Id: </b><br>                                                      #= CompanyId #</p><br>                                                      <p><b>Company Name: </b><br>                                                        #= NotifiedCompany # </p><br>                                                      <p><b>Company Name: </b><br>                                                        #= NotifiedCompany # </p><br>                                                  </div><br>                                                </div><br>                                            </div><br>                                            <div class="ym-g20 ym-gl"><br>                                              <div class="ym-gbox"><br>                                                    <table><br>                                                        <tr><br>                                                            <td ><br>                                                                <img  src="../../Shared/image/32x32/Clock-icon.png" /><br>                                                            </td><br>                                                            <td class="padding-left"><br>                                                                <b>Date: </b>#= ReceptionDate #<br>                                                            </td><br>                                                        </tr><br>                                                        <tr><br>                                                            <td><br>                                                                <img src="../../Shared/image/32x32/money-euro.png" /><br>                                                            </td><br>                                                            <td  class="padding-left"><br>                                                                <b>Value:</b>#= DocumentValue #<br>                                                            </td><br>                                                        </tr><br>                                                    </table><br>                                                </div><br>                                            </div><br>                                            </div><br>                                        </div><br>                                    </li><br>                            </ItemTemplate><br>                            <ItemSeparatorTemplate><br>                                    <br/><br>                            </ItemSeparatorTemplate><br>                        </DataBinding><br>                    </ClientSettings><br>                </telerik:RadListView>

    i want to hit a button lets say btnRebind and i want the list to refresh client side.

     
    <script type="text/javascript"><br>function RebindList() {
    <
    br> <br>                var listview= $find("<%=lvStagingKofax.ClientID %>");
    <
    br>                listview.rebind();<br>            }
    <
    br></script>


    but no success... could you help me please?

    thanks in advance
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 12 Sep 2014 Link to this post

    Hello Macedo,

    Generally there is no need to call .rebind() for the RadListView in such cases as on initial load the client data source will have extracted the needed data and will later perform operations over it solely on the client. Could you please elaborate more on what is the idea behind calling .rebind()? Are you experiencing difficulties populating the control?

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Macedo
    Macedo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 16 Sep 2014 in reply to Angel Petrov Link to this post

    Hello Angel,

    I am having some problems with the re-population of the listview.

    After some user interaction one of the items of the listview is deleted in the database, so i want that to happend also on the listview, but i am not able to do it, the listview keeps its initial items and doesnt refresh.

    thanks in advance




  5. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 19 Sep 2014 Link to this post

    Hello Macedo,

    Indeed with the current implementation calling .rebind() for the RadListView will not invoke the select call of the RadClientDataSource and update the listview data. I recommend logging a feature request in our feedback portal so our dev team can research the matter and if possible improve the control performance.

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Macedo
    Macedo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 22 Sep 2014 in reply to Angel Petrov Link to this post

    actually I was able to rebind the Radlistview with thsi code:

    $find("RadClientDataSource1")._kendoDataSource.read();

    $find("RadListView1").set_dataSource([]);

    $find("RadListView1").rebind();

    but there is a bug, and i need to hit the button 2 times for the listview to be refreshed
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 25 Sep 2014 Link to this post

    Hi Macedo,

    Probably the result from the read() call is returned after the rebind execution. Please subscribe to the RadClientDataSource OnChange event and call .rebind() for the RadListView in the event handler.

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Scott Resnik
    Scott Resnik avatar
    2 posts
    Member since:
    Feb 2010

    Posted 16 Dec 2014 Link to this post

    A rebind() not refreshing the backing data source sounds like a bug to me.  I'm experiencing the same issue.  I'm making an ajax call to a REST service which deletes one of the items.  The rebind does nothing, but refreshing the browser shows the that the item was, in fact, deleted.
  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 19 Dec 2014 Link to this post

    Hi Scott,

    Could you please try calling the following sequence of methods, that should get the desired result:
    $find("RadClientDataSource1").recreateView();
    $find("RadListView1").set_dataSource([]);
    $find("RadListView1").rebind();

    Please let me know if everything works correctly on your end too with that approach.


    Kind Regards,
    Konstantin Dikov
    Telerik
  10. Scott Resnik
    Scott Resnik avatar
    2 posts
    Member since:
    Feb 2010

    Posted 19 Dec 2014 in reply to Konstantin Dikov Link to this post

    This is what I ended up doing...  The key for me to get this to work was clearing the clientDataSource.  It must have some sort of caching issues.  I could see it hitting my web service, and the web service was returning the correct data, but the data source would never update.

    var dataSource = $find(notificationDataSourceId);
    dataSource.set_data([]);
    dataSource.fetch(function (fetchArgs) {
        listView.set_dataSource(fetchArgs.get_data());
        listView.rebind();
    });


  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 24 Dec 2014 Link to this post

    Hi Scott,

    I am really glad to see that you were able to find a workaround for this.

    We will definitely investigate this further on our end and see what issues will arise and what are the best approaches for manually refresh the RadClientDataSource and the control that is bound to it.



    Best Regards,
    Konstantin Dikov
    Telerik
  12. Robin
    Robin avatar
    7 posts
    Member since:
    Sep 2014

    Posted 23 Apr 2015 in reply to Konstantin Dikov Link to this post

    Is there any progress with refreshing the clientdatasource? It seems that every scenario I have where my page is mostly client side, I'd have to refresh the data at some point. I find it hard to believe there's no way to do this and everything I've tried on this page doesn't help me. 

     I'm not working with a listview though, it's for a treeview and a dropdowntree control.

     

  13. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 28 Apr 2015 Link to this post

    Hi Robin,

    Calling the rebind method of a control will force the control to retrieve the data from the corresponding RadClientDataSource control (in its current state), so if there are changes in the data you need to force the RadClientDataSource to retrieve the new data, before you rebind the control.

    Nevertheless, if you can provide an example with your implementation with the RadTreeView control and elaborate on the exact scenario and the issues you are facing, we could test them locally and isolate the root of the problem.


    Best Regards,
    Konstantin Dikov
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017