Row editing in multiple grid at a time

[Sachidanand]

Hi,

I need to edit rows in ajax grid for multiple grids at the same time. We have more than one grid placed side by side which will have equal records and every row in grids are equivalent rows in other grids. What I want is that when I click edit button at any row in first grid then corresponding row in grids should become editable.

I am not getting an easy way to do that. Please help.

Thanks,
Sachi

[Jayesh Goyani]

Hello,

Using Index.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
       OnItemCommand="RadGrid1_ItemCommand">
       <MasterTableView DataKeyNames="ID">
           <Columns>
               <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
               </telerik:GridBoundColumn>
               <telerik:GridEditCommandColumn>
               </telerik:GridEditCommandColumn>
           </Columns>
       </MasterTableView>
   </telerik:RadGrid>
   <telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid2_NeedDataSource">
       <MasterTableView DataKeyNames="ID">
           <Columns>
               <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
               </telerik:GridBoundColumn>
               <telerik:GridEditCommandColumn>
               </telerik:GridEditCommandColumn>
           </Columns>
       </MasterTableView>
   </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    RadGrid1.DataSource = data;

}
protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    RadGrid2.DataSource = data;

}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.EditCommandName)
    {
        RadGrid2.MasterTableView.Items[e.Item.ItemIndex].Edit = true;
        RadGrid2.Rebind();
    }
}

Thanks,
Jayesh Goyani

[Jayesh Goyani]

Hello,

Using DataKey.

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCommand="RadGrid1_ItemCommand">
        <MasterTableView DataKeyNames="ID">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <telerik:RadGrid ID="RadGrid2" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid2_NeedDataSource">
        <MasterTableView DataKeyNames="ID">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridEditCommandColumn>
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    RadGrid1.DataSource = data;

}
protected void RadGrid2_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name ="Name1"},
        new { ID = 2, Name = "Name2"},
        new { ID = 3, Name = "Name3"},
         new { ID = 4, Name = "Name4"},
        new { ID = 5, Name = "Name5"}
    };

    RadGrid2.DataSource = data;

}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.EditCommandName)
    {
        string strId = (e.Item as GridDataItem).GetDataKeyValue("ID").ToString();

        GridDataItem _item = (from item in RadGrid2.MasterTableView.Items.Cast<GridDataItem>()
                                    where item.GetDataKeyValue("ID").ToString() == strId
                                    select item).FirstOrDefault();
        if (_item != null)
        {
            _item.Edit = true;
        }

        RadGrid2.Rebind();
    }
}

Thanks,
Jayesh Goyani

[Sachidanand]

Hi Jayesh,

I really appreciate your reply. But I want to implement this behaviour at client side. Is it possible to do it through the help of jquery etc.

Thanks,
Sachi

[Jayesh Goyani]

Hello,

Yes, we can also fire the command from client side.
Please check below link for reference.
http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-detect-single-and-double-click-in-itemcommand-of-radgrid.aspx

But ultimately it will fire the server side command item.

Let me know if any concern.

Thanks,
Jayesh Goyani