Rebind RadListView with ClientDataSource

[Macedo]

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

[Angel Petrov]

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

 

 

[Macedo]

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

[Angel Petrov]

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

 

 

[Macedo]

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

[Angel Petrov]

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

 

 

[Scott Resnik]

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.

[Konstantin Dikov]

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

[Scott Resnik]

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();
});

[Konstantin Dikov]

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

[Robin]

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.

 

[Konstantin Dikov]

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