custom dropdown in gridview - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » custom dropdown in gridview

custom dropdown in gridview

Options

Previous Topic · Next Topic

mark836

Posted: Wednesday, May 7, 2008 7:02:37 AM

Rank: Member
Groups: Member

Joined: 5/1/2008
Posts: 16

Hi. I am wondering if anyone has any examples of populating the custom control of type drop down in the EO grid. The drop down is populated on the server codebehind from a database table.

I have many dropdowns that will be populated from the database and I want to create a standard or framework so I can easily produce this option multiple times.

Assumptions:
"RegisterStartupScript" to create the javascript functions.
Gridview custom control

Thanks

eo_support

Posted: Wednesday, May 7, 2008 7:10:27 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090

Hi,

You can place a DropDownList control into the column's EditorTemplate and then get a reference to that DropDownList control through the following code:

Code: C#

Copy

EO.Web.CustomColumn column = Grid1.Columns[index];
DropDownList list = 
    (DropDownList)column.EditorInstance.FindControl("DropDownList1");

Once you have that, populating it will be the same as populating any other control.

Note that the same drop down list is used for all cells for that column. So you can not have different list for different cells unless you use JavaScript to modify it on the client side.

Thanks

mark836

Posted: Thursday, May 15, 2008 8:56:55 AM

Rank: Member
Groups: Member

Joined: 5/1/2008
Posts: 16

Thanks.

I am having a slight issue.

My gridview, Grid1, has a custom field name "Drop1" which is the first column in the grid. My code is getting an error on the second line. Where did I go wrong? Thanks

EO.Web.CustomColumn column = (CustomColumn)Grid1.Columns[0];
DropDownList ddl = (DropDownList)column.EditorInstance.FindControl("Drop1");

eo_support

Posted: Thursday, May 15, 2008 9:01:13 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090

Please post your Grid definition and detailed error message.

mark836

Posted: Thursday, May 15, 2008 9:07:33 AM

Rank: Member
Groups: Member

Joined: 5/1/2008
Posts: 16

Here is what I hope you need. Thanks

{"Object reference not set to an instance of an object."}

