Client-side: Looping through all master and detail rows

[Konrad]

Hi,

I have a master/detail grid and I want to loop through all the items. Problem is I just cant seem to get to the detail items.
Somewhere I am missing something.

The reason I want to do this is that each detail row has two RadButton objects that are configured as radio buttons.
I want to persist their values client-side and I have already written the code to update the javascript array when a selection is changed.
I just need to be able to read the value back from the array and set them on the rows controls.

Note: I was able to do this successfully using the grid's onRowCreated event, but then it only works the first time it loads.
After an ajax update it wont find the controls in the rows again using args.get_item().findControl()

Any help would be appreciated thanks.

function onGridCreated(sender, args) {
                alert("onGridCreated");


                var masterTable = sender.get_masterTableView();
                //alert(masterTable.get_dataItems().length);

                var i = 0;

                var rows = masterTable.get_dataItems();

                for (var i = 0; i < rows.length; i++) {


                    for (var j = 0; j < i.rows; j++) {

                        var btnIsDualListedYes = args.get_item().findControl("btnIsDualListedYes");
                        var btnIsDualListedNo = args.get_item().findControl("btnIsDualListedNo");

                        if (btnIsDualListedYes != null && btnIsDualListedNo != null) {
                            var intrumentMasterID = btnIsDualListedYes.get_groupName();

                            if (dualListedSelection[id]) {
                                alert("Dual Listed " + id + " True");

                                btnIsDualListedYes.set_checked(true);
                                btnIsDualListedNo.set_checked(false);
                            }
                            else {
                                alert("Dual Listed " + id + " False");
                                btnIsDualListedYes.set_checked(false);
                                btnIsDualListedNo.set_checked(true);
                            }
                        } else {
                            alert("btnIsDualListedYes and btnIsDualListedNo is NULL");
                        }

//                    }

                }

[Genti]

Hello Konrad,


I am attaching a simple project that illustrates how you can get all the items of the grid, and then find a group of radio buttons in each of the items and check its selected value.
You can also refer to this article for more information.


I do not know what is your scenario but I hope this is going to help.

Best wishes,
Genti
the Telerik team

[Konrad]

Hi Genti,

I tried some stuff from the code that you gave me but I think it's not exactly what I need.

Just to clarify I am using a grid with a detail table inside. For each master item, I want to also loop through its detail items.
It is in the detail table that I have a template column with two RadButtons as follows:

<telerik:GridTemplateColumn headertext="Dual Listed?" headerstyle-width="100px" UniqueName="DualListed">
                                    <ItemTemplate>
                                        <telerik:RadButton ID="btnIsDualListedYes" runat="server" ToggleType="Radio" ButtonType="ToggleButton" AutoPostBack="false" Text="Yes" GroupName='<%# Eval("TradableInstrument.InstrumentMasterID")%>' OnClientCheckedChanged="onClientCheckedChanged">
                                        </telerik:RadButton>
                                        <telerik:RadButton ID="btnIsDualListedNo" runat="server" ToggleType="Radio" ButtonType="ToggleButton" AutoPostBack="false" Text="No" Checked="true" GroupName='<%# Eval("TradableInstrument.InstrumentMasterID")%>' OnClientCheckedChanged="onClientCheckedChanged">
                                        </telerik:RadButton>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>

I use the RadButton OnClientCheckedChanged event to save the selection to a javascript array.
My aim here is that after the grid rebinds, I want to loop though the items and find the relevant radbutton for each item and set its value again from the javascript array. 


I did a similar thing that I found in the samples to save the selected grid rows and that works perfectly.

function onRowCreated(sender, args) {
                var id = args.getDataKeyValue("TradableInstrument.InstrumentMasterID");
                if (seletedRows[id]) {
                    args.get_gridDataItem().set_selected(true);
                }
                var btnIsDualListedYes = args.get_item().findControl("btnIsDualListedYes");
                var btnIsDualListedNo = args.get_item().findControl("btnIsDualListedNo");

                if (btnIsDualListedYes != null && btnIsDualListedNo != null) {
                    var intrumentMasterID = btnIsDualListedYes.get_groupName();

                    if (dualListedSelection[id]) {
                        alert("Dual Listed " + id + " True");

                        btnIsDualListedYes.set_checked(true);
                        btnIsDualListedNo.set_checked(false);
                    }
                    else {
                        alert("Dual Listed " + id + " False");
                        btnIsDualListedYes.set_checked(false);
                        btnIsDualListedNo.set_checked(true);
                    }
                } else {
                    alert("btnIsDualListedYes and btnIsDualListedNo is NULL");
                }

            }

The first if is for the selected row. The code after that finds my controls but the problem here is that the code I wrote after it only works the first time the page loads. After an ajax postback or rebinding the grid it just never finds the controls again.

I hope this makes some sense...

[Konrad]

Here is also a screen shot of what the grid looks like - should help painting the scenario a little better....

[Genti]

Hi Konrad,

Thank you for contacting us back.


It seems to me that you are using hierarchical grid in this case. The example that I provided to you relied upon master detail grids.
Nevertheless, I would suggest you to get a look at the following topics:
- In order to make sure that the detail tables are available to the client side javascript functions that you employ, you should check Hierarchy load modes and set it to Client for example.
Article: Modes
- Then, you can get hold of the detail tables, by using get_detailTables() in the client side. This is going to send an array of all detail tables.
Article: Detail Tables
- The array types are going to be of GridTableView type. Then you can use the get_DataItem() method to find the items and afterwards to find the controls that you require.
Article: Data Items



Hope this helps.


Best wishes,
Genti
the Telerik team

[Konrad]

Hi Genti,

Thanks for the help. I still have a problem that after the grid rebinds (for example I add or delete a row in the datasource and call rebind)
the .findControl() method never finds the control I am looking for.

Im not sure if this maybe this only work when doing client-side binding which I am not doing, but then again it does work the first time the page loads.

Here is the code I wrote...

function getGridDetailTables() {
                var grid = $find("<%= rgNewAnnouncement.ClientID %>");
                var detailTablesArray = grid.get_detailTables(); // Get all detail tables in the hierarchy
                return detailTablesArray;
            }

function onGridCreated(sender, args) {


                var detailTables = getGridDetailTables();

                for (var i = 0; i < detailTables.length; i++) {

                    var detailTable = detailTables[i];
                    var dataItems = detailTable.get_dataItems();

                    for (var j = 0; j < dataItems.length; j++) {
                        var btnIsDualListedYes = dataItems[j].findControl("btnIsDualListedYes");
                        var btnIsDualListedNo = dataItems[j].findControl("btnIsDualListedNo");

                        if (btnIsDualListedYes != null) {

                            var intrumentMasterID = btnIsDualListedYes.get_groupName();

                            if (dualListedSelection[intrumentMasterID]) {
                                alert("Dual Listed " + intrumentMasterID + " True");

                                btnIsDualListedYes.set_checked(true);
                                btnIsDualListedNo.set_checked(false);
                            }
                            else {
                                alert("Dual Listed " + intrumentMasterID + " False");
                                btnIsDualListedYes.set_checked(false);
                                btnIsDualListedNo.set_checked(true);
                            }
                        }
                    }

                }
            }

[Genti]

Hi Konrad,

Thank you for contacting us back.


The hierarchy load modes can be specified even when binding is done server-side.
So, can you try to add another attribute to the MasterTableView declaration to set HierarchyLoadMode="Client"

If this does not work out for you, then consider implementing a simple runnable project that illustrates the issue you are describing.


Kind regards,
Genti
the Telerik team

[Konrad]

Thanks Genti, I will keep trying and if I get time to make a sample project I will do that.