Hello,  

I'm following this example and I could create my custom ITemplate (I'm creating a DropDownList inside of it). The problem that I have is that I cannot unbind the SelectedValue and I'm not sure the problem is because after the TemplatedColumnRestored is called, the controls is recreated (new object).

Is there a way to get the selected value by the user? 

 Thanks in advance, 

Charlie Duffy"]

Hello.

In order to properly create templated columns in code, you need to create a class that implements the ITemplate interface and then handle one method; namely the InstantiateIn method. This method is where you will add the controls to the CellItem. You also need to set the CellTemplate property on the column object to a new instance of your class that implements ITemplate. Thirdly, you need to handle the grids server side TemplatedColumnRestored event. Here is some code to demonstrate this. First, we add the templated column in InitializeLayout:

 TemplatedColumn tc = new TemplatedColumn(true);
 tc.Key = "ImageButton";
 tc.Header.Caption = "Image Button";
 e.Layout.Bands[0].Columns.Add(tc);

 //Set the columns template to a new instance of the PlaceHolderTemplate class.
 tc.CellTemplate = new PlaceHolderTemplate();

Here is the PlaceHolderTemplate class. All I am doing is placing a standard ImageButton into the cell template, but the process is the same for other controls:

public class PlaceHolderTemplate : ITemplate
    {
        #region ITemplate Members

        void ITemplate.InstantiateIn(Control container)
        {
            CellItem ci = (CellItem)container;
            //Create a new instance of the image button, assign alternaten text, and add it to
            //the cell template.
            ImageButton ib = new ImageButton();
            ib.EnableViewState = true;
            ci.Controls.Add(ib);
        }

        #endregion
    }

 Here is the grids TemplatedColumnRestored event where you need to check the contents of the cell template on each postback:

 if (((TemplatedColumn)e.Column).CellTemplate == null)
 {
     ((TemplatedColumn)e.Column).CellTemplate = new PlaceHolderTemplate();
 }

 Following these steps will ensure that your programmatically created templated columns will work and that the controls will be created on every postback.

Hello m_valle.

Adding a WebDateChooser or any other type of editor is no different than adding a drop down combo box. The problem with the InitializeRow code snippet that you have provided is that you are creating a new instance of a CellItem. The CellItems collection is part of the templated column object, and it is a collection of type System.Object. It is the same length as the grids rows collection, and you index it by using the rows index. So, if the grid has 10 rows the CellItems collection for a templated column in that band has 10 items. Each item corresponds to a specific row. So, to access the control contained in the templated column of row[5], you access the 5th element of that columns CellItems collection by using the FindControl method and converting the object to a specified type.

When a column is declared to be a templated column, it already has a CellItems collection which will be set to the proper length to match the rows collection. All you need to do is access the correct element of that collection and add or retrive controls from it. You don't need to create new instances of CellItems; they already exist. 

Hello everybody,

I am quite new to the Infragistics WebGrid. This thread was very helpful concerning TemplatedColumns. Now my problem:

I dragged a webgrid into an aspx-page.

Hello t_val_u.

You shouldn't have to do anything to get the TemplatedCOlumnRestored event to fire. As long as it is handled properly you should be fine. If you create the event through the designer it should be fine. Take a look at the grids HTML and see if there is an event handler in the <UltraWebGrid> tag. You can enter the events directly in the HTML, which is what the designer does, or you can create them in code. To create an event handler in code, use this C# syntax:

 this.UltraWebGrid1.TemplatedColumnRestored += new TemplatedColumnRestoreEventHandler(UltraWebGrid1_TemplatedColumnRestored);

As soon as you type the += intellisense will fill the rest of the text out for you and you just have to hit the tab key to fill the rest in. 

Hello Charlie,

thanks for your answer. I do create all needed events for the webgrid as you describe. But the TemplatedColumnRestored event is the only one that does not fire when I do a postback.

I can not add the event directly in the html, because I need to create everything from scratch in runtime. The webgrid and all needed events need to be created programmatically.

I found articles about how to create a webgrid and a TemplatedColumn programmatically. I know how to add event handlers programmatically. But maybe I do this in the wrong order or at the wrong page events.

Is there a best practice article or something about how to do all this?

Thank you.

Hello t_val_u.

I would suugest that you go to http://www.Infragistics.com and hover the mouse over "Get Help" from the top toolbar. When the menu drops down, select "Ask For Help" and you can request more indepth help from Developer Support. There may be something wrong with your project that we just cant see her in the forums. 

Hi,