<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px"
ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205"
ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="32"
FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False"
Font-Underline="False" GridLineColor="240, 240, 240" GridLines="Both"
Height="112px" ItemHeight="19" Width="629px"
EnableKeyboardNavigation="True" AllowPaging="True"
FullRowMode="False" AllowNewItem="True" ClientSideOnCellSelected="" ClientSideOnItemSelected="">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="22"
DayHeaderFormat="Short" DisabledDates=""
SelectedDates="" TitleLeftArrowImageUrl="00040101"
TitleRightArrowImageUrl="00040102" MonthColumns="2" MonthRows="2"
MonthSelectorVisible="True" TitleLeftArrowDownImageUrl="00040103"
TitleRightArrowDownImageUrl="00040104" WeekSelectorVisible="True">
<TodayStyle CssText="background-image:url('00040106');" />
<SelectedDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; background-image:url('00040105');color:white;" />
<DisabledDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; COLOR: gray" />
<FooterTemplate>
<div style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Tahoma"">
<img src="{img:00040106}"> Today: {var:today:MM/dd/yyyy} </img></div>
</FooterTemplate>
<CalendarStyle CssText="border-bottom-color:Black;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Black;border-left-style:solid;border-left-width:1px;border-right-color:Black;border-right-style:solid;border-right-width:1px;border-top-color:Black;border-top-style:solid;border-top-width:1px;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;background-color:white" />
<DayHoverStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:underline" />
<MonthStyle CssText="MARGIN: 0px 4px; cursor:hand" />
<TitleStyle CssText="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 3px; COLOR: white; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #0054e3" />
<DayHeaderStyle CssText="FONT-SIZE: 11px; COLOR: #0054e3; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Tahoma" />
<DayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:none" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None"
TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:CustomColumn Name="Drop1">
</eo:CustomColumn>
<eo:RowNumberColumn Width="25">
</eo:RowNumberColumn>
<eo:CheckBoxColumn HeaderText="Delete?" Width="50">
</eo:CheckBoxColumn>
<eo:DateTimeColumn AllowSort="True" DataField="EFF_FROM_DATE"
DataFormat=""{0:MM/dd/yyyy}" " HeaderText="Eff From Date">
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="22"
DayHeaderFormat="Short" DisabledDates="" MonthColumns="2" MonthRows="2"
MonthSelectorVisible="True" SelectedDates=""
TitleLeftArrowDownImageUrl="00040103" TitleLeftArrowImageUrl="00040101"
TitleRightArrowDownImageUrl="00040104" TitleRightArrowImageUrl="00040102"
WeekSelectorVisible="True">
<TodayStyle CssText="background-image:url('00040106');" />
<SelectedDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; background-image:url('00040105');color:white;" />
<DisabledDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; COLOR: gray" />
<FooterTemplate>
<div style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Tahoma"">
<img src="{img:00040106}"> Today: {var:today:MM/dd/yyyy} </img></div>
</FooterTemplate>
<CalendarStyle CssText="border-bottom-color:Black;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Black;border-left-style:solid;border-left-width:1px;border-right-color:Black;border-right-style:solid;border-right-width:1px;border-top-color:Black;border-top-style:solid;border-top-width:1px;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;background-color:white" />
<DayHoverStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:underline" />
<MonthStyle CssText="MARGIN: 0px 4px; cursor:hand" />
<TitleStyle CssText="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 3px; COLOR: white; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #0054e3" />
<DayHeaderStyle CssText="FONT-SIZE: 11px; COLOR: #0054e3; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Tahoma" />
<DayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:none" />
</DatePicker>
</eo:DateTimeColumn>
<eo:DateTimeColumn AllowSort="True" DataField="EFF_THRU_DATE"
DataFormat=""{0:MM/dd/yyyy}" " HeaderText="Eff Thru Date"
SortOrder="Ascending">
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="22"
DayHeaderFormat="Short" DisabledDates="" MonthColumns="2" MonthRows="2"
MonthSelectorVisible="True" SelectedDates=""
TitleLeftArrowDownImageUrl="00040103" TitleLeftArrowImageUrl="00040101"
TitleRightArrowDownImageUrl="00040104" TitleRightArrowImageUrl="00040102"
WeekSelectorVisible="True">
<TodayStyle CssText="background-image:url('00040106');" />
<SelectedDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; background-image:url('00040105');color:white;" />
<DisabledDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; COLOR: gray" />
<FooterTemplate>
<div style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Tahoma"">
<img src="{img:00040106}"> Today: {var:today:MM/dd/yyyy} </img></div>
</FooterTemplate>
<CalendarStyle CssText="border-bottom-color:Black;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Black;border-left-style:solid;border-left-width:1px;border-right-color:Black;border-right-style:solid;border-right-width:1px;border-top-color:Black;border-top-style:solid;border-top-width:1px;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;background-color:white" />
<DayHoverStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:underline" />
<MonthStyle CssText="MARGIN: 0px 4px; cursor:hand" />
<TitleStyle CssText="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 3px; COLOR: white; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #0054e3" />
<DayHeaderStyle CssText="FONT-SIZE: 11px; COLOR: #0054e3; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Tahoma" />
<DayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:none" />
</DatePicker>
</eo:DateTimeColumn>
<eo:TextBoxColumn HeaderText="Approval Note" Name="approval_note"
TextBoxMaxLength="100" TextBoxRows="1" Width="300"
DataField="APPROVAL_NOTE" AllowSort="True">
</eo:TextBoxColumn>
<eo:StaticColumn DataField="COMPANY_PERM_ID" HeaderText="COMPANY_PERM_ID"
Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="INDUSTRY_CLASSIF_TYPE"
HeaderText="INDUSTRY_CLASSIF_TYPE" Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="SOURCE_OF_DATA_CODE"
HeaderText="SOURCE_OF_DATA_CODE" Name="" Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="DTIME_ENTERED"
DataFormat=""{0:MM/dd/yyyy}" " HeaderText="DTIME_ENTERED"
Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="WHO_ENTERED" HeaderText="WHO_ENTERED" Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="DTIME_LAST_CHANGED"
DataFormat=""{0:MM/dd/yyyy}" " HeaderText="DTIME_LAST_CHANGED"
Width="0">
</eo:StaticColumn>
<eo:StaticColumn DataField="WHO_LAST_CHANGED" HeaderText="WHO_LAST_CHANGED"
Width="0">
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
</

