This is a migrated thread and some comments may be shown as answers.

Editing cells in RadGrid

4 Answers 694 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Nick asked on 11 Jun 2012, 09:07 PM

Hello,

I am very new to .NET and the telerik UI (5 days of experience) and I am working with radgrid. I know many people have posted questions about this before, but I still can't seem to figure it out. I have a grid that gets its original data from a database. I want to be able to edit each cell individually and update the data to the database. I have been trying for hours but I can't get any of the cells to edit or even get any handlers to fire. Thank you in advance.

ASP.NET code:

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadGrid ID="GrdConfig" runat="server" CellSpacing="0" GridLines="None"

EnableLinqExpressions="False" oncolumncreated="GrdConfig_ColumnCreated"

CssClass="MyRadGridCssClass" AllowPaging="True">

<ClientSettings>

<Resizing AllowColumnResize="True" />

<Scrolling AllowScroll="True" />

</ClientSettings>

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

C# code:

public partial class Configurations : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

                

                 ** Code to extract data from database goes here**

GrdConfig.DataSource = data;

GrdConfig.DataBind();

GridGroupByExpression expression = GridGroupByExpression.Parse("ConfigFile[Config File:] Group by ConfigFile");

GrdConfig.MasterTableView.GroupByExpressions.Add(expression);

GridColumn cConfig = GrdConfig.MasterTableView.GetColumnSafe("ConfigFile");

cConfig.Visible = false;

GrdConfig.Rebind();

}

protected void GrdConfig_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

if (e.Column is GridGroupSplitterColumn)

{

e.Column.HeaderStyle.Width = Unit.Pixel(1);

e.Column.HeaderStyle.Font.Size = FontUnit.Point(1);

e.Column.ItemStyle.Width = Unit.Pixel(1);

e.Column.ItemStyle.Font.Size = FontUnit.Point(1);

e.Column.Resizable = false;

}

protected void GrdConfig_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridGroupHeaderItem)

{

GridGroupHeaderItem groupHeader = (GridGroupHeaderItem)e.Item;

groupHeader.Font.Bold = true;

}

Please Note: This is the code that generates the grid using the data from the database. I need to modify this code to make the grid editable. Thank you

4 Answers, 1 is accepted

answered on 12 Jun 2012, 04:04 AM

Hi Nick,

RadGrid provides AutoGenerateEditColumn Property which specifies whether the table views in the grid automatically insert a GridEditCommandColumn column before any auto-generated data columns to allow the user to edit the data in the grid rows. This default behavior can be overridden by the AutoGenerateEditColumn property of any GridTableView in the grid.

ASPX:

<telerik:RadGrid ID="GrdConfig" runat="server" CellSpacing="0" GridLines="None" EnableLinqExpressions="False" oncolumncreated="GrdConfig_ColumnCreated" CssClass="MyRadGridCssClass" AllowPaging="True" AutoGenerateEditColumn="true">

. . .

Take a look into this help documentation about RadGrid's smart tags.

You can update the edited data to the database in UpdateCommand event.

C#:

protected void GrdConfig_UpdateCommand(object sender, GridCommandEventArgs e)

{

// code to update the RadGrid

}

Or please look into this demo which specifies Automatic update, delete and insert operation in RadGrid.

Thanks,
Shinu.

Accepted

answered on 15 Jun 2012, 06:16 AM

Hi Nick,

When you click the Update button the UpdateCommand handler is thrown. In the command handler you have a GridCommandEventArgs object which features an Item property. So, e.Item will give you access to the edit form of the item currently being updated. That edit form contains the new values to be written to the database. So, the only thing that you need to do is get those values. And this is easily done through the ExtractValues method of the GridEditableItem object: ((GridEditableItem)e.Item).ExtractValues(newValues) will populates newValues with a key/value collection of column uniquenames/new values. The newValues object should be a Hashtable. Now that you have the new values, just use them to updated the database - leave the remaining to RadGrid as it will automatically rebind and display the new data.

Hope it helps.

Regards,
Tsvetoslav
the Telerik team

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 their blog feed now.