I like to make all column of radgrid table editable in asp.net c#

Question

How to make all the row cells editable on click of the edit button. Following is the code snipped. Any help would be appreciated. On click of btnEdit_Click event, i want the radgrid row cells editable so that use can update existing data. i dont want to add inline edit button for each row in radgrid, instead on single edit button, all row cells should be editable based on their data type.

                <asp:ImageButton runat="server" ID="btnEdit" ImageUrl="~/images/Buttons/Edit.gif"
            OnClick="btnEdit_Click" />

                <radG:RadGrid ID="grdAction" runat="server" AllowPaging="True" Width="100%" EnableAJAXLoadingTemplate="true"
                CellPadding="1" CellSpacing="1" AllowSorting="True" ShowHeader="false" OnNeedDataSource="grd_View_NeedDataSource"
                OnDetailTableDataBind="grd_View_DetailTableDataBind" PageSize="11" MasterTableView-GroupsDefaultExpanded="true"
                OnPreRender="grd_View_PreRender" AllowMultiRowSelection="true" MasterTableView-EditFormSettings-EditColumn-AutoPostBackOnFilter="false"
                Skin="Glassy" AllowMultiRowEdit="true">
                <MasterTableView AutoGenerateColumns="False" HierarchyDefaultExpanded="true">
                    <AlternatingItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                    <Columns>
                        <radG:GridTemplateColumn UniqueName="TemplateColumn" SortExpression="VSGroupBy">
                            <ItemTemplate>
                                
                                <asp:Label ID="lblStatus" Visible="false" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, FIRSTGROUP).ToString() %>'> </asp:Label>
                                <asp:Label ID="lblStatus1" runat="server" Text='<%# GetGroupBy(DataBinder.Eval(Container.DataItem, FIRSTGROUP).ToString()) %>' />
                                <asp:Label ID="lblcnt" runat="server" Text='' />
                            </ItemTemplate>
                            
                            <ItemStyle Width="100%" />
                        </radG:GridTemplateColumn>

                    </Columns>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="19px" />
                    </ExpandCollapseColumn>

                    <DetailTables>
                        <radG:GridTableView Width="100%" runat="server" AutoGenerateColumns="False" ShowHeader="True"
                            HierarchyLoadMode="ServerBind">
                            <HeaderStyle CssClass="GridView-HeaderStyle" Width="10%" />

                            <Columns>
                                
                                <radG:GridTemplateColumn HeaderText="Header1" SortExpression="Header1">
                                    <ItemTemplate>
                                        <asp:Label ID="lblItem1" runat="server" Text='<%# Eval("RootCause").ToString()+ "&nbsp" %>'></asp:Label>
                                    </ItemTemplate>
                                    
                                    <ItemStyle VerticalAlign="Top" />
                                    <HeaderStyle Width="22%" Wrap="True" />
                                </radG:GridTemplateColumn>
                                <radG:GridTemplateColumn HeaderText="header2" SortExpression="" ItemStyle-HorizontalAlign="Center">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAgree" runat="server" CssClass='<%# Eval("lblitem2").ToString()=="N"?"AgreeStyles": ""%>' Text='<%# Eval("lblitem2").ToString()+ "&nbsp" %>'></asp:Label>
                                    </ItemTemplate>
                                    <ItemStyle VerticalAlign="Top" />
                                    <HeaderStyle Width="3%" Wrap="True" />
                                </radG:GridTemplateColumn>
                                <radG:GridTemplateColumn HeaderText="header3" SortExpression="What">
                                    <ItemTemplate>
                                        <asp:Label ID="lblitem3" runat="server" Text='<%# UIHelper.TextArea2HTML(Eval("lblitem3").ToString())+ "&nbsp" %>'></asp:Label>
                                    </ItemTemplate>
                                    
                                    <ItemStyle VerticalAlign="Top" />
                                    <HeaderStyle Width="15%" Wrap="True" />
                                </radG:GridTemplateColumn>
                                
                                
                                
                                
                            </Columns>

                            <PagerStyle Mode="NumericPages" Position="TopAndBottom" />
                            <EditFormSettings>
                                <EditColumn UniqueName="EditCommandColumn">
                                </EditColumn>
                            </EditFormSettings>
                            <AlternatingItemStyle CssClass="GridView-ItemStyle" />
                            <GroupHeaderItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                            <ExpandCollapseColumn ButtonType="ImageButton" UniqueName="ExpandColumn" Visible="False">
                                <HeaderStyle Width="19px" />
                            </ExpandCollapseColumn>
                            <ItemStyle CssClass="GridView-ItemStyle" />
                            <RowIndicatorColumn UniqueName="RowIndicator" Visible="False">
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <NoRecordsTemplate>
                                There is no document to display
                            </NoRecordsTemplate>
                        </radG:GridTableView>
                    </DetailTables>

                    <NoRecordsTemplate>
                        There is no Actions to display
                    </NoRecordsTemplate>
                    <ExpandCollapseColumn Visible="False">
                        <HeaderStyle Width="19px" />
                    </ExpandCollapseColumn>
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>

                    <ItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                </MasterTableView>
                <PagerStyle Mode="NumericPages" PageButtonCount="20" />

                <HeaderStyle CssClass="GridView-HeaderStyle" />
                <GroupHeaderItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                <ItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                <AlternatingItemStyle CssClass="GridView-GroupHeaderItemStyle" />
                <PagerStyle Mode="NumericPages" Position="TopAndBottom" PageButtonCount="20" />
                <FilterMenu HoverBackColor="LightSteelBlue" HoverBorderColor="Navy" NotSelectedImageUrl="~/RadControls/Grid/Skins/Default/NotSelectedMenu.gif"
                    SelectColumnBackColor="Control" SelectedImageUrl="~/RadControls/Grid/Skins/Default/SelectedMenu.gif"
                    TextColumnBackColor="Window"></FilterMenu>
                <ClientSettings>
                    <Selecting AllowRowSelect="true"></Selecting>
                </ClientSettings>
            </radG:RadGrid>

