Grid view edit control in row

[Senthil ramna]

i have a requirement wherein i need to edit the control in radgrid row itself i.e. in all the examples involving here manual edit or auto events when we click edit the control to which it is binded comes below like in the attached image you can see that when i click edit the column status comes below with an update and cancel button.
what i need to accomplish is i need that control in this case dropdown list in the same row and not below, could any of you guys please guide me with this.
I have done it using Grid view using the row edit command something like this

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
   {
       string name,idval;
       name = ((Label)GridView1.Rows[e.NewEditIndex].FindControl("lbl_trainer")).Text ;
       idval = ((Label)GridView1.Rows[e.NewEditIndex].FindControl("lbl_trainerid")).Text;

       DropDownList1.Enabled = false;
       GridView1.EditIndex = e.NewEditIndex;
       bind();
       DropDownList drp_trg = (DropDownList)GridView1.Rows[e.NewEditIndex].FindControl("drp_trg");
       drp_trg.SelectedIndex = drp_trg.Items.IndexOf(new ListItem(name, idval));
   }

source looks something like this...

<asp:GridView ID="GridView1" runat="server" Width="100%" EmptyDataRowStyle-HorizontalAlign="center" AutoGenerateColumns="False" AlternatingItemStyle-CssClass="Gridalt" CssClass="Gridrow" DataKeyNames="progname,sch_no"
        OnRowCancelingEdit="GridView1_RowCancelingEdit"
        OnRowEditing="GridView1_RowEditing"
        OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound" >
                            <Columns>
                                                                <asp:TemplateField HeaderText="Status">
 <EditItemTemplate>
          <asp:DropDownList ID="grd_drp_status" runat="server" SelectedValue='<%# Bind("status") %>' >
         <asp:ListItem Selected="True">Scheduled</asp:ListItem>
         <asp:ListItem>Completed</asp:ListItem>
         <asp:ListItem>Cancelled</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
        <asp:Label ID="lbl_status" runat="server" Width="100%" Text='<%# Bind("status") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</asp:GridView>

i want to accomplish the same thing in Radgrid could you please guide me through this....
and p.s i am using Radgrid version 2009.1.311.35

[Shinu]

Hello Senthil,


To display the grid column editors inline when the grid switches into edit mode, change the table view's EditMode property to "InPlace".
This is demonstrated here: Automatic Operations

And use GridDropdDownColumn in order to show DropDownList control when editing the grid. Also you can set the ReadOnly property of other columns to "True", to prevent editing.



-Shinu.

[Senthil ramna]

Shinu thanks a lot but could you provide me with an example for manual update/edit in Radgrid, cause all i found was this example which is not working out for me http://www.telerik.com/community/code-library/aspnet-ajax/grid/manual-insert-update-delete-operations-using-auto-generated-editform-with-sql-statements-from-the-code-behind.aspx

thanks again for your help...

[Princy]

Hello,


The grid in the code library uses EditMode "EditForms". Since you are using EditMode as "InPlace", you need to use GridDataInsertItem instead of GridEditFormInsertItem.
In place
Edit forms


Could you point out where you are getting error, when trying to manually insert/update the grid?

Thanks,
Princy.

[Senthil ramna]

in the updatecommand event
protected

 

void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)

 

{
    

 

 

//Get the GridEditableItem of the RadGrid

GridEditableItem editedItem = e.Item as GridEditableItem;

//Get the primary key value using the DataKeyValue.

string EmployeeID = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["EmployeeID"].ToString();

//Access the textbox from the edit form template and store the values in string variables.

string LastName = (editedItem["LastName"].Controls[0] as TextBox).Text;

string FirstName = (editedItem["FirstName"].Controls[0] as TextBox).Text;

string Title = (editedItem["Title"].Controls[0] as TextBox).Text;

string Address = (editedItem["Address"].Controls[0] as TextBox).Text;

string City = (editedItem["City"].Controls[0] as TextBox).Text;

 

}

(editedItem["City"].Controls[0] as TextBox).Text;

i have a dropdownlist instead of textbox and the city is datafield right so in mycase i have an item template so what should i add there.

