Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » DetailView with EO Grid

DetailView with EO Grid Options
Previous Topic · Next Topic
pghcpa
Posted: Tuesday, September 1, 2009 4:02:51 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
I have successfully transformed my ASP ListView control using an EO grid; works great.

As you are probably aware, the companion control to ListView in ASP is DetailView. This is basically a two-column transposed grid (columns are rows and rows are columns) but only showing one record. The "advantage" is that it can appear vertically, not just horizontally.

I figured out how to transpose using a data table as the grid datasource. I can two columns and populate the data table from my SqlDataSource/Dataview. No problem.

But, the problem is that some of my fields are text, some are date/time and some are amounts. And, while I can probably use a stylefield columns to conditionally format each cell going down, it appears I cannot mix text fields, amount/masked-edit fields and date/time with picker in a single grid column.

I am not just displaying a DetailsView, I need the user to be able to edit it Excel-style.

I don't think I can do this, right?

I need dates to have the date picker and amounts to have a masked edit in a single column, so I am thinking about re-designing my app. in some way so that I can use the grid horizontally with a single row, even though that is not quite as ordinary and intuitive as an ASP details view and doesn't fit with my current page design.

Before I do that, can you confirm my assumptions and/or give me any ideas to get an editible, VERTICAL grid akin to an ASP DetailsView. First column is the field. Second column is the value, values have differing formats, so I can't define the type of field at the column level.

Thanks.
Back to top
 
eo_support
Posted: Tuesday, September 1, 2009 5:02:18 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

My understanding is that you wish to have a DetailsView like UI to not only display the data, but also support excel-style editing. Technically this is doable but would require some extra coding. You will need to use a CustomColumn to do that.

A CustomColumn is a column that is completely filled by you. The Grid manages column resizing and scrolling but not the cell. Basically the Grid manages everything outside of the cell and you manages everything inside the cell. You can put multiple edit control inside your CustomColumn's EditorTemplate (for example, a TextBox, a MaskedEdit, a DatePicker) and then only display one when the cell enters edit mode.

If you have not used CustomColumn before, you will want to go over this first:

http://doc.essentialobjects.com/library/1/grid/custom_column.aspx

This should give you some basic idea about how CustomColumn works. The key is to have an EditorTemplate and then provide the JavaScript to load/get data to/from your custom editor template. Here is a CustomColumn example:

http://demo.essentialobjects.com/Default.aspx?path=Grid\_i1\grid_custom_column

Hope this helps.

Thanks!
Back to top
 
pghcpa
Posted: Tuesday, September 1, 2009 11:34:15 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Thanks. I saw this demo as well as the other custom column demos before I posted this, but I'm having trouble applying them to creating a DetailsView. In those demos, every cell going down the custom column is in the same format.

For example, using your sample data "Topic" table. I want the grid to have two columns to look like:

TopicID 1
Posted at 5/29/07
Topic Product Support Forum Launched!
Posted by eo_support

Where the 1st row, 2nd column (1) is a textbox, formatted integer. 2nd row, 2nd col (5/29/07) is a datepicker, 3rd and 4th row, 2nd col are individual text boxes.

I tried to put two controls in the edit template. If I use controls with "runat=server" it won't allow me to edit them. If I use two client-side controls, it displays both of them in each cell.

Where you say, "You can put multiple edit control inside your CustomColumn's EditorTemplate (for example, a TextBox, a MaskedEdit, a DatePicker) and then only display one when the cell enters edit mode. " I can't figure out how to get this to work. Set only one to visible? That didn't work.

Here's a test program where I gave it a shot.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="EOTest4.aspx.vb" Inherits="EOTest4" %>

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function on_begin_edit(cell) {
var v = cell.getValue();
var textbox = document.getElementById("TextBox1");
textbox.text = v
}
function on_end_edit(cell) {
var textbox = document.getElementById("TextBox1");
var v = textbox.text;
return v;
}
function on_column_gettext(column, item, cellvalue) {
if (item.getIndex() == 1)
return "firstrowvalue-this will be a date";
else if (item.getIndex() == 2)
return "sendrowvalue - this will be a textbox";
else
return "not yet assigned";
}
</script>
<div>
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px"
ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205"
ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False"
Font-Underline="False" FullRowMode="False" GridLineColor="240, 240, 240"
GridLines="Both" Height="200px" ItemHeight="19" Width="380px">
<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;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>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:StaticColumn>
</eo:StaticColumn>
<eo:CustomColumn ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit" ClientSideGetText="on_column_gettext">
<EditorTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<eo:DatePicker ID="DatePicker1" runat="server">
</eo:DatePicker>
</EditorTemplate>
</eo:CustomColumn>