I'm having a similar issue where I have a table with a column with properties, a column with the current values of those properties and a third column where a new value could be entered.  I need to display either a textbox or date time picker in the third column based on the required data type of the property.  Each row could possibly have a different data type and therefore I believe the cell template needs to be created in the Initialize Row event.  So I need to add the templated column in the Initialize layout event but create the cell template in the Initialize Row event. Does anyone know how to do this or have similar source code? Thanks

I have a similar example, but for some reason the image button command event I am creating does not fire on the initial page load, it causes a postback, and then after postback it fires correctly. Any help??

<igmisc:WebAsyncRefreshPanel LinkedRefreshControlID="xxx" ID="WebAsyncRefreshPanelControl" runat="server" Width="100%">

<asp:Label ID="lblErr1" runat="server" CssClass="error" />

<center>

<table cellpadding="2" cellspacing="1" border="0" width="725px">

<tr valign="top">

<td>

<igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" OnClickCellButton="UltraWebGrid1_OnClickCellButton">

<DisplayLayout Name="UltraWebGrid1" AllowSortingDefault="yes" HeaderClickActionDefault="SortSingle"

RowSelectorsDefault="No" SelectTypeRowDefault="Single" SelectTypeCellDefault="Single"

StationaryMargins="Header" TableLayout="Fixed" Version="4.00" />

</igtbl:UltraWebGrid>

</td>

<td>

</td>

</tr>

</table>

</center>

<igtxt:WebDateTimeEdit ID="WebDateTimeEdit1" runat="server" DataMode="EditModeText" />

<igcmbo:WebCombo ID="cmbReportSchFrequency" runat="server" Version="4.00" DataValueField="ID" DataTextField="Name" DisplayValue="Name" />

<igcmbo:WebCombo ID="cmbReportDay" runat="server" Version="4.00" DataValueField="ID" DataTextField="Name" DisplayValue="Name" />

</igmisc:WebAsyncRefreshPanel>

ReportSchedules rs;

private string ErrorMsg = "";

private int iTimeFormat;

try

//Authenticate the user for permission to this page

else

this.lblErr1.Visible = true;

Common.ZLog(System.Web.HttpContext.Current, ErrorMsg, ex);

try

TemplatedColumn tc = new TemplatedColumn(true);

tc.SortIndicator = SortIndicator.Disabled;

//Move the delete button to the leftmost column of the grid.

//Set up the blank new row for inserting a new time entry.

e.Layout.RowSelectorsDefault = RowSelectors.No;

//Hide the grid data we do not want to display.

e.Layout.Bands[0].Columns.FromKey("xxx").Hidden = true;

//Set Grid Header titles / Captions.

e.Layout.Bands[0].Columns.FromKey("xxx").Header.Caption = "Name";

e.Layout.Bands[0].Columns.FromKey("xxx").Header.Caption = "Last Updated";

e.Layout.Bands[0].Columns.FromKey("xxx").Header.Caption = "Frequency";

//Set Column Widths

e.Layout.Bands[0].Columns.FromKey("xxx").Width = new Unit("150px");

e.Layout.Bands[0].Columns.FromKey("xxx").Width = new Unit("100px");

e.Layout.Bands[0].Columns.FromKey("xxx").Width = new Unit("100px");

e.Layout.Bands[0].Columns.FromKey("xxx").Format = "MM/dd/yyyy";

public class PlaceHolderTemplate : ITemplate

CellItem ci = (CellItem)container;

ib.CssClass = "pointer";

ib.Attributes.Add("onclick", "return confirm ('Delete this record?');");

UltraGridRow currentRow = Grid1.Rows[Val];

/// <summary>

/// This method ensures that the delete button is present after page postbacks.

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

try

Fill_cmbs(cmbReportSchFrequency, Common.ReportFrequency());

this.WebDateTimeEdit1.DisplayModeFormat = sFormat;

Common.ZLog(System.Web.HttpContext.Current, ErrorMsg, ex);

UltraWebGrid1.Columns.FromKey("Edit").Move(0);

UltraWebGrid1.Columns.FromKey("Edit").Type = ColumnType.Button;

UltraWebGrid1.Columns.FromKey("Edit").CellButtonDisplay = CellButtonDisplay.OnMouseEnter;

UltraWebGrid1.Columns.FromKey("Edit").CellButtonStyle.BorderWidth = new Unit("0px");

UltraWebGrid1.Columns.FromKey("Edit").Header.Caption = "Edt";

this.UltraWebGrid1.Bands[0].Columns.FromKey("xxx").EditorControlID = WebDateTimeEdit1.UniqueID;

this.UltraWebGrid1.Bands[0].Columns.FromKey("xxx").EditorControlID = cmbReportDay.UniqueID;

this.UltraWebGrid1.Bands[0].Columns.FromKey("xxx").DataType = "System.Int32";

