|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
Hi All,
Are there any examples on how to create Custom Columns from C# (or VB.net) in the Code Behind code?
All my grids I will be using in my application are all derived from an SQL database, so I need to create all the columns behind the scenes (dynamically).
I have most of them working but cant find any code on how to create a dropdownlist when dynamically creating the column
I'm presuming I have to have a routine for the EditorTemplate, but I just find any example of what goes in that routine for the dropdown.
I have this so far creating the column:
EO.Web.CustomColumn oCol5 = new EO.Web.CustomColumn();
oCol5.DataField = "UserRole";
oCol5.HeaderText = "UserRole";
oCol5.EditorTemplate = ????
oCol5.Width = 150;
Why is there a lack of CodeBehind examples?
Any help/Pointers greatly appreciated.
Thanks,
Rob
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi, EditorTemplate is an ITemplate. So you have to create a class that derives from ITemplate and then implements its InstantiateIn method. It will be something like this:
Code: C#
//A useless template that adds a "Hello" to the "container"
class HelloTemplate: ITemplate
{
public void InstantiateIn(Control container)
{
Literal l = new Literal();
l.Text = "hello";
container.Controls.Add(l);
}
}
//Use HelloTemplate for the column
oCol5.EditorTemplate = new HelloTemplate();
For the Grid, the "container" is the cell. You will need to change the code inside InstantiateIn and to create whatever UI you wish to display when the cell is in edit mode. Hope this helps. Thanks!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi, EditorTemplate is an ITemplate. So you have to create a class that derives from ITemplate and then implements its InstantiateIn method. It will be something like this:
Code: C#
//A useless template that adds a "Hello" to the "container"
class HelloTemplate: ITemplate
{
public void InstantiateIn(Control container)
{
Literal l = new Literal();
l.Text = "hello";
container.Controls.Add(l);
}
}
//Use HelloTemplate for the column
oCol5.EditorTemplate = new HelloTemplate();
For the Grid, the "container" is the cell. You will need to change the code inside InstantiateIn and to create whatever UI you wish to display when the cell is in edit mode. Hope this helps. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
Thanks for the quick reply.. Although I was still lost (haven't done much with ITemplates, it did point me in the direction I needed to research on and I found the solution.
Thanks again.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
You are welcome. Glad that we were able to help.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
Sorry for another question, but I have spent hours on this and tried what others seem to make it work, but how do I get the control in the JavaScript routines of On_Begin_Edit, On_End_Edit, and On_Column_Get_Text for the dropdown control.
I have tried this:
var dropDownBox = document.getElementById(eo_GetObject("<%=UserRole.ClientID%>"));
dropDownBox.selectedIndex = v;
and I get an error on the first line stating UserRole does not exist in the current context.
When I created the ITemplate code, I pass in "UserRole" as the name given in the ID of the dropdown.
public class DropDownListTemplate : ITemplate
{
private string aName = "";
DropDownList ddl = null;
public DropDownListTemplate(string name)
{ aName = name; }
public void InstantiateIn(System.Web.UI.Control container)
{
ddl = new DropDownList();
ddl.ID = aName;
ddl.DataTextField = "UserRole";
ddl.DataValueField = "UserRole";
ddl.DataSource = dbRoutines.umFetchRoleType();
container.Controls.Add(ddl);
}
}
If I put a break in the code, I can find the Control's ID by looking at the code which comes back as this:
<select name="ctl00$ReorgBody$EOGrid$edit$ctl04$UserRole" id="ctl00_ReorgBody_EOGrid_edit_ctl04_UserRole">
Can you please offer some assistance as to how I can get the control to utilize in the JavaScript routines.
Thanks.
|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
I thought about it and did a lot of debugging, so whether this is incorrect or there is a better way, I managed to get the actual Control ID and it is working. here is the code:
var theControl = cell.getColumn().abgg.substr(0, cell.getColumn().abgg.indexOf('_'));
theControl += "_ReorgBody_EOGrid_edit_ctl04_UserRole";
var dropDownBox = document.getElementById(theControl);
Please comment if there is a better/"proper" way.
Thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi, You can do something like this:
Code: C#
CustomColumn column = (CustomColumn)Grid1.Columns[column_index];
Control control = column.EditorInstance.FindControl(your_list_id);
Now you can use control.ClientID to get the full client ID of your control. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
Thanks for the reply.
I did see similar code, tried it, but couldn't implement it as I didn't know where it should go. When I tried the similar code, it didn't do anything.
Does it go after I create the columns in the code behind?
Rob
|
|
Rank: Member
Groups: Member
Joined: 9/26/2013
Posts: 23
|
After hours of scratching the head, I discovered I could do it under JavaScript (which made it simpler) and it worked (and then I kicked myself for not thinking that way sooner)..
Thanks. Rob
JavaScript Code:
function on_begin_edit_UserRole(cell) {
//Get the current cell value
var v = cell.getValue();
//Use index 0 if there is no value
if (v == null)
v = 0;
//get Control ID
var id = '<%=((EO.Web.CustomColumn)UM_EOGrid.Columns[4]).EditorInstance.FindControl("UserRole").ClientID%>';
//Load the value into our drop down box
var dropDownBox = document.getElementById(id);
dropDownBox.value = v;
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
Yes. You can do it that way. Glad that you got it working!
Thanks!
|
|