Send Cell Data using RowIndex from One Grid to a RadWindow(Modal) Grid as a DataKey

1 Answer 79 Views
Grid Window
IT
Top achievements
Rank 1
IT asked on 30 Dec 2021, 03:05 PM

Hello!

I am attempting to send the an ID value from one RadGrid Row to a RadGrid in a modal window as a DataKey using rowIndex. 

I sucessfully get the cell value but right now it is just sending it to OwnerTableView rather than my modal window grid.

aspx.cs code:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            RadButton partsBtn = (RadButton)e.Item.FindControl("RadButton1");
            partsBtn.Attributes["href"] = "javascript:void(0);";
            Console.WriteLine(e.Item.ItemIndex);
            partsBtn.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OrderID"], e.Item.ItemIndex);
        }
    }

 

I only want the modal Grid to populate with values that also have that ID (multiple values).

Any thoughts on this?

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 03 Jan 2022, 12:53 PM

Hi,

Any RadGrid bound on the server-side can only have new data assigned on the server-side. Having that said, you will need to make another PostBack where you tell the Grid inside the RadWindow to get a new set of data based on an ID. Opening the RadWindow using JavaScript will not be able to do that.

The easiest way would be to bind new Data based on the Data Key value when the button is clicked.

Assuming you have a button in the Main Grid.

<telerik:GridTemplateColumn HeaderText="My Template Column">
    <ItemTemplate>
        <telerik:RadButton runat="server" ID="RadButton1" Text="Show Details" AutoPostBack="true" OnClick="RadButton1_Click1" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

 

When this button is clicked, you access the Data Key Value and query the database based on that. Assign the results to the Details Grid (Grid in Window) and rebind it.

Also register a Startup script that will be executed as soon as the PostBack is finished.

protected void RadButton1_Click1(object sender, EventArgs e)
{
    var btn = (RadButton)sender;

    var dataItem = btn.NamingContainer as GridDataItem;

    var orderId = dataItem.GetDataKeyValue("OrderID");

    // Assign new data to the second Grid
    RadGridFromWindow1.DataSource = GetDataBasedOnTheId(orderId);
    // Rebind the second Grid
    RadGridFromWindow1.Rebind();

    // Register a Startup Script that will call a JavaScript method when this PostBack has finished
    string applicationLoadHandlerFormatString = "Sys.Application.add_load(applicationLoadHandler); function applicationLoadHandler() {{ {0}; /* Sys.Application.remove_load(applicationLoadHandler);*/ }}";
    string myFunction = "openWindowWithGrid();";
    string formattedString = string.Format(applicationLoadHandlerFormatString, myFunction);

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "My Script", formattedString, true);
}

 

The openWindowWithGrid() function:

<script>
    function openWindowWithGrid(sender, args) {
        var wnd = $find('<%= RadWindow1.ClientID %>');
        wnd.show();
    }
</script>

 

When this Window opens, the Grid inside it will have the new data based on the ID.

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid Window
Asked by
IT
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or