Click the Radgrid row and edit and update

[Allen]

Hi,

My data source is dataset, And I am not use the DataSourceControl.
How can I implement the edit and update after I click the row.

Please help me and I really appreciate it.

Thank you.

[Shinu]

Hi Allen,

Try the following JS.

function OnRowClick(sender, eventArgs)
 {
     editedRow = eventArgs.get_itemIndexHierarchical();
     $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
 }

Thanks,
Shinu.

[Allen]

Thank you for replying.

How about the update?

[Allen]

Hi Shinu,

I use the following code for update

function UpdateItem() {
            //log.info("Update Item: " + hasChanges);
            if (editedRow && hasChanges) {
                hasChanges = false;
                $find("<%= TheGrid.ClientID %>").get_masterTableView().updateItem(editedRow);
                editedRow = null;
//$<%= this.ClientID %>.sendNotifications();
            }
            else {
                CancelEdit();
            }
        }

However, it does not works. it cannot fire the event. UpdateCommand or ItemUpdated

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource"
       OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound">
       <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" ClientDataKeyNames="ID"
           DataKeyNames="ID">
           <Columns>
               <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
               </telerik:GridBoundColumn>
               <telerik:GridTemplateColumn>
                   <EditItemTemplate>
                       <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                   </EditItemTemplate>
               </telerik:GridTemplateColumn>
           </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"},
            new { ID = 26, Name = "Name26"}
        };

        RadGrid1.DataSource = data;

    }
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "MyUpdate")
        {
            foreach (GridEditableItem item in RadGrid1.EditItems)
            {
                if (Convert.ToInt32(item.GetDataKeyValue("ID")) == Convert.ToInt32(e.CommandArgument))
                {
                    // perform update operation
                }
            }
        }
    }
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = e.Item as GridEditableItem;
            Button btnUpdate = item.FindControl("btnUpdate") as Button;
            btnUpdate.Attributes.Add("onclick", "FireUpdate('" + item.GetDataKeyValue("ID") + "'); return false;");
        }
    }

Thanks,
Jayesh Goyani

[Allen]

Hi Jayesh,

Thank you so much for posting this snippet of code.

But I would like to click one row and edit,then click the other row, the previous row need to be updated.

I do not know which event I can fire for my javascript

function UpdateItem() {
            //log.info("Update Item: " + hasChanges);
            if (editedRow && hasChanges) {
                hasChanges = false;
                $find("<%= TheGrid.ClientID %>").get_masterTableView().updateItem(editedRow);
                editedRow = null;
//$<%= this.ClientID %>.sendNotifications();
            }
            else {
                CancelEdit();
            }
        }

The JS methode UpdateItem() does not fire RadGrid1_ItemCommand()

Do you have any ideas about that?

Thank you.


Thank you.

[Allen]

Hi Jayesh,

The JS  updateItem(editedRow) does not fire the event RadGrid1_ItemCommand.

I do not what happened.

Do you have any ideas about that?

Thank you very much.

[Allen]

Is there anyone can help me I really appreciate it.

Thank you.

[Allen]

it is same I got the conflict behavior between update and edit.

When I edit and change one row, then edit other row, it fire the TheGrid_ItemCommand event which command Name is "edit".
Seems like it overlap the update one.

Anyone has any ideas about that?

Thanks.

[Jayesh Goyani]

Hello,

Sorry i forget to add JS code in my last reply.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     <script type="text/javascript">

         function FireUpdate(id) {
             var grid = $find("<%=RadGrid1.ClientID %>");
             if (grid) {
                 var MasterTable = grid.get_masterTableView();
                 var Rows = MasterTable.get_dataItems();
                 for (var i = 0; i < Rows.length; i++) {
                     var row = Rows[i];
                     if (id != null && parseInt(id) == parseInt(row.getDataKeyValue("ID"))) {
                         MasterTable.fireCommand("MyUpdate", id);
                     }
                 }
             }
         }
     </script>
 </telerik:RadCodeBlock>

By using above code you can fire itemcommand event in backend.



Thanks,
Jayesh Goyani

[Allen]

Hey Jayesh,

Thank you for posting your code.

I found the problem but I do not know how to fix that. 

The problem is when I want to update the row and edit an another one at the same time, it always fire the edit event.

Do you have any idea about this?

Thank you.

[Jayesh Goyani]

Hello,

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" ClientDataKeyNames="ID"
            DataKeyNames="ID" EditMode="InPlace">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Name" UniqueName="Name" HeaderText="Name">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">

        function FireUpdate(id) {
            var grid = $find("<%=RadGrid1.ClientID %>");
            if (grid) {
                var MasterTable = grid.get_masterTableView();
                var Rows = MasterTable.get_dataItems();
                for (var i = 0; i < Rows.length; i++) {
                    var row = Rows[i];
                    if (id != null && parseInt(id) == parseInt(row.getDataKeyValue("ID"))) {
                        MasterTable.fireCommand("MyUpdate", id);
                    }
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

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"},
           new { ID = 26, Name = "Name26"}
       };

       RadGrid1.DataSource = data;

   }
   protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
   {
       if (e.CommandName == "MyUpdate")
       {
           foreach (GridEditableItem item in RadGrid1.EditItems)
           {
               if (Convert.ToInt32(item.GetDataKeyValue("ID")) == Convert.ToInt32(e.CommandArgument))
               {
                   // perform update operation
               }
           }
       }
       else if (e.CommandName == "Edit")
       {
           foreach (GridEditableItem item in RadGrid1.EditItems)
           {
               string strID = item.GetDataKeyValue("ID").ToString();
               // Perform Updtae Operation for existing Edited item
           }
       }
   }
   protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditableItem && e.Item.IsInEditMode)
       {
           GridEditableItem item = e.Item as GridEditableItem;
           Button btnUpdate = item.FindControl("btnUpdate") as Button;
           btnUpdate.Attributes.Add("onclick", "FireUpdate('" + item.GetDataKeyValue("ID") + "'); return false;");
       }
   }

Thanks,
Jayesh Goyani