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

Add Delete Column Dynamically

12 Answers 483 Views

Grid

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

Farhan asked on 08 Dec 2011, 08:32 AM

I have created a dynamic grid in one of my forms that I am binding to a Datatable. What I want to know is how to add a Delete column, Iv enabled AllowAutomaticDeletes on my gridhow can I dynamically add a GridButtonColumn (its what I have used in all other pages in the app) and assign it to be the Right most column in the grid. I am adding it in my LoadGrid function, please look at the code, it adds column to the left side of all the columns that are generated and also does not show the Delete image called by the css class "MyImageButton" ??

DeleteColumn.ItemStyle.CssClass =

"MyImageButton";

I also added code to rebind to the grid in the NeedDataSource event as I read that for dynamically generated grids, the grid needs to be pulled from this event as well. But im adding the GridButtonColumn in the LoadGrid function only and this is called on (!Page.IsPostback). Can someone please tell me the correct way of adding a GridButtonColumn to a dynamically generated grid and how to get the correct order, the right most column and also any insight as to why the "MyImageButton" is not being loaded from codebehind? its working fine on other pages where i define all columns in the aspx page. Please let me know, your helps appreciated.

private void LoadGrid()

{

try

{

GridButtonColumn DeleteColumn = new GridButtonColumn();

ProuductsGrid.Columns.Add(DeleteColumn);

DeleteColumn.ButtonType = GridButtonColumnType.ImageButton;

DeleteColumn.Text = "Delete";

DeleteColumn.ConfirmDialogType = GridConfirmDialogType.RadWindow;

DeleteColumn.ConfirmTitle = "Delete";

DeleteColumn.ConfirmText = "Delete this Product?";

DeleteColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;

DeleteColumn.ItemStyle.CssClass = "MyImageButton";

ProductBL bl = new ProductBL();

ProuductsGrid.DataSource = bl.GetProductsByClient((Int32)Session["ClientID"]);

Product.DataBind();

}

protected void ProductGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

try

{

ProductBL bl = new ProductBL();

ProuductsGrid.DataSource = bl.GetProductsByClient((Int32)Session["ClientID"]);

Product.DataBind();

}

catch (Exception ex)

{

throw;

}

12 Answers, 1 is accepted

answered on 08 Dec 2011, 03:55 PM

Hi Princy thanks for your reply, It looks like it worked it added the column and I can see the delete image but Its adding it to the left side, I only have one column declared in the aspx page its the EditCommandColumn and its placing the Delete column next to it. All the autogenerated columns from the Datasource are being populated on the right hand side. I wanted to place this Delete column as the last column on the right hand side, Can you please tell me how to do this. I tried the following

protected void Page_Init(object sender, EventArgs e)

{

// code to create a Delete column programmatically

GridButtonColumn btncol = new GridButtonColumn();

btncol.ButtonType = GridButtonColumnType.ImageButton;

btncol.Text = "Delete";

btncol.CommandName = "Delete";

int columnCount = ProductsGrid.Columns.Count;

ProductsGrid.MasterTableView.Columns.AddAt(columnCount,btncol);

}

but the ProductsGrid.Columns.Count only returns 1, since I declared the Editcommandcolumn on the aspx page, it doesnt count all the AutoGeneratedColumn, I tried looking for the Count in all Grid Events I could think of but they didnt have the correct count. Please let mke know of how to Reorder the columns and place the deletecolumn at the very end on right side of the autogenerated columns Im sure this would be helpful to a lot of people trying to do the same thing. Thanks again for your help

answered on 09 Dec 2011, 04:42 PM

Hi Sebastian ok I checked the link you referenced and I have a statically declared grid that I am dynamically binding and adding the delete column to. Autogeneratecolumns is set to true. I need to move the dynamically created Delete column to the Right most side past all the dynamic created columns. Please look at the events for

ProductAvailabilityGrid_ColumnCreated

ProductAvailabilityGrid_PreRender

You will the commented out code where I am trying to get the Column order for the Delete column from Viewstate and Reorder it to be the last on the right side, but none of those approaches worked. So I am a little frustrated and posting the ASPX and C# page code so you can review and hopefully let me know how to create thecolumn and give it the correct column index. Please let me know if you need further information.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager" runat="server" EnableShadow="true" />

<telerik:RadAjaxManagerProxy ID="AvailabilityAMProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ProductAvailabilityGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ProductAvailabilityGrid" LoadingPanelID="RadAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="GridCarGroups">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="GridCarGroups" LoadingPanelID="RadAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server" >

<div style="text-align:center">

<br />

Show Filters:<input id="rad1" type="radio" name="showHideGroup" checked="checked" onclick="showFilterItem('<%=ProductAvailabilityGrid.ClientID %>')" /><label for="rad1">Yes</label>

<input id="rad2" type="radio" name="showHideGroup" onclick="hideFilterItem('<%=ProductAvailabilityGrid.ClientID %>')" /><label for="rad2">No</label>

</div>

</telerik:RadScriptBlock>

<br/>

<telerik:RadGrid runat="server" ID="ProductAvailabilityGrid"

AllowPaging="true"

AllowSorting="true" EnableLinqExpressions="false"

DataSourceID=""

oncolumncreated="ProductAvailabilityGrid_ColumnCreated"

OnItemCommand="ProductAvailabilityGrid_ItemCommand"

onitemdatabound="ProductAvailabilityGrid_ItemDataBound"

onneeddatasource="ProductAvailabilityGrid_NeedDataSource"

OnPreRender = "ProductAvailabilityGrid_PreRender"

>

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView

AutoGenerateColumns="true"

AllowAutomaticDeletes="true"

InsertItemPageIndexAction="ShowItemOnCurrentPage"

DataKeyNames="LocationId, AvailabilityDate"

CommandItemDisplay="Top"

EditMode="PopUp"

ViewStateMode="Enabled"

AllowMultiColumnSorting="true"

OverrideDataSourceControlSorting="true"

AllowFilteringByColumn = "true"

FilterItemStyle-HorizontalAlign="Left"

ShowFooter="true" >

<CommandItemSettings AddNewRecordText="Add Railcar Availability" ShowRefreshButton="false"/>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton"

UniqueName="EditCommandColumn">

<HeaderStyle></HeaderStyle>

</telerik:GridEditCommandColumn>

</Columns>

<EditFormSettings EditFormType="Template" CaptionFormatString="Edit Railcar Availability" InsertCaption="Add Railcar Availability" PopUpSettings-Width="600px" PopUpSettings-Height="300px" PopUpSettings-Modal="true" >

<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>

<FormTemplate>

<asp:Panel ID="Panel1" runat="server" DefaultButton="BtnSubmit" style="width:100%; height:100%">

<table id="tblEditPopup" style="width:100%; height:100%">

<tr id="trInsertDate">

<td class="edittbltdLabel">

<span>

Date:

</span>

</td>

<td class="edittbltdControl">

<asp:TextBox runat="server" ID="txtAddDate" ></asp:TextBox>

<asp:CalendarExtender runat="server" ID="CalAvailabilityExtender" TargetControlID="txtAddDate" Format="MM/dd/yyyy" ></asp:CalendarExtender>

</td>

</tr>

<tr id="trLocation">

<td class="edittbltdLabel">

<span>

Location:

</span>

</td>

<td class="edittbltdControl">

<telerik:RadComboBox ID="cboxClientOrigin" DataSourceID="ODSOrigins" runat="server"

HighlightTemplatedItems="true" EnableLoadOnDemand="true" Height="19em" Width="25em"

OnItemDataBound="ClientOriginCombo_ItemDataBound"

>

<ItemTemplate>

<ul class="comboboxUL">

<li class="col1">

<%# DataBinder.Eval(Container.DataItem, "Location.City")%>

</li>

<li class="col2">

<%# DataBinder.Eval(Container.DataItem, "Location.State")%>

</li>

</ul>

</ItemTemplate>

</telerik:RadComboBox>

</td>

</tr>

<tr style="display:none">

<td>

<asp:Label runat="server" ID="lblLocationId" ></asp:Label>

</td>

</tr>

<tr>

<td id="tdGridCarGroups" colspan="2" align="center">

<telerik:RadGrid runat="server" ID="GridCarGroups" Width="80%"

EnableLinqExpressions="false"

AllowPaging="true"

AllowSorting="true"

AutoGenerateColumns="true"

DataKeyNames="RailcarAvailabilityId, AvailabilityDate"

CommandItemDisplay="Top"

EditMode="InPlace"

AllowMultiRowEdit="true"

AllowMultiColumnSorting="true"

OverrideDataSourceControlSorting="true"

AllowFilteringByColumn = "false"

FilterItemStyle-HorizontalAlign="Left"

ViewStateMode="Enabled"

OnNeedDataSource="GridCarGroups_NeedDataSource"

OnColumnCreated="GridCarGroups_ColumnCreated"

>

<MasterTableView AutoGenerateColumns="true"

AllowAutomaticDeletes="true"

AllowAutomaticInserts="true"

AllowAutomaticUpdates="true"

InsertItemPageIndexAction="ShowItemOnCurrentPage"

CommandItemDisplay="Top"

EditMode="InPlace"

AllowMultiColumnSorting="true"

OverrideDataSourceControlSorting="true"

AllowFilteringByColumn = "false"

FilterItemStyle-HorizontalAlign="Left"

ShowFooter="true">

<CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

<tr>

<td colspan="2" align="center">

<asp:Button ID="BtnSubmit" CausesValidation="true"

Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

<asp:Button ID="BtnCancel" Text="Cancel" runat="server" CausesValidation="false" CommandName="Cancel" />

</td>

</tr>

</table>

</asp:Panel>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<GroupingSettings CaseSensitive="False" />

<ClientSettings>

<ClientEvents OnPopUpShowing="OnPopUp" />

</ClientSettings>

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

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">

<script type="text/javascript">

</script>

</telerik:RadCodeBlock>

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ViewState.Add("status", "Initialized");

}

