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

Programmatic Creation Columns

11 Answers 211 Views

Grid

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

AMF asked on 25 Nov 2011, 11:44 AM

Hi all,

Currently I'm creating my Grid at runtime. The problem is that my imagebuttons don't peform the commands.
The DeleteCommand event won't fire, and the UpdateCommand also won't fire.

Can anyone tell me what I'm doing wrong?

I'm using the following code to create my grid:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="400px" Width="990px">

<telerik:RadGrid ID="DataGrid" runat="server" OnDeleteCommand="DataGrid_DeleteCommand"

OnNeedDataSource="DataGrid_NeedDataSource" OnUpdateCommand="DataGrid_UpdateCommand"

AllowPaging="True" AllowSorting="True" PageSize="20"

GridLines="Horizontal" ShowFooter="True"

ShowStatusBar="True" Width="100%" CellSpacing="0"

AutoGenerateColumns="False" onitemcommand="DataGrid_ItemCommand">

<MasterTableView DataKeyNames="id">

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

CS:

DataTable dtFields = DataManager.Instance.GetGridData(0, 1, this.module.DataObject, this.module.DataSource);

foreach (DataColumn dc in dtFields.Columns)

{

if (dc.ColumnName == "id")

continue;

GridBoundColumn gbc = new GridBoundColumn();

gbc.HeaderText = dc.ColumnName;

gbc.DataField = dc.ColumnName;

this.DataGrid.MasterTableView.Columns.Add(gbc);

}

The edit & delete columns:

GridEditCommandColumn gecc = new GridEditCommandColumn();

gecc.ButtonType = GridButtonColumnType.ImageButton;

gecc.EditImageUrl = "~/Images/Icons/87._16x16.png";

this.DataGrid.MasterTableView.Columns.Add(gecc);

GridButtonColumn gbc = new GridButtonColumn();

gbc.ButtonType = GridButtonColumnType.ImageButton;

gbc.ImageUrl = "~/Images/Icons/7._16x16.png";

gbc.CommandName = "Delete";

gbc.ConfirmText = "Weet u zeker dat u dit item wilt verwijderen?";

gbc.ConfirmDialogType = GridConfirmDialogType.RadWindow;

gbc.ConfirmTitle = "Verwijderen";

this.DataGrid.MasterTableView.Columns.Add(gbc);

11 Answers, 1 is accepted

answered on 25 Nov 2011, 12:44 PM

Hello Amf,

Please try to add edit/delete column to the corresponding collection first, before the values for their properties are set and see if it makes any difference.

Note that to define the structure of a RadGrid control that is declared in the ASPX page, you could use the Page_Load event handler. Also columns and detail table should be added to the corresponding collection first, before the values for their properties are set. This is important because no ViewState is managed for the object before it has been added to the corresponding collection. More information about grid programmatic creation can be found here.

Kind regards,
Pavlina
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

answered on 25 Nov 2011, 01:45 PM

Hi Pavlina,

Thanks for your reply. I changes the order, I was already using the page_load
But it doesn't changes anything.

Code from the page_Load:

GridEditCommandColumn gecc = new GridEditCommandColumn();

this.DataGrid.MasterTableView.Columns.Add(gecc);

gecc.ButtonType = GridButtonColumnType.ImageButton;

gecc.EditImageUrl = "~/Images/Icons/87._16x16.png";

GridButtonColumn gbc = new GridButtonColumn();

this.DataGrid.MasterTableView.Columns.Add(gbc);

gbc.ButtonType = GridButtonColumnType.ImageButton;

gbc.ImageUrl = "~/Images/Icons/7._16x16.png";

gbc.CommandName = "DeleteSelected";

gbc.ConfirmText = "Weet u zeker dat u dit item wilt verwijderen?";

gbc.ConfirmDialogType = GridConfirmDialogType.RadWindow;

gbc.ConfirmTitle = "Verwijderen";

answered on 25 Nov 2011, 05:15 PM

RadGrid-Update-Delete-command.zip

Hello Amf,

I tested the provided code in a sample project and UpdateCommand fires as expected, but in order to fire DeleteCommand you should set CommandName property to "Delete" instead of DeleteSelected:

gbc.CommandName = "Delete";

Please examine the attached website and let me know if it helps or you need additional assistance.

Best wishes,
Pavlina
the Telerik team

answered on 28 Nov 2011, 11:27 AM

Screen2.PNG

Screen1.PNG

Thanks for your reply Ravlina,

