Page refreshing during javascript rebind and/or javascript row selection not enough

[Jeremy Yoder]

I have 2 grids, each pointing to a datatable. The second table has to be filtered based on the row selection of first grid, so when you click a row on the first grid, in its SelectedIndexChanged event, it filters the second table to a view, converts that to a table, sets it to the 2nd grid's DataSource, and rebinds it. Works fine.

Now when the user clicks a button, I update the data server-side and want to update both grids without a page refresh. After data update, back in javascript, I rebind the first grid via get_masterTableView().rebind(). It updates fine. I then rebind the second grid the same way, but it causes a page refresh. I've no idea why and it's messes up everything.

So I stopped rebinding the second grid in javascript and thought I'd select a row in javascript after the first grid's rebind via .set_selected(true). That works. However, it does not call the SelectedIndexChanged event on the server, which I need to properly update the second grid. So either...

1) I need get_masterTableView().rebind() on the second grid to not update the entire page like the first grid.
2) Or I need to call SelectedIndexChanged to trigger after I select it in javascript with .set_selected

What do you recommend? And how can it be done? Chunks of my code are below...




    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="grdPODetails">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdPODetails" />
                    <telerik:AjaxUpdatedControl ControlID="pnlChild" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="grdReceiving">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlChild" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    



                        <telerik:RadGrid ID="grdPODetails" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="None">
                            <HeaderContextMenu EnableAutoScroll="True">
                            </HeaderContextMenu>

                            <ClientSettings EnablePostBackOnRowClick="true">
                                <Selecting AllowRowSelect="True" />
                            </ClientSettings>

                            <MasterTableView Caption="Purchase Order Detail Information" CommandItemDisplay="None"
                                    ClientDataKeyNames="PurchaseOrderDetailKey" DataKeyNames="PurchaseOrderDetailKey">
                                <CommandItemSettings ShowRefreshButton="False" />
                                <NoRecordsTemplate>
                                    No detail lines to display.
                                </NoRecordsTemplate>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="ChartOfAccountNumber" HeaderText="Acct Number" UniqueName="ChartOfAccountNumber">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PurchaseOrderDetailDescription" HeaderText="Description" UniqueName="PurchaseOrderDetailDescription">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Catalogue" HeaderText="Catalogue" UniqueName="Catalogue">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="CostCenterID" HeaderText="Cost Center" UniqueName="CostCenterID">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridNumericColumn DataField="PurchaseOrderDetailQuantity" HeaderText="Quantity"
                                        UniqueName="PurchaseOrderDetailQuantity" DataFormatString="{0:N4}" DataType="System.Double">
                                    </telerik:GridNumericColumn>
                                    <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="Unit Price" UniqueName="UnitPrice"
                                        DataFormatString="{0:N4}" DataType="System.Double">
                                    </telerik:GridNumericColumn>
                                    <telerik:GridBoundColumn DataField="UnitDescription" HeaderText="Unit Desc" UniqueName="UnitDescription">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridNumericColumn DataField="PurchaseOrderDetailAmount" HeaderText="Amount"
                                        UniqueName="PurchaseOrderDetailAmount" DataFormatString="{0:N2}" DataType="System.Double">
                                    </telerik:GridNumericColumn>
                                    <telerik:GridNumericColumn DataField="PurchaseOrderDetailBalance" HeaderText="Balance"
                                        UniqueName="PurchaseOrderDetailBalance" DataFormatString="{0:N2}" DataType="System.Double">
                                    </telerik:GridNumericColumn>

                                    <telerik:GridCheckBoxColumn DataField="ReceivingProcessed" HeaderText="Receiving Processed" UniqueName="ReceivingProcessed" DataType="System.Boolean">
                                        <HeaderStyle Width="70px" />
                                        <ItemStyle Width="70px" />
                                    </telerik:GridCheckBoxColumn>
                                    <telerik:GridCheckBoxColumn DataField="InvoiceProcessed" HeaderText="Invoice Processed" UniqueName="InvoiceProcessed" DataType="System.Boolean">
                                        <HeaderStyle Width="70px" />
                                        <ItemStyle Width="70px" />
                                    </telerik:GridCheckBoxColumn>
                                    <telerik:GridNumericColumn DataField="PurchaseOrderDetailKey" HeaderText="PurchaseOrderDetailKey"
                                        UniqueName="PurchaseOrderDetailKey" DataType="System.Int32" Visible="False" ReadOnly="True">
                                    </telerik:GridNumericColumn>

                                </Columns>

                            </MasterTableView>
                        </telerik:RadGrid>






                        <asp:Panel ID="pnlChild" runat="server">

                            <telerik:RadGrid ID="grdReceiving" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="None">
                                <HeaderContextMenu EnableAutoScroll="True">
                                </HeaderContextMenu>

                                <ClientSettings>
                                    <Selecting />
                                    <ClientEvents OnRowDblClick="RowDblClick"
                                        OnPopUpShowing="centerFormPopUp" />
                                </ClientSettings>

                                <MasterTableView Caption="Receiving Information" CommandItemDisplay="Bottom" EditMode="PopUp"
                                        ClientDataKeyNames="ReceivingKey,ReceivedInFullStatusLkUpKey" DataKeyNames="ReceivingKey,ReceivedInFullStatusLkUpKey">
                                    <CommandItemSettings ShowRefreshButton="False" AddNewRecordText="Add New" AddNewRecordImageUrl="~/images/icons/addslim-16.png" />
                                    <NoRecordsTemplate>
                                        No detail lines to display.
                                    </NoRecordsTemplate>
                                    <Columns>
                                        <telerik:GridEditCommandColumn UniqueName="EditColumn">
                                        </telerik:GridEditCommandColumn>
                                        <telerik:GridBoundColumn HeaderText="Status" UniqueName="ReceivingStatus">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="ReceivedInFullStatusLkUpKey" Visible="false" HeaderText="ReceivedInFullStatusLkUpKey" UniqueName="ReceivedInFullStatusLkUpKey">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridNumericColumn DataField="ReceivedQuantity" HeaderText="Quantity"
                                            UniqueName="ReceivedQuantity" DataFormatString="{0:N4}" DataType="System.Double">
                                        </telerik:GridNumericColumn>
                                        <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" UniqueName="Comments">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridCheckBoxColumn DataField="Asset" HeaderText="Asset" UniqueName="Asset" DataType="System.Boolean" DefaultInsertValue="false">
                                            <HeaderStyle Width="70px" />
                                            <ItemStyle Width="70px" />
                                        </telerik:GridCheckBoxColumn>

                                        <telerik:GridDateTimeColumn DataField="ReceivedDate" HeaderText="Rec Date" UniqueName="ReceivedDate"
                                            DataFormatString="{0:MM/dd/yyyy}">
                                        </telerik:GridDateTimeColumn>

                                        <telerik:GridBoundColumn DataField="UserID" HeaderText="Rec By User" UniqueName="UserID">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="InvoiceNumber" HeaderText="Inv Num" UniqueName="InvoiceNumber">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridNumericColumn DataField="ReceivingKey" HeaderText="ReceivingKey"
                                            UniqueName="ReceivingKey" DataType="System.Int32" Visible="False" ReadOnly="True">
                                        </telerik:GridNumericColumn>

                                        <telerik:GridButtonColumn CommandName="Delete"
                                            ConfirmText="Are you sure you want to delete the selected item?" Text="Delete" 
                                            UniqueName="Delete">
                                        </telerik:GridButtonColumn>

                                    </Columns>

                                </MasterTableView>
                            </telerik:RadGrid>
                        
                        </asp:Panel>







    Protected Sub grdPODetails_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles grdPODetails.SelectedIndexChanged

        Dim iRow As Integer = grdPODetails.MasterTableView.GetSelectedItems(0).ItemIndex
        Dim item As GridDataItem = grdPODetails.MasterTableView.Items(iRow)
        Dim iPODetailKey As Integer = CType(item.GetDataKeyValue(FLDS.PurchaseOrderDetailKey.ToString).ToString, Integer)

        Dim dv As DataView = New DataView(Receivings)
        dv.RowFilter = "PurchaseOrderDetailKey=" & iPODetailKey
        grdReceiving.DataSource = dv.ToTable
        grdReceiving.Rebind()

    End Sub