Answer 1

Ok, several issues. You are (it looks like) using a data pager - this can compliate things quite a bit.

Next, you using radgrid - so, a large % of the posters here - they may well not have an answer.

But, I do think the idea of tossing up a grid - let user edit, and then a SINGLE saved for all edits makes a WHOLE lot of sense. In fact, given that UI, then really no need for a edit buttion. all you really need/want is a save button, and then say a cancel/undo edits.

A really neat-o trick for above? Just persist the data source. Once you do that?

Then you allow the user to edit the grid - (no code required).

Then on save, you move grid edits back to the data talbe, and then in ONE NICE EASY update, send the data table back to the database. This results not only in VERY little code, but also provivdes a reather nice and un-cluttered UI to the user.

So, lets use a GridView. In fact, I OFTEN suggest to use a listview. Why? Well, with gridview (and the older datagrid), for each column control you drop in, you MUST put that standard control inside of "template" tags - so you require more (messy) markup.

But, lets do this with a simple gridview, and as you can see, not only is this easy, but we ALSO get .net to create the update statetments, and this we "leverage" the built in system to do all the dirty work.

So, say we have this grid:

<style> .borderhide input {border:none}</style>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" 
            cssclass="table table-hover borderhide">

            <Columns>
                <asp:TemplateField HeaderText ="First Name">
                    <ItemTemplate>
                        <asp:TextBox ID="txtFirst" runat="server" Text = '<%# Eval("FirstName") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText ="Last Name">
                    <ItemTemplate>
                        <asp:TextBox ID="txtLast" runat="server" Text = '<%# Eval("LastName") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText ="City">
                    <ItemTemplate>
                        <asp:TextBox ID="txtCity" runat="server" Text = '<%# Eval("City") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                  <asp:TemplateField HeaderText ="Active">
                    <ItemTemplate>
                        <asp:CheckBox ID="Active" runat="server" Checked = '<%# Eval("Active") %>'></asp:CheckBox>
                    </ItemTemplate>
                </asp:TemplateField>


            </Columns>
        </asp:GridView>
            <asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn-primary" OnClick="cmdSave_Click1" />

            <asp:Button ID="cmdAdd" runat="server" Text="Add Row" CssClass="btn-primary" style="margin-left:20px"/>
            <br />

