|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi,
Two more questions.
In a Grid control, when I create a CustomColumn with a DropDownList using the Repeater control, automatically the first option is null or blank. But, if the column is mandatory, this option should not be available. How do I inhibit the blank option?
Another issue that is not so important. How can I centralize a CheckBoxColumn?
Thanks, Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Camarate wrote:In a Grid control, when I create a CustomColumn with a DropDownList using the Repeater control, automatically the first option is null or blank. This has to do with code in your ClientSideBeginEdit handler. Inside your handler you will need to set the index correct. It has nothing to do with the Grid. Camarate wrote:Another issue that is not so important. How can I centralize a CheckBoxColumn? You can only use paddings that columns CellStyle, but that is not precisely centralizing.
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi, Thanks for your reply. In relationship of my doubt about DropDownList, consider the example ASP.NET page below.
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridDropDown.aspx.vb" Inherits="TreeView.GridDropDown" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="JavaScript1.2">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<script language="JavaScript">
function BeginDropCategory(cell)
{
g_curItemIndex = cell.getItemIndex();
var v = cell.getValue();
var dropDownBox = document.getElementById("category_dropdown");
for (var i = 0; i < dropDownBox.options.length; i++)
{
if (dropDownBox.options[i].text == v)
{
dropDownBox.selectedIndex = i;
return;
}
}
dropDownBox.selectedIndex = 0;
}
function EndDropCategory(cell)
{
//Get the new value from the drop down box
var dropDownBox = document.getElementById("category_dropdown");
var selectedIndex = dropDownBox.selectedIndex;
if (selectedIndex > 0)
return dropDownBox.options[selectedIndex].text;
return null;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Grid ID="grdEquipment" runat="server" BorderColor="#C7D1DF" BorderWidth="1px" ColumnHeaderAscImage="00050303" ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223" GridLines="Both" Height="160px" ItemHeight="19" Width="488px" FullRowMode="False">
<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; color:#336699;white-space:nowrap;" />
</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="19" DayHeaderFormat="FirstLetter"
DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</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>
<Columns>
<eo:RowNumberColumn Width="20">
</eo:RowNumberColumn>
<eo:TextBoxColumn HeaderText="Equipment Name" MaxWidth="50" Name="EQUI_NM_EQUIPMENT"
Width="200">
</eo:TextBoxColumn>
<eo:CustomColumn ClientSideBeginEdit="BeginDropCategory" ClientSideEndEdit="EndDropCategory"
HeaderText="Category" Name="DCCT_NM_EQUIPMENT_CATEGORY" Width="250">
<EditorTemplate>
<select id="category_dropdown" style="background-color:azure;color:#003399;width:250px;font-family:Verdana;font-size:9pt;" >
<option></option>
<asp:Repeater Runat="server" ID="Category">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "DCCT_SQ_EQUIPMENT_CATEGORY")%>'>
<%#DataBinder.Eval(Container.DataItem, "DCCT_NM_EQUIPMENT_CATEGORY")%>
</option>
</ItemTemplate>
</asp:Repeater>
</select>
</EditorTemplate>
<CellStyle CssText="color:#003399;font-family:Verdana;font-size:9pt;padding-left:8px;padding-top:2px;" />
</eo:CustomColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
</eo:Grid>
</div>
</form>
</body>
</html>
Code: Visual Basic.NET
Public Partial Class GridDropDown
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.Page.IsPostBack Then
Dim ds As New DataSet("EquipmentType")
Dim dt As New DataTable("GLM_EQUIPMENT_CATEGORY")
Dim cl1 As New DataColumn("DCCT_SQ_EQUIPMENT_CATEGORY")
cl1.DataType = GetType(Integer)
Dim cl2 As New DataColumn("DCCT_NM_EQUIPMENT_CATEGORY")
cl2.DataType = GetType(String)
dt.Columns.Add(cl1)
dt.Columns.Add(cl2)
ds.Tables.Add(dt)
Dim rowNew As DataRow
rowNew = ds.Tables("GLM_EQUIPMENT_CATEGORY").NewRow
rowNew("DCCT_SQ_EQUIPMENT_CATEGORY") = 1
rowNew("DCCT_NM_EQUIPMENT_CATEGORY") = "Boiler"
ds.Tables("GLM_EQUIPMENT_CATEGORY").Rows.Add(rowNew)
ds.AcceptChanges()
rowNew = ds.Tables("GLM_EQUIPMENT_CATEGORY").NewRow
rowNew("DCCT_SQ_EQUIPMENT_CATEGORY") = 2
rowNew("DCCT_NM_EQUIPMENT_CATEGORY") = "Electric Generator"
ds.Tables("GLM_EQUIPMENT_CATEGORY").Rows.Add(rowNew)
ds.AcceptChanges()
rowNew = ds.Tables("GLM_EQUIPMENT_CATEGORY").NewRow
rowNew("DCCT_SQ_EQUIPMENT_CATEGORY") = 3
rowNew("DCCT_NM_EQUIPMENT_CATEGORY") = "Truck"
ds.Tables("GLM_EQUIPMENT_CATEGORY").Rows.Add(rowNew)
ds.AcceptChanges()
Dim CategoryColumn As EO.Web.CustomColumn = CType(grdEquipment.Columns(grdEquipment.FindColumn("DCCT_NM_EQUIPMENT_CATEGORY").Index), EO.Web.CustomColumn)
Dim CategoryRepeater As Repeater = CType(CategoryColumn.EditorInstance.FindControl("Category"), Repeater)
CategoryRepeater.DataSource = ds.Tables("GLM_EQUIPMENT_CATEGORY")
CategoryRepeater.DataBind()
Dim GridRow As EO.Web.GridItem, Ctr As Integer
For Ctr = 1 To 7
GridRow = Me.grdEquipment.CreateItem()
GridRow.Cells(0).Value = Ctr
GridRow.Cells(1).Value = "Equipment #" & Ctr.ToString
GridRow.Cells(2).Value = ds.Tables("GLM_EQUIPMENT_CATEGORY").Rows(Ctr Mod 3)("DCCT_NM_EQUIPMENT_CATEGORY")
Me.grdEquipment.Items.Add(GridRow)
Next
End If
End Sub
End Class
When the page is show, the DropDownList displays a blank option, as marked by the red arrow, although not generated when creating the Repeaters in the Sub Page_Load.  But, for mandatory fields, I wanted eliminate this blank option, as shown below, to not allow the user could choose it.  Is this possible? Thanks, Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
The DropDownList is your list. It has nothing to do with the Grid. The only thing the Grid does is to place it in the cell. You fill the items in the list when the page loads, you set the drop down index when the cell enters edit mode, you get the selected index and pass the new value back to the Grid when the cell leaves edit mode.
Because it is your list, what's possible or not possible is completely up to you and has nothing to do with the Grid. If you see an empty item, that means you have given it an empty item. If the list of items are wrong, that means you have given it the wrong list. None of these are related to our Grid in any way.
Thanks
|
|