</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
</div>
</form>
</body>
</html>

Imports EO.Web
Partial Class EOTest4
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim data(4) As Object
Grid1.DataSource = data
Grid1.DataBind()
End Sub
End Class
Back to top
 
eo_support
Posted: Wednesday, September 2, 2009 9:17:18 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You are almost there. There are only two more things:

1. If you use a server control, you can not use document.getElementById("TextBox1"). You must use the following code:

document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("TextBox1").ClientID%>').value = 'whatever';

TextBox1's ID and ClientID are different (ClientID is much longer). On the client side you must use ClientID.

If you do not use server control, then there is no such concern. So you can use a simple HTML input element for your textbox. However there is no simple HTML equivalent for the DatePicker, so with DatePicker your only option is to use server control.

2. To set only one visible, you would put those controls into their own DIV and then flip the container DIV's style.display property:

Initially none of them are visible:

Code: HTML/ASPX 
<EditorTemplate>
    <div id="div_TextBox" style="display:none">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    <div id="div_DatePicker" style="display:none">
        <eo:DatePicker ID="DatePicker1" runat="server">
        </eo:DatePicker>
    </div>
</EditorTemplate>


You would then turn only one visible in your on_begin_edit function:

Code: JavaScript 
function on_begin_edit(cell)
{
    var rowIndex = cell.getItemIndex();
    if (rowIndex == 0)
    {
        //This code hides TextBox, but shows DatePicker for
        //the first row
        document.getElementById("div_TextBox").style.display = "none";
        document.getElementById("div_DatePicker").style.display = "";
    }
    else if (rowIndex == 1)
    {
        //This code shows TextBox, but hides DatePicker for
        //the second row
        document.getElementById("div_TextBox").style.display = "";
        document.getElementById("div_DatePicker").style.display = "none";
    }
}


Hope this helps.

Thanks
Back to top
 
pghcpa
Posted: Wednesday, September 2, 2009 12:50:47 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
This looks like it is what I need; I'll try it and let you know. Thanks for explaining it so clearly.

Reading this makes me wonder whether I should just put a DetailsView control in the custom column. This would use the EO grid for UI but use the DetailsView to handle all my database interaction, since a DetailsView control can be tied to a SQlDatasource control and it has all the SQL statements built-in.

The details view can have eval() statements or bind() statements depending on the template. Why not use that to bind 2-way?

Have you ever tried this? Is it worth the time to experiment?
Back to top
 
eo_support
Posted: Wednesday, September 2, 2009 1:05:11 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Very creative idea but you probably don't want to go there. :) There is a fundamental difference between standard ASP.NET modal and our modal: standard ASP.NET is server centric and ours is client centric. Most GridView/DetailsView features require you to post the page back to the server and most our features are done on the client side. You can strong arm both of them to make them worker together, but it will probably cost your more effort because these two are just two very different animals and they are really not born to enjoy each other.

Thanks!
Back to top
 
pghcpa
Posted: Friday, September 4, 2009 6:12:47 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Having three problems with code above:

1. Works with textbox, but when you click cell to enter edit mode, focus is not in cell and you have to click again. Use a focus method of some sort?

2. Datepicker, calendar is transparent, hard to select a date.