this.UltraWebGrid1.Bands[0].Columns.FromKey("xxx").EditorControlID = cmbReportSchFrequency.UniqueID;

this.UltraWebGrid1.Bands[0].Columns.FromKey("xxx").DataType = "System.Int32";

/// <summary>

/// bind dataset to the web combo.

/// </summary>

/// <param name="WC"> the web combo to bind</param>

/// <returns></returns>

try

Common.ZLog(System.Web.HttpContext.Current, ErrorMsg, ex);

try

break;

//rs.Delete(sID);

//UltraWebGrid1.Rows.Remove(e.Cell.Row);

Common.ZLog(System.Web.HttpContext.Current, ErrorMsg, ex);

 Hi All

   I was following all the sugestion above, but I wanted to keep working in the client side instead of submmiting the page. I had the same problem with the "uwgContact_TemplateUpdateCellsHandler" because it was not triggered. The problem was mainly when i was changing the page index of the grid (all the values of the dropdownlist dessapear).

  In the server side I could not manage to take the control inside the cell in order to be asigned again in the dropdownlist.

 I found a solution using javascript, basecaly I am using a dropDownList template and everytime that I was changing the page of the grid I was loosing the values of the dropdownlist. My solution was taking a hidden column in order to save the value of the drodownlist and after i change the page of the grid i set again the value to the dropdownlis.... My javascript code below:

function warpAllocationDetails_RefreshComplete(oPanel){
    var gridContacts = igtbl_getGridById("ctl00_cphReportManagerPages_wpAllocationDetails_uwgContact");
    if (gridContacts != null)
    {
        var initialIndex = 0+((gridContacts.PageSize*gridContacts.CurrentPageIndex)-gridContacts.PageSize); 
        var finalIndex = (gridContacts.PageSize*gridContacts.CurrentPageIndex);
        var realIndex = 0;
        for (i=initialIndex;i<finalIndex;i++)
        {
            var activeRow = gridContacts.Rows.getRow(realIndex);

            var profileIdCellObj = activeRow.getCell(15);
            var profileDescCellObj = activeRow.getCell(16);
            var ddlObj = document.getElementById("ctl00_cphReportManagerPages_wpAllocationDetails_uwgContact_ci_0_17_"+i+"_ddlProfileUserGrid");
            if ((ddlObj != null) && (profileIdCellObj.getValue() != null))
            {
                ddlObj.value = profileIdCellObj.getValue();
            }
            realIndex = realIndex + 1;
        }
    }
    messageAlert();
}


function ddl_SelectedItemChanged(ddlObj)
{
    var gridContacts = igtbl_getGridById("ctl00_cphReportManagerPages_wpAllocationDetails_uwgContact");
    if (gridContacts == null)
      return;
    var activeCellDdl = gridContacts.getActiveCell();
    var activeRow = gridContacts.getActiveRow();
    var profileIdCellObj = activeRow.getCell(15);
    var profileDescCellObj = activeRow.getCell(16);   
    profileIdCellObj.setValue(ddlObj.value,true);
    profileDescCellObj.setValue(ddlObj[ddlObj.selectedIndex].text,true);
    gridContacts.getActiveRow().setSelected(true);

}

 You can see that each dropDownList has a default id that is automatecaly generated using the index of the current Row. This is why I access each dropdownlist using a loop with a variable "i" :

"ctl00_cphReportManagerPages_wpAllocationDetails_uwgContact_ci_0_17_"+i+"_ddlProfileUserGrid"

The function "ddl_SelectedItemChanged(ddlObj)" is set for each dropdownlist in the template:

public class ddlProfileTemplate : ITemplate
{
    private DataSet ddlDs;
    public ddlProfileTemplate(DataSet aDataSet)
    {
        this.ddlDs = aDataSet;
    }

    void ITemplate.InstantiateIn(Control container)
    {
        CellItem ci = (CellItem)container;

        if (ci.Cell.Column.Key == "userProfile")
        {
            DropDownList ddl = new DropDownList();
            ddl.ID = "ddlProfileUserGrid";
            ddl.EnableViewState = true;
            if (this.ddlDs != null)
            {
                for (int i = 0; i < this.ddlDs.Tables[0].Rows.Count; i++)
                {
                    ddl.Items.Add(new ListItem((string)this.ddlDs.Tables[0].Rows[i]["DESCRIPTION"],  this.ddlDs.Tables[0].Rows[i]["A_PROFILE"].ToString()));
                }
                ddl.Items.Insert(0, new ListItem(null, ""));
            }
            ddl.Attributes.Add("onchange", "ddl_SelectedItemChanged(this);");
            ci.Controls.Add(ddl);
        }
    }
}