eo_support

Posted: Thursday, May 15, 2008 9:20:25 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090

Hi,

As mentioned in our previous post, "You can place a DropDownList control into the column's EditorTemplate". You place the DropDownList there first, only then you can use FindControl to find it.

In your case, you merely have:

<eo:CustomColumn Name="Drop1">
</eo:CustomColumn>

As your column. How can you expect a CustomColumn with nothing there would display a DropDownList for you?

You can find detailed information on how to use CustomColumn at here:

http://www.essentialobjects.com/ViewDoc.aspx?t=Grid%2fcustom_column.html

You can also take a look of the sample code, which demonstrates how to use a CustomColumn. The key is, a CustomColumn is a column that is completely "custom", which means you need to provide pretty much everything for that column. Everything is in your hand and nothing will turn up by itself unless you explicitly arrange so.

Thanks

mark836

Posted: Thursday, May 15, 2008 10:27:31 AM

Rank: Member
Groups: Member

Joined: 5/1/2008
Posts: 16

Yes, I did forget to add the EditorTemplate tag (stuck it on another grid). However, The provided example loads the dropdown via Javascript mode. I requested a suggestion by server side code. You say "Once you have that, populating it will be the same as populating any other control." In the following code I do just that. But i do not get the dropdown list. So, what is the malfunction? (I can guess what it is...)

EO.Web.CustomColumn column = (CustomColumn)GdSpcGics.Columns[0];
DropDownList ddl =(DropDownList)column.EditorInstance.FindControl("Drop1");

.... sql to load the datatable...

myAdapter.Fill(daTable2);
ddl.DataSource = daTable2;
ddl.DataTextField = "GLOBAL_INDUSTRY_CODE";
ddl.DataValueField = "DESCRIPTION";
ddl.DataBind();

eo_support

Posted: Thursday, May 15, 2008 11:13:09 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090

Hi,

You do not see the listbox at all or the list box is empty? It will help both you and us by trying to provide as much detail as possible.

Thanks

mark836

Posted: Thursday, May 15, 2008 11:48:10 AM

Rank: Member
Groups: Member

Joined: 5/1/2008
Posts: 16

I am not seeing the listbox in the cell. I know I am close.... no thrown exceptions and my value ddl, (see above), is populated. All fields, inclusing the field i want as a dropdown lsit box, displays and every field is editable when clicked on except the one that I want as a drop down. It is display only. My javascript fucntion below will not show the alet box so I assume it is not being called. at the end, I posted the source for the custom control. Thanks

function on_begin_edit(cell)
{
alert("on_begin_edit");
//Get the current cell value
var v = cell.getValue();

//Use index 0 if there is no value
if (v == null)
v = 0;

//Load the value into our drop down box
var dropDownBox = document.getElementById("drop1");
dropDownBox.selectedIndex = v;
}

<Columns>
<eo:CustomColumn Name="Drop1" DataField="industry_classif_value"
ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit">
<EditorTemplate>
<asp:DropDownList ID="Drop1" runat="server">
</asp:DropDownList>
</EditorTemplate>
</eo:CustomColumn>

eo_support

Posted: Thursday, May 15, 2008 11:59:31 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090

The following line is wrong:

var dropDownBox = document.getElementById("drop1");

getElementById takes the ClientID of the control, not the ID of the control, and they are different. To find out the difference, try to set a break point after:

DropDownList ddl =(DropDownList)column.EditorInstance.FindControl("Drop1");

And check the value of ddl.ClientID, you will find out the real value of client side ID of the element and it's different than "Drop1".

As a simple test, you can also comment out the last two lines in your on_begin_edit, you should see the ListBox show up with items, but you won't see the current item correctly set. And to set the current item correctly you will need to get the correct ID first. That's one of the reason we do not recommend you to use a server side DropDownList at all.

Thanks

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message