3. When you select a date it does not save it in the cell like it does with the textbox, so syntax of the getElementByID argument must be a little different for dates?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="EOTest4.aspx.vb" Inherits="EOTest4" %>

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function on_begin_edit(cell) {
var rowIndex = cell.getItemIndex()

if (rowIndex == 1) {
document.getElementById("div_TextBox").style.display = "";
document.getElementById("div_DatePicker").style.display = "none";
}
else if (rowIndex == 2) {
document.getElementById("div_TextBox").style.display = "none";
document.getElementById("div_DatePicker").style.display = "";

}
}
function on_end_edit(cell) {
//nothing to do here
}
function on_column_gettext(column, item, cellvalue) {
if (item.getIndex() == 1) {
var textbox = document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("TextBox1").ClientID%>');
return textbox.value;
} else if (item.getIndex() == 2) {
var datepicker = document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("DatePicker1").ClientID%>');
return datepicker.value;
} else
return "NA";
}
</script>
<div>
<eo:Grid ID="Grid1" runat="server" BorderColor="#828790" BorderWidth="1px"
ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205"
ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False"
Font-Underline="False" FullRowMode="False" GridLineColor="240, 240, 240"
GridLines="Both" Height="200px" ItemHeight="19" Width="380px">
<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;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>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:StaticColumn>
</eo:StaticColumn>
<eo:CustomColumn ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit" ClientSideGetText="on_column_gettext">
<EditorTemplate>
<div id="div_TextBox" style="display:none">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
<div id="div_DatePicker" style="display:none">
<eo:DatePicker ID="DatePicker1" runat="server">
</eo:DatePicker></div>
</EditorTemplate>
</eo:CustomColumn>

</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
</div>
</form>
</body>
</html>
Imports EO.Web
Partial Class EOTest4
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim data(4) As Object
Grid1.DataSource = data
Grid1.DataBind()
End Sub
End Class
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 11:01:20 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

For your question:

1. You will need to do something like this inside your begin_edit:

var textbox = document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("TextBox1").ClientID%>');
setTimeout(function() { textbox.focus(); }, 100);

2. DatePicker is transparent because you did not specify any styles. Try to place a DatePicker directly in the page, then use DatePicker Builder to set the style, then copy this "styled" DatePicker definition into your EditorTemplate;

3. Our DatePicker control is not a single HTML element. So you can not use document.getElementById to get a reference to it. You must first use eo_GetObject to get the DatePicker object, then call getSelectedDate() to return its value. You can find more details here:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx
http://doc.essentialobjects.com/library/1/jsdoc.public.calendar.aspx

Note getSelectedDate returns a JavaScript Date object, not a String object. So if you need to convert it to string, you will need to call this function:

http://doc.essentialobjects.com/library/1/jsdoc.public.calendar.formatdate.aspx

Hope this helps.

Thanks
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 1:53:30 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
These instructions worked perfectly on the first try. Thank you very much.

Now I am moving on to initial-populating of the DetailsView-style grid with SqlDataSource data.

I have used code like sample below in Page_Load event, mapping my data from a DataView with a single record, to the bound DataTable. This seems to work fine with ordinary columns, but doesn't appear to work for populating custom columns. Right?

If I'm understanding the concept right, what I need to initialize/populate is the text/date controls inside the <EditorTemplate> tag, those are used to populate the grid in Javascript. But, I don't see them in my intellisense from Page_Load as available to assign an initial value because they are inside the <EditorTemplate> tag. So, how do I assign initial values to them in codebehind?


Dim table As New DataTable()
table.Columns.Add("Field", GetType(String))
table.Columns.Add("FieldValue", GetType(String))
table.Rows.Add(New Object() {"RecID", dv.Item(0).Item("RecID")})
table.Rows.Add(New Object() {"RecDate", dv.Item(0).Item("RecDate")})
Grid1.DataSource = table
Grid1.DataBind()
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 3:15:17 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You are correct that the TextBox/DatePicker inside EditorTemplate needs to be initialized. However they need to be initialized inside your client side begin_edit handler, not on the server side. It will be something like this:

textbox.value = cell.getValue();

DatePicker is similar except that you will need to call the DatePicker's setSelectedDate to load the intial value, and you also need to perform necessary conversion (string <-> date).

The key is all the cell data are held by the Grid, with regular columns the Grid will automatically fills the cell and collect modified data from the cell for you. With custom column you need to do both by yourself. You did the second part (collecting modified data inside your end_edit handler), but did not do the first part.

Hope this helps.

Thanks!
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 3:25:21 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Just an additional note. I am not sure it was a typo or that you are confused about the purpose of ClientSideGetText and ClientSideEndEdit. The code in your on_column_gettext handler should be in you end_edit handler. ClientSideGetText has nothing to do with EditorTemplate. It's ClientSideBeginEdit and ClientSideEndEdit that works with EditorTemplate to support custom editing. ClientSideGetText is for displaying cell text when the cell is NOT in edit mode.

Thanks
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 3:27:34 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
I sort of figured this out right before your post.

So, it looks like I don't need a ClientSideGetText for a simple DetailsView. Correct?

