Hi,
I'm working on a scheduler and grid combination. I have it almost together... However:
I'm not quiet sure how the dropdownlist should act. In my opinion it ought to show the "Text Value" and not the "Selected Value / Index Value".
The dropdowns return correct data to database and stays on the text value aftar it's selected. But on the postback it goes back to showing the custom field value that is the index value that the dropdown list ought to focus on.
I have really followed your example that I'm very impressed of, really smart and proper!
But unfortunately I'm in to something that i dont understand.
As the VB code loads correct data I asume that it is something in the HTML.
Pleas advise, I really appreciate your help!
Best Regards,
ITMA
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SchedGrid.aspx.vb" Inherits="Grid_Default" %>
<%@ 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">
<script type="text/javascript">
var g_curItemIndex = -1;
function on_HoursVars_begin_edit(cell) {
//Store the current item index so that we can use
//it later in on_product_change
g_curItemIndex = cell.getItemIndex();
//Get the current cell value. Unlike the previous
//sample, this sample displays "Product_Name", but
//actually stores "Product_No".
var v = cell.getValue();
//Set the drop down box's selectedIndex based on the
//current value. Each drop down item's "value" property
//contains the "Product_No".
var dropDownBox = document.getElementById("ddlHoursVars");
for (var i = 0; i < dropDownBox.options.length; i++) {
if (dropDownBox.options[i].value == v) {
dropDownBox.selectedIndex = i;
return;
}
}
//No match has been found, display the "Please Select" item
dropDownBox.selectedIndex = 0;
}
function on_HoursVars_end_edit(cell) {
var dropDownBox = document.getElementById("ddlHoursVars");
var selectedIndex = dropDownBox.selectedIndex;
return dropDownBox.options[selectedIndex].value;
}
//---------------------------------------------------------------------
function on_ActType_begin_edit(cell) {
g_curItemIndex = cell.getItemIndex();
var v = cell.getValue();
var dropDownBox = document.getElementById("ddlActType");
for (var i = 0; i < dropDownBox.options.length; i++) {
if (dropDownBox.options[i].value == v) {
dropDownBox.selectedIndex = i;
return;
}
}
dropDownBox.selectedIndex = 0;
}
function on_ActType_end_edit(cell) {
var dropDownBox = document.getElementById("ddlActType");
var selectedIndex = dropDownBox.selectedIndex;
return dropDownBox.options[selectedIndex].value;
}
//---------------------------------------------------------------------
function on_ActPlace_begin_edit(cell) {
g_curItemIndex = cell.getItemIndex();
var v = cell.getValue();
var dropDownBox = document.getElementById("ddlActPlace");
for (var i = 0; i < dropDownBox.options.length; i++) {
if (dropDownBox.options[i].value == v) {
dropDownBox.selectedIndex = i;
return;
}
}
dropDownBox.selectedIndex = 0;
}
function on_ActPlace_end_edit(cell) {
var dropDownBox = document.getElementById("ddlActPlace");
var selectedIndex = dropDownBox.selectedIndex;
return dropDownBox.options[selectedIndex].value;
}
//---------------------------------------------------------------------
</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<eo:CallbackPanel id="CallbackPanel1" runat="server" Height="230px"
Width="100%" Triggers="{ControlID:Button1;Parameter:},{ControlID:Grid1;Parameter:}"
AutoDisableContents="True" SafeGuardUpdate="False">
<eo:Grid id="Grid1" Width="100%" Height="180px" runat="server"
KeyField="SchedAct_ID" AllowColumnReorder="True"
ColumnHeaderDescImage="00050105" ColumnHeaderAscImage="00050104" FixedColumnCount="1"
GoToBoxVisible="True" GridLines="Both" BorderColor="#7F9DB9" GridLineColor="220, 223, 228"
ColumnHeaderDividerImage="00050103" Font-Names="Tahoma" Font-Size="8.75pt" BorderWidth="1px"
FullRowMode="False" Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;"></FooterStyle>
<ItemStyles>
<eo:GridItemStyleSet>
<CellStyle CssText="padding-left:8px;padding-top:2px;"></CellStyle>
<FixedColumnCellStyle CssText="border-right: #d6d2c2 1px solid; padding-right: 10px; border-top: #faf9f4 1px solid; border-left: #faf9f4 1px solid; border-bottom: #d6d2c2 1px solid; background-color: #ebeadb; text-align: right"></FixedColumnCellStyle>
</eo:GridItemStyleSet>
</ItemStyles>
<GoToBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; BORDER-TOP: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; WIDTH: 40px; BORDER-BOTTOM: #7f9db9 1px solid"></GoToBoxStyle>
<ContentPaneStyle 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;"></ContentPaneStyle>
<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"></TextBoxStyle>
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker runat="server" DayHeaderFormat="FirstLetter" DayCellHeight="16" DisabledDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
OtherMonthDayVisible="True" DayCellWidth="19" TitleRightArrowImageUrl="DefaultSubMenuIcon"
ControlSkinID="None" SelectedDates="">
<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"></DayHoverStyle>
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;"></TitleStyle>
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid"></DayHeaderStyle>
<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"></DayStyle>
<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"></SelectedDayStyle>
<TitleArrowStyle CssText="cursor:hand"></TitleArrowStyle>
<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"></TodayStyle>
<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;"></PickerStyle>
<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"></OtherMonthDayStyle>
<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"></CalendarStyle>
<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"></DisabledDayStyle>
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px"></MonthStyle>
</DatePicker>
</eo:DateTimeColumn>
</ColumnTemplates>
<Columns>
<eo:RowNumberColumn Width="40"></eo:RowNumberColumn>
<eo:DateTimeColumn HeaderText="Start" DataField="StartTime"
DataFormat="{0:yyyy-MM-dd H:mm}" Width="125" DataType="DateTime">
<DatePicker runat="server" ControlSkinID="None" DayCellHeight="60" DayCellWidth="80"
DayHeaderFormat="Full" DisabledDates=""
SelectedDates="" GridLineColor="207, 217, 227"
GridLineFrameVisible="False" GridLineVisible="True" TitleFormat="MMMM, yyyy"
TitleLeftArrowHtml="&lt;" TitleRightArrowHtml="&gt;"
PickerFormat="yyyy-MM-dd H:mm">
<PopupExpandEffect Type="GlideTopToBottom" />
<PopupCollapseEffect Type="GlideTopToBottom" />
<CalendarStyle CssText="border-right: #cfd9e3 1px solid; border-top: #cfd9e3 1px solid; font-size: 11px; border-left: #cfd9e3 1px solid; cursor: hand; border-bottom: #cfd9e3 1px solid; font-family: verdana; background-color: #eaeaea" />
<TitleStyle CssText="padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 3px; color: white; padding-top: 3px; border-bottom: #cfd9e3 1px solid; background-color: #006699; font-size: 11px; font-family: verdana;" />
<DayHeaderStyle CssText="font-size: 11px; font-family: verdana;height: 17px" />
<DayStyle CssText="font-size: 11px; font-family: verdana;border-right: #eaeaea 1px solid; border-top: #eaeaea 1px solid; border-left: #eaeaea 1px solid; border-bottom: #eaeaea 1px solid; background-color: #eaeaea; text-align: right;" />
<DayHoverStyle CssText="font-size: 11px; font-family: verdana;background-color:#DADADA;border-bottom-color:#DADADA;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#DADADA;border-left-style:solid;border-left-width:1px;border-right-color:#DADADA;border-right-style:solid;border-right-width:1px;border-top-color:#DADADA;border-top-style:solid;border-top-width:1px;text-align:right;" />
</DatePicker>
</eo:DateTimeColumn>
<eo:CustomColumn DataField="HoursVars" DataFormat=""
ClientSideEndEdit="on_HoursVars_end_edit" ClientSideBeginEdit="on_HoursVars_begin_edit"
HeaderText="Tid" Width="75" >
<EditorTemplate>
<select id="ddlHoursVars" style="width:75px" onchange="">
<option>-Välj TID-</option>
<asp:Repeater Runat="server" ID="rptHoursVars">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "HoursVars")%>'>
<%# DataBinder.Eval(Container.DataItem, "Time")%>
</option>
</ItemTemplate>
</asp:Repeater>
</select>
</EditorTemplate>
</eo:CustomColumn>
<eo:StaticColumn DataField="EndTime" DataFormat="{0:yyyy-MM-dd H:mm}"
HeaderText="Slut" Width="125" ReadOnly="True">
</eo:StaticColumn>
<eo:CustomColumn DataField="ActType_ID" DataFormat=""
ClientSideEndEdit="on_ActType_end_edit" ClientSideBeginEdit="on_ActType_begin_edit"
HeaderText="Aktivitet" Width="160">
<EditorTemplate>
<select id="ddlActType" style="width:160px" onchange="">
<option>-Välj AKTIVITET-</option>
<asp:Repeater Runat="server" ID="rptActType">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "ActType_ID")%>'>
<%# DataBinder.Eval(Container.DataItem, "ActType")%>
</option>
</ItemTemplate>
</asp:Repeater>
</select>
</EditorTemplate>
</eo:CustomColumn>
<eo:ButtonColumn ButtonText="Typ" Width="40">
</eo:ButtonColumn>
<eo:CustomColumn DataField="ActPlace_ID" DataFormat=""
ClientSideEndEdit="on_ActPlace_end_edit" ClientSideBeginEdit="on_ActPlace_begin_edit"
HeaderText="Plats" Width="160">
<EditorTemplate>
<select id="ddlActPlace" style="width:160px" onchange="">
<option>-Välj PLATS-</option>
<asp:Repeater Runat="server" ID="rptActPlace">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "ActPlace_ID")%>'>
<%# DataBinder.Eval(Container.DataItem, "ActPlaceName")%>
</option>
</ItemTemplate>
</asp:Repeater>
</select>
</EditorTemplate>
</eo:CustomColumn>
<eo:ButtonColumn ButtonText="Ny" Width="40">
</eo:ButtonColumn>
<eo:StaticColumn DataField="UpdateDate" DataFormat="{0:yyyy-MM-dd H:mm}"
HeaderText="Uppdaterad" ReadOnly="True" Width="125">
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050101');padding-left:8px;padding-top:3px;"></ColumnHeaderStyle>
</eo:Grid>
<asp:Panel id="panChanges" Width="400px" runat="server" Visible="False">Change Summary:<br/></asp:Panel>
<asp:Button id="Button1" Text="Post Back!" Runat="server" OnClick="Button1_Click"></asp:Button>
</eo:CallbackPanel>
</form>
</body>
</html>
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports EO.Web
Partial Class Grid_Default
Inherits System.Web.UI.Page
Dim db As New ProductionDataContext
Dim myAppSubs1 As New AppSubs1
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not CallbackPanel1.IsCallbackByMe Then
'Databinding Grid1
Dim GrdSource0 = From a In db.SchedulerActivityViews Select a Order By a.StartTime
Grid1.DataSource = GrdSource0
Grid1.DataBind()
'Prepares and sets data to listbox "ddlHoursVars" in column 2
Dim HoursVarsColumn As EO.Web.CustomColumn = CType(Grid1.Columns(2), EO.Web.CustomColumn)
Dim HoursVarsRepeater As Repeater = CType(HoursVarsColumn.EditorInstance.FindControl("rptHoursVars"), Repeater)
Dim TimeData = From a In db.SchedulerHoursVarsViews Where a.HoursVars > 0 Select a
HoursVarsRepeater.DataSource = TimeData
HoursVarsRepeater.DataBind()
'Prepares and sets data to listbox "ddlActType" in column 4
Dim ActTypeColumn As EO.Web.CustomColumn = CType(Grid1.Columns(4), EO.Web.CustomColumn)
Dim ActTypeRepeater As Repeater = CType(ActTypeColumn.EditorInstance.FindControl("rptActType"), Repeater)
Dim ActivityData = From a In db.SchedulerActTypeViews
Where a.Consultant_ID = CInt(Session("Consultant_ID0")) Select a
ActTypeRepeater.DataSource = ActivityData
ActTypeRepeater.DataBind()
'Prepares and sets data to listbox "ddlActPlace" in column 6
Dim ActPlaceColumn As EO.Web.CustomColumn = CType(Grid1.Columns(6), EO.Web.CustomColumn)
Dim ActPlaceRepeater As Repeater = CType(ActPlaceColumn.EditorInstance.FindControl("rptActPlace"), Repeater)
Dim ActivityPlace = From a In db.SchedulerActPlaceViews
Where a.Consultant_ID = CInt(Session("Consultant_ID0")) Select a
ActPlaceRepeater.DataSource = ActivityPlace
ActPlaceRepeater.DataBind()
End If
End Sub 'Page_Load
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
panChanges.Visible = True
saverun()
End Sub 'Button1_Click
Sub saverun()
Dim s As String = String.Empty
If Grid1.ChangedItems.Length = 0 Then
s += "No item has changed."
Else
Dim item As EO.Web.GridItem
For Each item In Grid1.ChangedItems
Dim cell As EO.Web.GridCell
For Each cell In item.Cells
If cell.Modified Then
'Dim [text] As String = String.Format("Cell Changed: Key = {0}, Field = {1}, New Value = {2}", item.Key, cell.Column.DataField, cell.Value)
Dim [text] As String = String.Format("UPDATE SchedulerActivity SET {1} = '{2}' WHERE SchedAct_ID = {0}", item.Key, cell.Column.DataField, cell.Value)
myAppSubs1.SQL_exec([text])
s += "<br />"
s += [text]
End If
Next cell
Next item
End If
Dim info As New Literal()
info.Text = s
panChanges.Controls.Add(info)
End Sub
End Class 'Demos_Grid_Features_Edit_Grid_Data___Excel_Style_Demo