I fixed the problems with the Edit en Delete command, However, when i click on a delete or edit button, my grid refreshes the data, but all my columns stay empty.

My pageinit code:

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

if (!this.IsPostBack)

{

DataTable dtFields = DataManager.Instance.GetGridData(0, 1, this.module);

foreach (DataColumn dc in dtFields.Columns)

{

if (dc.ColumnName == "id")

continue;

if (this.module.DataRelations.ContainsKey(dc.ColumnName))

continue;

GridTemplateColumn gtc = new GridTemplateColumn();

this.DataGrid.MasterTableView.Columns.Add(gtc);

gtc.ItemTemplate = new CustomItemTemplateColumn(dc.ColumnName);

gtc.EditItemTemplate = new CustomEditItemTemplate(dc.ColumnName);

gtc.HeaderText = dc.ColumnName;

gtc.DataField = dc.ColumnName;

}

if (this.role.Edit)

{

GridEditCommandColumn gecc = new GridEditCommandColumn();

this.DataGrid.MasterTableView.Columns.Add(gecc);

gecc.ButtonType = GridButtonColumnType.ImageButton;

gecc.EditImageUrl = "~/Images/Icons/87._16x16.png";

}

if (this.role.Delete)

{

GridButtonColumn gbc = new GridButtonColumn();

this.DataGrid.MasterTableView.Columns.Add(gbc);

gbc.ButtonType = GridButtonColumnType.ImageButton;

gbc.ImageUrl = "~/Images/Icons/7._16x16.png";

gbc.CommandName = "Delete";

gbc.ConfirmText = "Weet u zeker dat u dit item wilt verwijderen?";

gbc.ConfirmDialogType = GridConfirmDialogType.RadWindow;

gbc.ConfirmTitle = "Verwijderen";

}

My CustomItemTemplate:

public class CustomItemTemplateColumn : ITemplate

{

private String columnName;

public CustomItemTemplateColumn(String columnName)

{

this.columnName = columnName;

}

public void InstantiateIn(Control container)

{

Label lbl = new Label();

lbl.ID = this.columnName + "_Label";

lbl.DataBinding += new EventHandler(lbl_DataBinding);

container.Controls.Add(lbl);

}

private void lbl_DataBinding(object sender, EventArgs e)

{

Label lbl = sender as Label;

GridDataItem container = (GridDataItem)lbl.NamingContainer;

lbl.Text = ((DataRowView)container.DataItem)[this.columnName].ToString();

}

My CustomEditTemplate:

public class CustomEditItemTemplate : IBindableTemplate

{

private String columnName;

public CustomEditItemTemplate(String columnName)

{

this.columnName = columnName;

}

public IOrderedDictionary ExtractValues(Control container)

{

OrderedDictionary dictionary = new OrderedDictionary();

dictionary.Add(columnName, (container.FindControl(columnName + "_TextBox") as TextBox).Text);

return dictionary;

}

public void InstantiateIn(Control container)

{

TextBox txt = new TextBox();

txt.ID = columnName + "_TextBox";

txt.DataBinding += new EventHandler(txt_DataBinding);

container.Controls.Add(txt);

}

void txt_DataBinding(object sender, EventArgs e)

{

TextBox txt = sender as TextBox;

GridEditFormItem container = (GridEditFormItem)txt.NamingContainer;

txt.Text = ((DataRowView)container.DataItem)[columnName].ToString();

}

I attached 2 screens.
Screen 1 is the screen when I load the page. This is the way It should be
Screen 2 is the screen after I click the edit button. As you can see, my data is gone.

When I close the edit dialog, the grid refreshes its data, but all my columns still are empty.

answered on 29 Nov 2011, 06:39 PM

Hi Amf,

If RadGrid template columns are created programmatically, this must be done in Page_Init event, so that the template controls can be added to the ViewState. In this case as described in the programmatic creation help topic, when generating a grid in the Page_Init event handler, grid columns should be added to the Columns collection of the MasterTableView after their attributes are set. Please modify your project and let us know if you still have problems.

Regards,
Pavlina
the Telerik team

answered on 30 Nov 2011, 04:13 PM

New Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Portal.Master" AutoEventWireup="true"

CodeBehind="View.aspx.cs" Inherits="Portal.Presentation.View" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<asp:Panel ID="Panel1" runat="server">

<h1 id="pageHeader" runat="Server">

</h1>

</asp:Panel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="400px" Width="990px">

<telerik:RadGrid ID="DataGrid" runat="server" OnDeleteCommand="DataGrid_DeleteCommand"

OnNeedDataSource="DataGrid_NeedDataSource" OnUpdateCommand="DataGrid_UpdateCommand"

AllowPaging="True" AllowSorting="True" PageSize="20"

GridLines="Horizontal" ShowFooter="True"

ShowStatusBar="True" Width="100%" CellSpacing="0"

AutoGenerateColumns="False" Skin="WebBlue"

oninsertcommand="DataGrid_UpdateCommand" ShowGroupPanel="True">

<MasterTableView DataKeyNames="id" EditMode="PopUp" CommandItemDisplay="Top">

<CommandItemSettings ExportToPdfText="Export to PDF" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"

Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"

Visible="True">

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True" />

</MasterTableView>

<PagerStyle AlwaysVisible="True" Mode="Slider" />

<FilterMenu EnableImageSprites="False">

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Vista">

<WebServiceSettings>

<ODataSettings InitialContainerName="">

</ODataSettings>

</WebServiceSettings>

</HeaderContextMenu>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</asp:Content>

using System;

using System.Collections;

using Portal.Bussiness;

using Portal.Managers;

using Telerik.Web.UI;

using System.Data;

namespace Portal.Presentation

{

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

{

Module module;

Role role;

protected void Page_Load(object sender, EventArgs e)

{

if (this.module == null)

{

this.module = ModuleManager.Instance.GetModuleById(Convert.ToInt32(Request.Params["module"]));

this.module.DataRelations = DataManager.Instance.GetDataRelations(module.Id);

this.role = UserManager.Instance.GetUserRole(module.Id);

}

if (!this.role.View)

Response.Redirect("~/Presentation/NoRights.aspx");

}

protected void Page_Init(object sender, System.EventArgs e)

{

if (!this.IsPostBack)

{

if (String.IsNullOrEmpty(Request.Params["module"]))

Response.Redirect("~/Presentation/Default.aspx");

this.module = ModuleManager.Instance.GetModuleById(Convert.ToInt32(Request.Params["module"]));

this.module.DataRelations = DataManager.Instance.GetDataRelations(module.Id);

this.role = UserManager.Instance.GetUserRole(module.Id);

if (!this.role.View)

Response.Redirect("~/Presentation/NoRights.aspx");

this.pageHeader.InnerText = this.module.Name;

DataTable dtFields = DataManager.Instance.GetGridData(0, 1, this.module);

foreach (DataColumn dc in dtFields.Columns)

{

if (dc.ColumnName == "id")

continue;

if (this.module.DataRelations.ContainsKey(dc.ColumnName))

continue;

GridTemplateColumn gtc = new GridTemplateColumn();

gtc.ItemTemplate = new CustomItemTemplateColumn(dc.ColumnName);

gtc.EditItemTemplate = new CustomEditItemTemplate(dc.ColumnName);

gtc.HeaderText = dc.ColumnName;

gtc.DataField = dc.ColumnName;

gtc.UniqueName = dc.ColumnName;

DataGrid.MasterTableView.Columns.Add(gtc);

}

if (this.role.Edit)

{

GridEditCommandColumn gecc = new GridEditCommandColumn();

DataGrid.MasterTableView.Columns.Add(gecc);

gecc.ButtonType = GridButtonColumnType.ImageButton;

gecc.EditImageUrl = "~/Images/Icons/87._16x16.png";

}

if (this.role.Delete)

{

GridButtonColumn gbc = new GridButtonColumn();

DataGrid.MasterTableView.Columns.Add(gbc);

gbc.ButtonType = GridButtonColumnType.ImageButton;

gbc.ImageUrl = "~/Images/Icons/7._16x16.png";

gbc.CommandName = "Delete";

gbc.ConfirmText = "Weet u zeker dat u dit item wilt verwijderen?";

gbc.ConfirmDialogType = GridConfirmDialogType.RadWindow;

gbc.ConfirmTitle = "Verwijderen";

}

protected void DataGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataGrid.DataSource = DataManager.Instance.GetGridData(0, 10, this.module);

}

protected void DataGrid_UpdateCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

}

protected void DataGrid_DeleteCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

}

answered on 30 Nov 2011, 04:25 PM

screen3.PNG

Hi Pavlina,

When I add the edit and delete columns after there properties are set, no events are triggered when they are clicked. The only thing that happens is that next to the pager the loading image is shown (Screen3)