First, I populate/initialize the column using an ordinary bound grid with a DataField.

Then, OnBeginEdit, I copy the cell value to the desired <EditorTemplate> control value, such as TextBox1.

Then, OnEndEdit, I return the Textbox1.value to the grid.

I'll keep at it and can probably make this work fine, but is there any way in vb/codebehind to address directly the controls inside the custom column <EditorTemplate>?

Something like: grid1.customcolumn(0).controls("TextBox1").text = "abc"

(not from Javascript but from VB in Page_Load event?)

I can address the grid like this from codebehind, so is there a way to address also the custom column template controls?
Grid1.Items(1).Cells(1).Value = dv.Item(0).Item("RecID")

This isn't absolutely needed, but it would be nice to have as it would reduce the code I need to write for each individual cell in JavaScript because I could initialize the value of all the <EditorTemplate> controls.
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 3:49:27 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Please see below. I can copy from my DatePicker control TO the grid, but I get a JavaScript error when I try to assign a selected date to the DatePicker control from the cell.getValue(). That is because cell.getValue() is not returning a date object, and datepicker.setSelectedDate() is expecting one.

I need a way to convert from string to date object? What's the function?


function on_begin_edit(cell) {
var v = cell.getValue();
var rowIndex = cell.getItemIndex()

if (rowIndex == 1) {
document.getElementById("div_TextBox").style.display = "";
document.getElementById("div_DatePicker").style.display = "none";

var textbox = document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("TextBox1").ClientID%>');
setTimeout(function() { textbox.focus(); }, 100);
textbox.value = v

}
else if (rowIndex == 4) {
document.getElementById("div_TextBox").style.display = "none";
document.getElementById("div_DatePicker").style.display = "";
var datepicker = eo_GetObject("DatePicker1");
datepicker.setSelectedDate(v)

}
}
function on_end_edit(cell) {
var rowIndex = cell.getItemIndex()

if (rowIndex == 1) {

var textbox = document.getElementById('<%=CType(Grid1.Columns(1), EO.Web.CustomColumn).EditorInstance.FindControl("TextBox1").ClientID%>');
return textbox.value
}
else if (rowIndex == 4) {
var datepicker = eo_GetObject("DatePicker1");
var selecteddate = datepicker.getSelectedDate();
return datepicker.formatDate(selecteddate, "dd-MMM-yy")
}

}
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 4:00:19 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
pghcpa wrote:
I sort of figured this out right before your post.

So, it looks like I don't need a ClientSideGetText for a simple DetailsView. Correct?

That is correct. You will only need that if you are not happy with the default formatting. (For example, the default formatting display a number as is; If you are OK with that then you do not need ClientSideGetText. However if you want something more sophisticated such as display "5" as "Excellent", "0" as "Horrible" then you will need ClientSideGetText).

pghcpa wrote:
First, I populate/initialize the column using an ordinary bound grid with a DataField.

Then, OnBeginEdit, I copy the cell value to the desired <EditorTemplate> control value, such as TextBox1.

Then, OnEndEdit, I return the Textbox1.value to the grid.

You are dead on.

pghcpa wrote:
I'll keep at it and can probably make this work fine, but is there any way in vb/codebehind to address directly the controls inside the custom column <EditorTemplate>?

Something like: grid1.customcolumn(0).controls("TextBox1").text = "abc"

(not from Javascript but from VB in Page_Load event?)

I can address the grid like this from codebehind, so is there a way to address also the custom column template controls?
Grid1.Items(1).Cells(1).Value = dv.Item(0).Item("RecID")

This isn't absolutely needed, but it would be nice to have as it would reduce the code I need to write for each individual cell in JavaScript because I could initialize the value of all the <EditorTemplate> controls.

You can do that with the FindControl syntax we gave to you in previous posts. But setting initial value on the server side has no use to you because you do not know which cell user will select. You only know that when user actually clicks a cell to indicate he wants to edit that specific cell. At that moment you either rely on JavaScript to fill your TextBox right away, or post back the whole page to the server so that your VB/C# code can be called to fill the TextBox. The later is how ASP.NET DataGrid/GridView works and it's much slower because the page has to go back to the server every time user wants to edit something. This is not only expensive in term of server load and bandwidth, but the time delay introduced by the postbacks also makes excel like user experience impossible (think how user would feel if they have to wait for half a second every time they move cursor from one cell to another cell). That’s why so many people are looking for alternative such our Grid which does most works directly on client side without posting back to the server.