Ok, not much markup.

So, now here is our code to fill the grid:

    private DataTable rstPeople = new DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
        LoadGrid();
        ViewState["MyTable"] = rstPeople;
            Session["test"] = "hello";

    }
    else
        rstPeople = (DataTable)ViewState["MyTable"];

    }
    public void LoadGrid()
    {
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * from People", 
                                    new SqlConnection(Properties.Settings.Default.TEST4)))
        {
            cmdSQL.Connection.Open();

            rstPeople.Load(cmdSQL.ExecuteReader());

            GridView1.DataSource = rstPeople;
            GridView1.DataBind();
        }
    }

Ok, but NOTE how we load the grid, but ALSO save (perist) the data table.

So, we now have this:

Ok, so you are now free to tab around - edit - it feels ALMOST like a spreadsheet.

Now, here is the save button to send the WHOLE set of edits back to database in one shot:

    protected void cmdSave_Click1(object sender, EventArgs e)

    {
        // pull grid rows back to table.

        foreach (GridViewRow rRow in GridView1.Rows)
        {
            int RecordPtr = rRow.RowIndex;

            DataRow OneDataRow;

            OneDataRow = rstPeople.Rows[RecordPtr];
            OneDataRow["FirstName"] = ((TextBox)rRow.FindControl("txtFirst")).Text;
            OneDataRow["LastName"] = ((TextBox)rRow.FindControl("txtLast")).Text;
            OneDataRow["City"] = ((TextBox)rRow.FindControl("txtCity")).Text;
            OneDataRow["Active"] = ((CheckBox)rRow.FindControl("Active")).Checked;
        }

        // now send table back to database with updates

        string strSQL = "SELECT ID, FirstName, LastName, City, Active from People WHERE ID = 0";

        using (SqlCommand cmdSQL = new SqlCommand(strSQL, 
                                    new SqlConnection(Properties.Settings.Default.TEST4)))
        {
            cmdSQL.Connection.Open();
            SqlDataAdapter daupdate = new SqlDataAdapter(cmdSQL);
            SqlCommandBuilder cmdBuild = new SqlCommandBuilder(daupdate);

            daupdate.Update(rstPeople);
        }
    }

So, we send grid back to table. We then send table back to database.

As you can see, this approach saves buckets of code.

the ONLY addtional issues here?

You are using a datapager. However, that means for each page navigation, re-bind the grid from that persisted table - do NOT re-load the data table from the database each time. But, a data pager complicates this VERY much, since on page navigation, we in theory would have to save the changes on that displayed page back to the table (we don't need to send table back to database, but we DO need to send possible changes from grid back to table. Thus, since navigation comes from that table, then this should work - and we not yet had to hit save to send persisted table back to database.

And note that the gridrow (and most controls) can return either the current page index or the overall index location of the row. So, I not done above with a datapager, but it should be possible to work.

And no real need for a edit button - I mean, what would edit do anyway? I don't think it is required - and just messes up the simple UI anyway.

And of course we should provide a cancel/undo. And all that would do is call LoadGrid again, and re-load grid from the database.

The above approaches should work with radGrid - but I never used it.

As noted, above idea works with GridView, listview and even older datagrid.

My preferred choice out of the 3 is actually list view, since as noted, you don't have to put messy template tags around each plain jane asp.net controls (such as text box, or as per above also a check box).

and the add row code in above, to allow adding a new row?

we have this:

   protected void cmdAdd_Click(object sender, EventArgs e)
    {

        // add a new row to the grid

        DataRow OneRow = rstPeople.Rows.Add();
        GridView1.DataSource = rstPeople;
        GridView1.DataBind();
    }

Once again - really simple!!! and again it was easy since we operate against the table, and then just re-bind against the grid.