LoadGrid();

}

protected void Page_Init(object sender, EventArgs e)

{

try

{

// code to create a Delete column programmatically

GridButtonColumn btncol = new GridButtonColumn();

ProductAvailabilityGrid.MasterTableView.Columns.Add(btncol);

btncol.ButtonType = GridButtonColumnType.ImageButton;

btncol.Text = "Delete";

btncol.CommandName = "Delete";

btncol.UniqueName = "DeleteColumn";

btncol.ConfirmDialogType = GridConfirmDialogType.RadWindow;

btncol.ConfirmTitle = "Delete";

btncol.ConfirmText = "Delete this Railcar Availability Record?";

}

catch (Exception ex)

{

throw ex;

}

#region Railcar Availability

private void LoadGrid()

{

try

{

string dbPFOConnectionString = AppCode.PfoApplication.PfoDatabaseConnectionString;

RailcarAvailabilityBL bl = new RailcarAvailabilityBL();

ProductAvailabilityGrid.DataSource = bl.GetAvailabilityByCarGroups((Int32)Session["ClientID"], dbPFOConnectionString);

//ProductAvailabilityGrid.DataBind();

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

protected void ProductAvailabilityGrid_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

try

{

if (e.Column is GridBoundColumn)

{

GridBoundColumn column = (GridBoundColumn)e.Column;

column.ItemStyle.HorizontalAlign = HorizontalAlign.Left;

if (e.Column.UniqueName == "RailcarAvailabilityId")

{

e.Column.Visible = false;

}

else if (e.Column.UniqueName == "LocationId")

{

e.Column.Visible = false;

}

else if (e.Column.UniqueName == "AvailabilityDate")

{

column.DataFormatString = "{0:d}";

}

//if (e.Column is GridButtonColumn)

//{

// if (e.Column.UniqueName == "DeleteColumn")

// {

// e.Column.OrderIndex = Convert.ToInt32(ViewState["DeleteColOrder"].ToString());

// }

//}

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

protected void ProductAvailabilityGrid_PreRender(object sender, EventArgs e)

{

try

{

////GridButtonColumn deleteColumn = (GridButtonColumn)ProductAvailabilityGrid.Columns.FindByUniqueName("DeleteColumn");

//int autoCount = ProductAvailabilityGrid.MasterTableView.AutoGeneratedColumns.Count();

//int columnCount = ProductAvailabilityGrid.Columns.Count;

//int totalCount = ((columnCount + autoCount) + 2);

//btncol.OrderIndex = totalCount;

//ViewState.Add("DeleteColOrder", totalCount);

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

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

{

try

{

if (e.CommandName == "Edit")

{

ViewState.Add("editedDate", Convert.ToDateTime(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["AvailabilityDate"]).ToShortDateString());

ViewState.Add("locationId", Convert.ToInt32(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["LocationId"]));

ViewState["status"] = "Edit";

}

else if (e.CommandName == "Delete")

{

DateTime date = Convert.ToDateTime(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["AvailabilityDate"]);

int locationId = Convert.ToInt32(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["LocationId"]);

RailcarAvailabilityBL bl = new RailcarAvailabilityBL();

bl.DeleteRailcarAvailability((Int32)Session["ClientID"], date, locationId);

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

protected void ProductAvailabilityGrid_ItemDataBound(object sender, GridItemEventArgs e)

{

try

{

if (e.Item is GridEditFormItem && e.Item.IsInEditMode && (!(ProductAvailabilityGrid.MasterTableView.IsItemInserted)))

{

GridEditFormItem editItem = (GridEditFormItem)e.Item;

Label lblDate = (Label)editItem.FindControl("lblDate");

Label lblLocationId = (Label)editItem.FindControl("lblLocationId");

RadGrid GridCarGroups = (RadGrid)editItem.FindControl("GridCarGroups");

RadComboBox cboxClientOrigin = (RadComboBox)editItem.FindControl("cboxClientOrigin");

RailcarAvailabilityBL bl = new RailcarAvailabilityBL();

lblDate.Text = ViewState["editedDate"].ToString();

lblLocationId.Text = ViewState["locationId"].ToString();

int locationId = Convert.ToInt32(lblLocationId.Text);

int clientLocationId = bl.GetClientLocationIdforLocation(locationId);

cboxClientOrigin.SelectedValue = clientLocationId.ToString();

RadComboBoxItem selectedItem = cboxClientOrigin.SelectedItem;

selectedItem.Selected = true;

cboxClientOrigin.Enabled = false;

//Comes here after NeedDataSource of GridCarGroups

string dbPFOConnectionString = AppCode.PfoApplication.PfoDatabaseConnectionString;

GridCarGroups.DataSource = bl.GetGroupsByDate((Int32)Session["ClientID"], Convert.ToInt32(lblLocationId.Text), Convert.ToDateTime(lblDate.Text), dbPFOConnectionString);

GridCarGroups.DataBind();

DataTable cachedTable = (DataTable)GridCarGroups.DataSource;

Cache.Insert("OriginalAvailability", cachedTable);

if (ViewState["status"].ToString() != "Updated")

{

foreach (GridItem item in GridCarGroups.MasterTableView.Items)

{

if (item is GridEditableItem)

{

GridEditableItem editableItem = item as GridDataItem;

editableItem.Edit = true;

}

GridCarGroups.Rebind();

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

protected void ProductAvailabilityGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

try

{

string dbPFOConnectionString = AppCode.PfoApplication.PfoDatabaseConnectionString;

RailcarAvailabilityBL bl = new RailcarAvailabilityBL();

ProductAvailabilityGrid.DataSource = bl.GetAvailabilityByCarGroups((Int32)Session["ClientID"], dbPFOConnectionString);

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

#endregion

protected void ClientOriginCombo_ItemDataBound(object sender, RadComboBoxItemEventArgs e)

{

TelerikUtil.ClientOriginCombo_ItemDataBound(sender, e);

}

protected void GridCarGroups_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

if (e.Column is GridBoundColumn)

{

GridBoundColumn column = (GridBoundColumn)e.Column;

column.ItemStyle.HorizontalAlign = HorizontalAlign.Left;

if (e.Column is GridBoundColumn && e.Column.UniqueName == "AvailabilityId")

{

e.Column.Visible = false;

}

if (e.Column is GridBoundColumn && e.Column.UniqueName == "CarGroupId")

{

e.Column.Visible = false;

}

if (e.Column is GridBoundColumn && e.Column.UniqueName == "ModifiedDate")

{

e.Column.Visible = false;

}

if (e.Column is GridBoundColumn && e.Column.UniqueName == "ModifiedUserId")

{

e.Column.Visible = false;

}

if (e.Column is GridBoundColumn && e.Column.UniqueName == "CarGroup")

{

column.ReadOnly = true;

}

protected void GridCarGroups_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

try

{

if (ProductAvailabilityGrid.EditItems.Count > 0)

{

GridEditableItem editableItem = ((ProductAvailabilityGrid.EditItems[0]) as GridEditableItem);

RadGrid GridCarGroups = ((GridDataItem)(editableItem)).EditFormItem.FindControl("GridCarGroups") as RadGrid;

Label lblDate = ((GridDataItem)(editableItem)).EditFormItem.FindControl("lblDate") as Label;

Label lblLocationId = ((GridDataItem)(editableItem)).EditFormItem.FindControl("lblLocationId") as Label;

string dbPFOConnectionString = AppCode.PfoApplication.PfoDatabaseConnectionString;

RailcarAvailabilityBL bl = new RailcarAvailabilityBL();

GridCarGroups.DataSource = bl.GetGroupsByDate((Int32)Session["ClientID"], Convert.ToInt32(lblLocationId.Text), Convert.ToDateTime(lblDate.Text), dbPFOConnectionString);

}

catch (Exception ex)

{

PfoApplication.ErrorHandler.LogAndSendHtmlError(ex);

throw;

}

answered on 09 Dec 2011, 04:56 PM

Hi Farhan,

I would like to draw your attention to the following section of the documentation topic:

RadGrid does not support mixing declarative grid columns with grid columns added dynamically at runtime. You should either create all the columns in the grid programmatically, or else define them all in the ASPX file.

This means that you will need to adjust your code accordingly and build the grid column structure either entirely declaratively or programmatically. Do that and let us know how it goes.

Regards,
Sebastian
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 09 Dec 2011, 05:08 PM

ok the only column that was defined declaratively was the EditCommandColumn, I removed it and commented out the Columns Section
from the Aspx page and added it dynamically in the Page_Init event, but its still giving me the same error when I try to edit a record. Do these need to be readded at another event after postback ? and this still doesnt tell me how to reorder the Dynamically created column? Can you please try to bind a datatable to a grid and add these Edit/Delete columns dynamically and reorder them like Im trying to do (Move the Delete column all the way to the right side), seeing a working sample would be very helpful.

answered on 14 Dec 2011, 01:38 PM

Hello Farhan,

The auto-generated columns are considered declarative grid columns. Therefore, to order the columns in par with your preferences, you will either need to:

define the whole grid column structure dynamically
or
use solely auto-generated columns and reorder them on the server (inside the PreRender event of the grid and rebind it) using the SwapColumns method from the grid's server API.

Regards,

Sebastian
the Telerik team

answered on 14 Dec 2011, 06:51 PM

Hi Sebastian,

ok I guess I am lost about this. Here is a little background on my real application. I am using a DataTable to bind to the Radgrid. The reason I am using a datatable is because I dont know the no of columns I get back from the stored proc. The data table could have 2, 5 or 10 columns. So thats why I am using auto generate to create the columns on the grid. Now I also need Edit /Delete columns on this grid. and like with all the rest of the grids in the application i would like to move the Delete column all the way to the right side. Can you Please show an example of how to do this? Dont worry about what I posted before, please post an example in code the CORRECT way to do this, I have looked but didnt find anything online on how to create the Edit / Delete columns if you are binding to the grid with a datatable with AutoGenerated columns. And a way to reorder the delete column?
An example in code would be very helpful as I have already spent some time trying to do this but am not making progress :( . Your help is appreciated.