Thanks
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 4:05:40 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
Got all that, still struggling on the dates.

function on_begin_edit(cell) {
var v = cell.getValue();
...
datepicker.setSelectedDate(eo_StringToDate(v));

The selected date is appearing as NA/NA/NA.

Plus, in CleintSideGetText I need a way to say that
if (item.getIndex() == 4) {
<format the cell as dd-MMM-YYYY>

Maybe the 2nd question will fix the first?

I can't figure out the fomat of cell.getvalue(), does it return date object or string or ?
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 4:37:09 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

ClientSideGetText is for displaying only. It should not affect editing.

The type of cell.getValue() is the same as the type of the value you initially fill the Grid. In your case, you fill the Grid with a DataTable. Because both of your fields are string, so cell.getValue() always returns a string.

You are correct on calling eo_StringToDate. However the function only takes format "yyyy-MM-dd". So if you call eo_StringToDate("2009-09-04") it will return you a Date object. But if you call StringToDate("09-04-2009") it would not know what to do.

The easiest solution for you is to always use "yyyy-MM-dd" as the internal format. This means:

1. You need to format your Date as such when you add it to your DateTable:

Code: Visual Basic.NET 
table.Rows.Add(New Object() {"RecDate", _
    String.Format("{0:yyyy-MM-dd}", dv.Item(0).Item("RecDate"))})


2. You need to format the Date as such inside your end_edit handler:

Code: JavaScript 
return datepicker.formatDate(selecteddate, "yyyy-MM-dd");


3. You may need to handle ClientSideGetText if you want it to show the Date differently because otherwise the Grid would show your Date as is in yyyy-MM-dd format:

Code: JavaScript 
//Get a date value from the string value
var date = eo_StringToDate(cellValue);

//Call toString to use the default date format, or
//you can call formatDate to have your own custom
//format
return date.toString();


Hope this helps.

Thanks
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 4:45:31 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
I will work on this, but one question, where you say:

//Call toString to use the default date format, or
//you can call formatDate to have your own custom
//format

My read of the object documentation is that formatDate requires a calendar object. Won't work on cellvalue, will it?

I was working with every combination of eo_FormatString I could come up with, but none seem to work.

return eo_FormatString('{0:dd-MMM-yy}', eo_StringToDate(cellvalue));
return eo_FormatString('{0:dd-MMM-yy}', cellvalue);

Though maybe it's because the inital/databind value is not in the right format.

Which should I use, eo_FormatString or formatDate to control how the databound date formats for display in the grid.
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 5:08:34 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
You should use formatDate. The DatePicker in your EditorTemplate is always there. It's just not visible. So you can still call formatDate method on it.

eo_FormatString has no use to you. I believe it only works with numbers.

Thanks
Back to top
 
pghcpa
Posted: Saturday, September 5, 2009 5:10:07 PM
Rank: Advanced Member
Groups: Member

Joined: 8/26/2009
Posts: 64
I did get this to work using your tips. I am not sure how it is displaying one format while using another one internally, but it doesn't matter, it works great.

In ClientSideGetText, cellvalue must be all lower case.

Also, in order to use formatDate function, I had to first make a reference to a datepicker, even if I didn't use it, just so I would have a calendar object. No doubt, there is a more elegant way of doing this? I should declare a datepicker object in code rather than refer to one in my form, how do I do that? Or, there is perhaps a syntac for eo_FormatString, but I can't seem to find it.

var mydate = eo_StringToDate(cellvalue);
var datepicker = eo_GetObject("DatePicker1");
return datepicker.formatDate(mydate, "dd-MMM-yy");

Thanks!

P.S. What tool do you use to insert your code snippets so they maintain color, formatting, etc?
Back to top
 
eo_support
Posted: Saturday, September 5, 2009 5:24:44 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Glad that you got everything working. Your code is correct and elegant enough :). You do not need a separate DatePicker (it's a completely waste and unnecessary), nor you need eo_FormatString. There is no syntax for that function to work with date.

Our forum has built-in syntax color feature. You would click the big "Post Reply" button on the top and you should see "Code Language" option. Select the text you want to color and then pick a language will automatically color the code for you.

Thanks!
Back to top
 


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.