[Eyup]

Hello Jeremy,

Can you please verify that you are not using DataBind()? Performing complex grid operations such as Inserting, Deleting, Updating, Hierarchy relations, Grouping, Paging, Sorting, Filtering, etc. require accommodating appropriate database operations.  Therefore, we suggest you to avoid Simple Databinding and strongly recommend the use of more advanced databinding methods, which automatically handle the aforementioned functions:
Declarative DataSource
Advanced Data Binding

This means that every database related action should be done inside the NeedDataSource event. I have prepared a sample RadGrid web site to demonstrate how you can achieve the requested functionality. Alternatively, you can check this demo for a declarative approach:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/master-detail/defaultcs.aspx

Hope this helps. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

[Jeremy Yoder]

I was gone for a few days, so only now able to get back to this.

Thanks for the excellent example. To answer your question, I am not using Databind(). I'm now using your methods which seem more robust. But I ran into a minor snag. Sometimes the grids are empty. That gives me an error on this line...

if (RadGrid1.SelectedItems.Count > 0)

So I changed it to this...

if (RadGrid1.MasterTableView.Items.Count > 0 && RadGrid1.SelectedItems.Count > 0)

Is that the recommended code? Or should I do something different?

[Eyup]

Hello Jeremy,

The better option would be to add this validation earlier:

if (RadGrid1.SelectedIndexes.Count == 0 && RadGrid1.Items.Count > 0)
    RadGrid1.SelectedIndexes.Add(0);

That way we will prevent the mismatch between the SelectedIndexes and SelectedItems collections.

You can also leave the condition mentioned in your post. Please let us know if new questions arise.

Regards,
Eyup
Telerik