also if you could tell me how to validate my dropdown list it wold help a lot
this is my source

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True"
                AllowSorting="True" AutoGenerateColumns="False" Width="97%" OnNeedDataSource="RadGrid1_NeedDataSource"
                OnUpdateCommand="RadGrid1_UpdateCommand">
                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                <MasterTableView DataKeyNames="Project_code" GridLines="None" Width="100%" EditMode="InPlace" >
                    <Columns>
                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="imagebutton" />
                            <telerik:GridTemplateColumn HeaderText="Project Code" UniqueName="Project_code">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_project_code" runat="server" Text='<%# Bind("Project_code") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Project Name" UniqueName="Project_name">
                                 <ItemTemplate>
                                    <asp:Label ID="lbl_project_name" runat="server" Text='<%# Bind("Project_name") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn HeaderText="Status" UniqueName="Status">
                                <EditItemTemplate>
                                    <asp:DropDownList ID="cboStatus" runat="server">
                                        <asp:ListItem>Select</asp:ListItem>
                                        <asp:ListItem>Active</asp:ListItem>
                                        <asp:ListItem>Pending</asp:ListItem>
                                        <asp:ListItem>Delayed</asp:ListItem>
                                    </asp:DropDownList>
                                </EditItemTemplate>
                                <ItemTemplate >
                                    <asp:Label ID="lbl_status" runat="server"  Text='<%# Bind("Project_status") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    <EditFormSettings ColumnNumber="2" CaptionFormatString="Edit details for employee with ID {0}"
                        CaptionDataField="Project_code">
                        <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle ></FormCaptionStyle>
                        <FormMainTableStyle CellSpacing="0" CellPadding="3" Width="100%" />
                        <FormTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="2"
                            Height="110px" Width="100%" />
                        <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="100%" BackColor="#EEF2EA"></FormStyle>
                        <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right" ></FormTableButtonRowStyle>
                    </EditFormSettings>
                    <ExpandCollapseColumn Visible="False">
                        <HeaderStyle Width="19px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                </MasterTableView>
            </telerik:RadGrid>

this is code behind update command

protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
   {
       //Get the GridEditableItem of the RadGrid
       GridEditableItem editedItem = e.Item as GridEditableItem;
       //Get the primary key value using the DataKeyValue.
       string projectcode = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["Project_code"].ToString();
       //Access the DROPDOWN from the edit form template and store the values in string variables.
       string status = (editedItem["Status"].Controls[0] as DropDownList).SelectedItem.Text;
       try
       {
           //Open the SqlConnection
           SqlConnection.Open();
           //Update Query to update the Datatable
           string updateQuery = "UPDATE tbl_project_details SET Project_status = '"+ status +"' WHERE Project_code = '"+ projectcode +"'";
           SqlCommand.CommandText = updateQuery;
           SqlCommand.Connection = SqlConnection;
           SqlCommand.ExecuteNonQuery();
           //Close the SqlConnection
           SqlConnection.Close();
       }
       catch (Exception ex)
       {

       }
   }

thanks for the help...

[Princy]

Hello Senthil,

In order to get the selected value of DropDownList, access the control and typecast to DropDownList as shown below.

C#:

protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
   {
       //Get the GridEditableItem of the RadGrid
       GridEditableItem editedItem = e.Item as GridEditableItem;
      //Access the DROPDOWN from the edit form template and store the values in string variables.
       string status = (editedItem["Status"].FindControl("cboStatus") as DropDownList).SelectedItem.Text;
       . . . . . . . . . . . . . . . .
   }

You can validate the DropDownList using RequiredFieldValidator like below.

ASPX:

<telerik:GridTemplateColumn HeaderText="Status" UniqueName="Status">
    <EditItemTemplate>
        <asp:DropDownList ID="cboStatus" runat="server">
            <asp:ListItem>Select</asp:ListItem>
            <asp:ListItem>Active</asp:ListItem>
            <asp:ListItem>Pending</asp:ListItem>
            <asp:ListItem>Delayed</asp:ListItem>
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" Text="(Required)" InitialValue="Select"
            ControlToValidate="cboStatus" runat="server" />
    </EditItemTemplate>
 </telerik:GridTemplateColumn>

Thanks,
Princy.

[Senthil ramna]

