[Solved] OnRowDataBound client event invoked more # of times than rows in the grid

[Amod]

Hi,

I have a RadGrid bound to WebAPI through RadClientDataSource. Grid is configured to fire the OnRowDataBound event on the client side. Pagination is set to TRUE and is configured to show 10 rows per page. The service returns 6 rows which bind the grid and on each row I bind a combobox inside that row with static data. (RadComboBox template column)

Issue - I presume the OnRowDataBound event must fire 6 times i.e. exactly equal to the number of rows bound to the grid, however its fired more than 6 times and hence the same dropdowns are appended with the data for all the extra times the rowbound event is called. I have to manually clear the items from the combo as a work-around.

This does not happen If I turn OFF pagination.

What am I missing here?

JavaScript - OnRowDataBound event

01.<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
02.   <script>
03.     function RowDataBound(sender, args) {
04.        var cmbOType = args.get_item().findControl("cmbOpportunityType");
05.        Populate(cmbOType);
06.     };
07.
08.     function Populate(cmb) {
09.        cmb.clearItems();
10.        var otype = [
11.          { Value: "1", Text: "AMAR" },
12.          { Value: "2", Text: "VDB" },
13.          { Value: "3", Text: "MLS" }];
14.
15.          for (var i = 0; i < otype.length; i++) {
16.            var cmbItem = new Telerik.Web.UI.RadComboBoxItem();
17.            cmbItem.set_value(otype[i].Value);
18.            cmbItem.set_text(otype[i].Text);
19.            cmb.get_items().add(cmbItem);
20.         }
21.    };
22.  </script>
23.</telerik:RadCodeBlock>

 

RadGrid

01.<telerik:RadGrid AllowFilteringByColumn="true"
02.    AllowSorting="true" AllowPaging="true"
03.    runat="server" ID="RadGrid1"
04.    PageSize="10"
05.    AutoGenerateColumns="false"
06.    ClientDataSourceID="RadClientDataSource1">
07.    <ClientSettings>
08.        <ClientEvents OnRowDataBound="RowDataBound" />
09.    </ClientSettings>
10.    <MasterTableView ClientDataKeyNames="ID">
11.        <Columns>
12.            <telerik:GridBoundColumn
13.                            UniqueName="ID"
14.                            DataField="ID"
15.                            HeaderText="ID"
16.                            ReadOnly="true" />
17.            <telerik:GridTemplateColumn UniqueName="OpType" AllowFiltering="false" HeaderText="Opportunity Type">
18.                <ItemTemplate>
19.                    <telerik:RadComboBox
20.                        runat="server"
21.                        ID="cmbOpportunityType"
22.                        OnClientSelectedIndexChanged="OnClientItemSelected">
23.                    </telerik:RadComboBox>
24.                </ItemTemplate>
25.            </telerik:GridTemplateColumn>
26.
27.            <telerik:GridTemplateColumn
28.                UniqueName="EstimatedValue"
29.                HeaderText="Esitmated Value"
30.                AllowFiltering="false">
31.                <ItemTemplate>
32.                    <telerik:RadNumericTextBox
33.                        EnabledStyle-HorizontalAlign="Right"
34.                        runat="server"
35.                        ID="tEstimateValue">
36.                    </telerik:RadNumericTextBox>
37.                </ItemTemplate>
38.            </telerik:GridTemplateColumn>
39.
40.            <telerik:GridTemplateColumn UniqueName="Name" DataField="Name" AllowFiltering="false">
41.                <ItemTemplate>
42.                    <telerik:RadTextBox runat="server" ID="tName"></telerik:RadTextBox>
43.                </ItemTemplate>
44.            </telerik:GridTemplateColumn>
45.
46.            <telerik:GridTemplateColumn UniqueName="Shipped" DataField="Shipped" AllowFiltering="false">
47.                <ItemTemplate>
48.                    <telerik:RadDatePicker runat="server" ID="tDatePicker"></telerik:RadDatePicker>
49.                </ItemTemplate>
50.            </telerik:GridTemplateColumn>
51.            <telerik:GridClientDeleteColumn HeaderText="Delete" ButtonType="ImageButton" HeaderStyle-Width="70px">
52.            </telerik:GridClientDeleteColumn>
53.        </Columns>
54.    </MasterTableView>
55.</telerik:RadGrid>
56.<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
57.    <DataSource>
58.        <WebServiceDataSourceSettings>
59.            <Select Url="api/products" RequestType="Get" />
60.        </WebServiceDataSourceSettings>
61.    </DataSource>
62.    <Schema>
63.        <Model ID="ID">
64.            <telerik:ClientDataSourceModelField FieldName="ID" DataType="Number" />
65.            <telerik:ClientDataSourceModelField FieldName="Name" DataType="String" />
66.            <telerik:ClientDataSourceModelField FieldName="Shipped" DataType="Date" />
67.        </Model>
68.    </Schema>
69.</telerik:RadClientDataSource>

Service returns 6 rows.

 

01.products = new List<Product>(new Product[]
02.{
03.    new Product { ID = 1, Name = "Product1", Category = "Category1", Price = 1.05M,Shipped=DateTime.Now },
04.    new Product { ID = 2, Name = "Product2", Category = "Category2", Price = 3.75M,Shipped=DateTime.Now  },
05.    new Product { ID = 3, Name = "Product3", Category = "Category2", Price = 2.34M,Shipped=DateTime.Now },
06.    new Product { ID = 4, Name = "Product4", Category = "Category3", Price = 1.63M,Shipped=DateTime.Now },
07.    new Product { ID = 5, Name = "Product5", Category = "Category4", Price = 5.62M,Shipped=DateTime.Now },
08.    new Product { ID = 6, Name = "Product6", Category = "Category1", Price = 7.68M,Shipped=DateTime.Now },
09.    /*new Product { ID = 7, Name = "Product7", Category = "Category1", Price = 8.23M,Shipped=DateTime.Now },
10.    new Product { ID = 8, Name = "Product8", Category = "Category2", Price = 9.44M,Shipped=DateTime.Now },
11.    new Product { ID = 9, Name = "Product9", Category = "Category2", Price = 0.43M,Shipped=DateTime.Now },
12.    new Product { ID = 10, Name = "Product10", Category = "Category3", Price = 2.12M,Shipped=DateTime.Now },
13.    new Product { ID = 11, Name = "Product11", Category = "Category4", Price = 1.79M,Shipped=DateTime.Now },
14.    new Product { ID = 12, Name = "Product12", Category = "Category4", Price = 4.22M,Shipped=DateTime.Now } */
15.});

** I have removed columns irrelevant to this issue.

 

[Maria Ilieva]

Hi Amod,

In this scenario another I would suggest you to simply check if the ComboBox is already filled with items and in this case just do not apply the population logic.


Regards,
Maria Ilieva
Telerik

[Amod]

Hi,

Is this by design? In the above scenario its possible to check if the combo already has items and then not fill again. Assume I have another scenario which is summing up data in the grid, or calling a web-service based on the individual items in the row. The scenario will give me a wrong output and the second will make unnecessary calls to a web-service.

Please suggest.

[Konstantin Dikov]

Hello Amod,

I completely understand that it is expected the event to fire only for the number of items on the current page, but this is a limitation when binding to RadClientDataSource, which will rebind the control every time when its "change" event fires. 

With the current implementation of RadClientDataSource and RadGrid there is no proper workaround that could be suggested, but in regard of calculating totals for the displayed rows, this could be achieved within the OnDataBound event instead (although that it will still fire multiple times, it could be used for traversing the items and calculating the correct total).


Kind Regards,
Konstantin Dikov
Telerik