Rad grid click row for editing and updating

[Allen]

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.

[Princy]

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

[Allen]

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.

[Princy]

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

[Allen]

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.

[Allen]

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.

[Eyup]

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

[Imran]

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.

[Konstantin Dikov]

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:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/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