Update Grid2 based on selected index in editable Grid1

[Erik Lidman]

Hi,
I have two RadGrids in a webform.
I want the second grid to show a few rows based on a filter criteria in the first grid.
But the first grid is in multi-row edit mode, and the user will normally only navigate between the editable cells (like a spreadsheet).
And then I can't capture any server side event that makes it possible to refresh the second grid with appropriate data.

Anyone having a solution for this?

Regards,
Erik Lidman

[Mira]

Hello Erik,

The provided information is not enough for us to fully understand your scenario. Could you please provide little bit more information on your grid structure? How do you select the columns? Is the desired functionality similar to the one in this demo?

Greetings,
Mira
the Telerik team

[Erik Lidman]

Hi,

See attached Code for Grid1. The datasource is set in server side code with data from a Linq to Entities query.
The functionality of this grid is perfect. Multi-row edit, and the user can tab between the records. Perfect!

What I then want is a second grid, (that I want to have more or less the same functionality as the first one, but based on another linq-query). There is a relationship between the two grids. You could think of it as the first grid contains customers, and the second grid contains orders.

When the user selects a record in the first grid (by entering the editable field 'Value'), I want the second grid to directly show the related records. The second grid also contains an editable field.

The problem is that I can't find a server side event in the first grid, triggered by the user putting the cursor in the editable field in the first grid.
/Erik

<telerik:RadGrid ID="Target1RadGrid" runat="server" Skin="Windows7" GridLines="None"
    AutoGenerateColumns="False" AllowMultiRowEdit="True"
    onneeddatasource="Target1RadGrid_NeedDataSource1"
    onitemcommand="Target1RadGrid_ItemCommand"
    onselectedindexchanged="Target1RadGrid_SelectedIndexChanged">
    <MasterTableView ShowFooter="True" EditMode="InPlace" AllowSorting="True" DataKeyNames="ID" CommandItemDisplay="TopAndBottom">
     <Columns>
        <telerik:GridBoundColumn DataField="Code" HeaderText="Kod" UniqueName="Code" ReadOnly="True">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Aktivitet" ReadOnly="True">
        </telerik:GridBoundColumn>
        <telerik:GridNumericColumn Aggregate="Sum" DataField="Value" HeaderText="Procent %"
                UniqueName="Value" HeaderStyle-Width="60px"
                DataType="System.Double">
            <HeaderStyle Width="60px" />
            <ItemStyle Wrap="False" />
            </telerik:GridNumericColumn>
    </Columns>
                <CommandItemTemplate>
                    <asp:Button ID="UpdateAll" runat="server" Text="Uppdatera" CommandName="UpdateAll" />
        </CommandItemTemplate>
                </MasterTableView>
    <SelectedItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
        Font-Strikeout="False" Font-Underline="False"
        Wrap="True" />
    <ClientSettings EnablePostBackOnRowClick="True" allowkeyboardnavigation="true">
    <Selecting AllowRowSelect="True" />
    <ClientEvents/>
    </ClientSettings>
    <EditItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
        Font-Strikeout="False" Font-Underline="False" Wrap="True" />
</telerik:RadGrid>

[Mira]

Hello Erik,

To implement the desired functionality, I recommend that you access the textbox controls in the edit form, handle their onfocus client events and rebind the second grid in the event handler. Your code could look like the following:
C#

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem && e.Item.IsInEditMode)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        (dataItem["ColumnUniqueName"].Controls[0] as TextBox).Attributes["onfocus"] = "focused();";
    }
}

Javascript

function focused() {
     var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
     masterTable.rebind();
}

For additional information on accessing cells and rows, please take a look at this help topic.

Sincerely yours,
Mira
the Telerik team

[Erik Lidman]

Ok, almost there…

I have managed to get the first grid to trigger a rebind on the second grid when the user put the cursor in the editable Grid1 cells.

But in the Grid2 NeedDataSource event that is fired - how can I get what record is selected in the first grid from server side code? When the databinding is done in server side code I need the selectedIndex or similar from the first grid to make the select-linq-query for the second grid.

/Erik

[Veli]

Hi Erik,

So you need to pass some information from the client to the server when the page postbacks and you rebind the second grid. You can use a hidden field on your page to store the data key value of the current edited row in Grid1. When you postback, you can read the value of the hidden field in the NeedDataSource event handler of Grid2 and bind the second grid to related data based on the data key value you got.

Sincerely yours,
Veli
the Telerik team

[Erik Lidman]

Ok, thanx,
So now I get the ItemIndex server side, and can use it in the NeedDataSource event of Grid2.

But how can I convert ItemIndex into the selected row PrimaryKeyID?
I know what Row the user is selecting, but how do I get the primaryID of the record in that row?

Thank you very much for your help! Very good,

/Erik

[Veli]

Hi Erik,

In your RadGrid2_NeedDataSource event handler, you can simply have:

protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs)
{
    //Assumptions:
    //Parent RadGrid ID: RadGrid1
    //Child  RadGrid ID: RadGrid2
    //Parent grid items' data key name: PrimaryKeyID
    //HiddenField ID: HiddenField1

    int parentItemIndex = Int32.Parse(HiddenField1.Value);
    string parentItemKeyValue = "";

    foreach (GridDataItem item in RadGrid1.SelectedItems)
    {
        if(item.ItemIndex == parentItemIndex)
        {
            parentItemKeyValue = item.GetDataKeyValue("PrimaryKeyID").ToString();
            break;
        }
    }

    RadGrid2.DataSource = GetChildDataByParentKeyValue(parentItemKeyValue);
}

Greetings,
Veli
the Telerik team

[Erik Lidman]

Hi,
Thank you, almost worked.
I changed from:
item in RadGrid1.SelectedItems
To:
item in RadGrid1.Items

Because I only got the ItemIndex 0 back using your code.
The reason is that the row is not an selected item, because it is only the cursor that is located in an open cell, but the row is not selected.
Thanks, this issue is now closed,
/Erik