Thanks Princy for the reply but i am facing a new problem
this is my grid

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" DataSourceID="SqlDataSource1"
                          AutoGenerateColumns="False"
                    Skin="Web20" AutoGenerateEditColumn="True"
                    onupdatecommand="RadGrid1_UpdateCommand"
                    oneditcommand="RadGrid1_EditCommand" onitemdatabound="RadGrid1_ItemDataBound" >
                    <MasterTableView Width="100%" DataKeyNames="Project_code" EditMode="InPlace" >
                        <Columns>

                            <telerik:GridTemplateColumn HeaderText="Project Code" ItemStyle-Width="27%">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_project_code" runat="server" Text='<%# Bind("Project_code") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Project Name" ItemStyle-Width="23%">
                                 <ItemTemplate>
                                    <asp:Label ID="lbl_project_name" runat="server" Text='<%# Bind("Project_name") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Status" ItemStyle-Width="25%">
                                <EditItemTemplate>
                                    <asp:DropDownList ID="cboStatus" runat="server" AppendDataBoundItems="true"  DataSourceID="sqldatasource2" >
                                        <%--<asp:ListItem>Select</asp:ListItem>
                                        <asp:ListItem>Active</asp:ListItem>
                                        <asp:ListItem>Complete</asp:ListItem>
                                        <asp:ListItem>Visible to Managers only</asp:ListItem>--%>
                                    </asp:DropDownList>
                                </EditItemTemplate>
                                <ItemTemplate >
                                    <asp:Label ID="lbl_status" runat="server"  Text='<%# Bind("Project_status") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>

                        </Columns>

<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn1"  UpdateImageUrl="images/updating.gif" ItemStyle-Width="20%"  EditImageUrl="images/edit.gif" ></EditColumn>

</EditFormSettings>
                    </MasterTableView>
                </telerik:RadGrid>

i have added a datasource to bind the list items in the dropdownlist.

so when in edit mode i am not getting the value of the dropdown instead i am getting system.data.datarowview
this is what i did in my code behind but i am kind not understanding where i am going wrong...

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem gridEditFormItem = (GridEditFormItem)e.Item;
            DropDownList dropDownList = (DropDownList)gridEditFormItem["lbl_status"].FindControl("cboStatus");
            dropDownList.DataSourceID = "sqldatasource2";
            dropDownList.DataTextField = "Project_status";
            dropDownList.DataValueField = "Project_status";
            dropDownList.DataBind();
        }
    }

any help is appreciated...

[Princy]

Hello Senthil,

You can easily achieve this by setting the DataTextField and DataValueField of DropDownList from mark up like below.

ASPX:

<telerik:GridTemplateColumn HeaderText="Status" UniqueName="Status">
    <EditItemTemplate>
         <asp:DropDownList ID="cboStatus" runat="server" AppendDataBoundItems="true" DataSourceID="sqldatasource3" DataTextField="Project_status" DataValueField="Project_status">
         </asp:DropDownList>
     </EditItemTemplate>
</telerik:GridTemplateColumn>

Or if you want to populate the DripDownList from code behind, try the following code snippet.

ASPX:

<telerik:GridTemplateColumn HeaderText="Status" UniqueName="Status">
    <EditItemTemplate>
         <asp:DropDownList ID="cboStatus" runat="server" AppendDataBoundItems="true" >
         </asp:DropDownList>
     </EditItemTemplate>
</telerik:GridTemplateColumn>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditableItem && e.Item.IsInEditMode)
       {
           GridEditableItem gridEditFormItem = (GridEditableItem)e.Item;
           DropDownList dropDownList = (DropDownList)gridEditFormItem.FindControl("cboStatus");
           dropDownList.DataSourceID = "sqldatasource2";
           dropDownList.DataTextField = "Project_status";
           dropDownList.DataValueField = Project_status";
           dropDownList.DataBind();
       }
   }

Thanks,
Princy.

[Senthil ramna]

Thanks for the quick response Princy.
Sorry for this but i keep getting this error in ItemDataBound event
DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'Project_status'.
Can you suggerst something???

[Senthil ramna]

Thanks everyone for helping me out.
Princy thanks once again.
Got it to work problem was the field name that was given in the table and the field name that i was passing in the text and the value field did not match. Glad this is over and excuse the carelessness on my part.