Rad grid click row for editing and updating

9 posts, 1 answers
  1. Allen
    Allen avatar
    23 posts
    Member since:
    Apr 2013

    Posted 24 Jun 2013 Link to this post

    Hello,

    I want to implement that if you click one row,then you can edit, And you click another row, the row you just edited will update and the new row will go into edit mode.

    I got some examples, but they just implement it as do one thing at one time.

    Anyone can help me I really appreciate it.

    Thank you.
  2.
  3. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2013 Link to this post

    Hi Allen,

    Please try the following code snippet .Hope this helps you.

    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
             <AjaxSettings>
                  <telerik:AjaxSetting AjaxControlID="RadGrid1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                           <telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>
                       </UpdatedControls>
                  </telerik:AjaxSetting>
              </AjaxSettings>
    </telerik:RadAjaxManager>
     <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="97%" ShowStatusBar="True"
                AllowSorting="True" PageSize="7" GridLines="None" AllowPaging="True" runat="server"
                AllowAutomaticUpdates="True" OnItemUpdated="RadGrid1_ItemUpdated" AutoGenerateColumns="False"
                OnDataBound="RadGrid1_DataBound" OnItemCreated="RadGrid1_ItemCreated">
                <MasterTableView TableLayout="Fixed" DataKeyNames="ProductID" EditMode="InPlace">
                    <Columns>
                        <telerik:GridBoundColumn UniqueName="ProductID" DataField="ProductID" HeaderText="ProductID"
                            ReadOnly="True" HeaderStyle-Width="10%">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="ProductName" DataField="ProductName" HeaderText="Product name"
                            HeaderStyle-Width="25%" ColumnEditorID="GridTextBoxColumnEditor1">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="QuantityPerUnit" DataField="QuantityPerUnit"
                            HeaderText="Quantity" HeaderStyle-Width="20%">
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn UniqueName="UnitPrice" DataField="UnitPrice" HeaderText="UnitPrice"
                            DataFormatString="{0:C}" HeaderStyle-Width="10%">
                        </telerik:GridNumericColumn>
                        <telerik:GridDropDownColumn UniqueName="UnitsInStock" HeaderText="In stock" ColumnEditorID="GridDropDownListColumnEditor1"
                            ListTextField="UnitsInStock" ListValueField="UnitsInStock" DataSourceID="SqlDataSource1"
                            DataField="UnitsInStock" HeaderStyle-Width="10%">
                        </telerik:GridDropDownColumn>
                        <telerik:GridCheckBoxColumn UniqueName="Discontinued" DataField="Discontinued" HeaderText="Discontinued"
                            HeaderStyle-Width="10%">
                        </telerik:GridCheckBoxColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated"
                        OnCommand="GridCommand"></ClientEvents>
                </ClientSettings>
    </telerik:RadGrid>
            <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="180px">
            </telerik:GridTextBoxColumnEditor>
            <telerik:GridDropDownListColumnEditor ID="GridDropDownListColumnEditor1" runat="server"
                DropDownStyle-Width="70px">
            </telerik:GridDropDownListColumnEditor>
            <telerik:GridCheckBoxColumnEditor ID="GridCheckBoxColumnEditor1" runat="server" CheckBoxStyle-BorderWidth="2">
            </telerik:GridCheckBoxColumnEditor>
            <br />
            <asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label>
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString3 %>"
                SelectCommand="SELECT * FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
                <UpdateParameters>
                    <asp:Parameter Name="ProductName" Type="String"></asp:Parameter>
                    <asp:Parameter Name="QuantityPerUnit" Type="String"></asp:Parameter>
                    <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
                    <asp:Parameter Name="UnitsInStock" Type="Int16"></asp:Parameter>
                    <asp:Parameter Name="Discontinued" Type="Boolean"></asp:Parameter>
                    <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
                </UpdateParameters>
            </asp:SqlDataSource>

    JS:
    <script type="text/javascript">
      var hasChanges, inputs, dropdowns, editedRow;
     
        function RowClick(sender, eventArgs) {
            if (editedRow && hasChanges) {
                hasChanges = false;
                if (confirm("Update changes?")) {
     
                    $find("<%= RadGrid1.ClientID %>").get_masterTableView().updateItem(editedRow);
                }
            }
        }
     
        function RowDblClick(sender, eventArgs) {
            editedRow = eventArgs.get_itemIndexHierarchical();
            $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
        }
     
        function GridCommand(sender, args) {
            if (args.get_commandName() != "Edit") {
                editedRow = null;
            }
        }
     
        function GridCreated(sender, eventArgs) {
            var gridElement = sender.get_element();
            var elementsToUse = [];
            inputs = gridElement.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var lowerType = inputs[i].type.toLowerCase();
                if (lowerType == "hidden" || lowerType == "button") {
                    continue;
                }
                if (inputs[i].id.indexOf("PageSizeComboBox") == -1 && inputs[i].type.toLowerCase() != "checkbox") {
                    Array.add(elementsToUse, inputs[i]);
                }
                inputs[i].onchange = TrackChanges;
            }
     
            dropdowns = gridElement.getElementsByTagName("select");
            for (var i = 0; i < dropdowns.length; i++) {
                dropdowns[i].onchange = TrackChanges;
            }
     
            setTimeout(function () { if (elementsToUse[0]) elementsToUse[0].focus(); }, 100);
        }
     
        function TrackChanges(e) {
            hasChanges = true;
        }           
    </script>

    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
            {
                if (e.Item is GridDataItem && e.Item.IsInEditMode)
                {
                    ((e.Item as GridDataItem)["UnitPrice"].Controls[0] as RadNumericTextBox).Width = Unit.Pixel(50);
                }
            }
              
    protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
            {
                if (e.Exception != null)
                {
                    e.KeepInEditMode = true;
                    e.ExceptionHandled = true;
                    SetMessage(Server.HtmlEncode("Unable to update Products. Reason: " + e.Exception.Message).Replace("'", "'").Replace("\r\n", "<br />"));
                }
                else
                {
                    GridDataItem dataItem = (GridDataItem)e.Item;
                    SetMessage(" ProductID " + dataItem.GetDataKeyValue("ProductID") + " updated");
                }
            }
      
     private void DisplayMessage(string text)
            {
                Label1.Text = string.Format("<span>{0}</span>", text);
            }
      
     private void SetMessage(string message)
            {
                gridMessage = message;
            }
      
    private string gridMessage = null;
    protected void RadGrid1_DataBound(object sender, EventArgs e)
            {
                if (!string.IsNullOrEmpty(gridMessage))
                {
                    DisplayMessage(gridMessage);
                }
            }

    Thanks,
    Princy
  5. Allen
    Allen avatar
    23 posts
    Member since:
    Apr 2013

    Posted 25 Jun 2013 Link to this post

    Hi Princy,

    Thank you so much. But that is not what I want. I need single click row not double click.

    I want to implement that if you click one row,then you can edit, And you click another row, the row you just edited will update and the new row will go into edit mode.

    Thank you.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2013 Link to this post

    Hi Allen,

    Please remove the OnRowDblClick, and change the OnRowClick event in JS as follows to obtain the edit on single click .The rest of the code remains the same.

    JS:
    function RowClick(sender, eventArgs)
     {
        if (editedRow && hasChanges)
           {
            hasChanges = false;
            if (confirm("Update changes?"))
               {
                $find("<%= RadGrid1.ClientID %>").get_masterTableView().updateItem(editedRow);
               }
            }
        else
            {
            editedRow = eventArgs.get_itemIndexHierarchical();
            $find("<%= RadGrid1.ClientID %>").get_masterTableView().editItem(editedRow);
            }
     }

    Thanks,
    Princy
  8.
  9. Allen
    Allen avatar
    23 posts
    Member since:
    Apr 2013

    Posted 25 Jun 2013 Link to this post

    Thank you so much Pirncy,

    I have tired that before. But the update event cannot fired. Since those event cannot be updated at the same time.

  11. Allen
    Allen avatar
    23 posts
    Member since:
    Apr 2013

    Posted 25 Jun 2013 Link to this post

    Thank you so much Pirncy,

    I have tired that before. But the update event cannot fired. Since those event cannot be updated at the same time.

  13. Eyup
    Admin
    Eyup avatar
    4014 posts

    Posted 28 Jun 2013 Link to this post

    Hello Allen,

    Please check out the new in-built Batch editing functionality of RadGrid:
    http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/batchediting/defaultcs.aspx

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  15. Imran
    Imran avatar
    1 posts
    Member since:
    Sep 2013

    Posted 28 Mar 2016 in reply to Eyup Link to this post

    I got the same work to do. When clicked on row that row should be changed to editable form so that the user can directly type into it. But this has to be done for details table. 

    My telerik version doesn't support batch editing. So need some code here please.

    Thanks in advance.

  17. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 30 Mar 2016 Link to this post

    Hi Imran,

    Implementing the requested functionality with older versions will be really difficult, especially for hierarchical RadGrid. Nevertheless, you can take a look at the following help article that demonstrates how to put all items in edit mode:
    Another option is to place the editors within the ItemTemplate directly and retrieve the values on server-side from the editors when you need to perform the update.

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top