UltraWebGrid Template editing | Infragistics Forums

4110

UltraWebGrid Template editing

Daryl posted over 12 years ago

I have an UltraWebGrid (below) that is dynamically bound by Dataset server-side. I need it to have a row edit template with textbox, dropdownlist, and datepicker. I have several problems: 1) I cannot initialize the controls, like prefilling the dropdownlist, 2) I cannot set the initial values to the controls or get the changed values from them, 3) I have to do everything server-side in the code-behind, I cannot manipulate the data client-side, so no javascript. I've tried the various grid methods like updaterow, updategrid, etc., but cannot capture the right event(s). I am using vb.net 2008 with ig controls v10.3.20103.2134. I also cannot use the newer WebDataGrid, this has to be UltraWebGrid for now. I need to have something working correctly soon, so any help or simple example would be hugely appreciated. Thanks so much.

<igtbl:UltraWebGrid ID="igGrid" runat="server" DisplayLayout-AutoGenerateColumns="true"
EnableAppStyling="True" StyleSetName="Office2007Blue" StyleSetPath="~/ig_res/"
DisplayLayout-CellPaddingDefault="5" DisplayLayout-AllowSortingDefault="No">
<Bands>
<igtbl:UltraGridBand>
<AddNewRow View="NotSet" Visible="NotSet">
</AddNewRow>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout BorderCollapseDefault="Separate" CellPaddingDefault="5" Name="igStop"
RowHeightDefault="20px" Version="4.00" CellClickActionDefault="Edit" AllowUpdateDefault="Yes">
<FrameStyle>
</FrameStyle>
<ActivationObject BorderColor="" BorderWidth="">
</ActivationObject>
</DisplayLayout>
</igtbl:UltraWebGrid>

Parents

29417

Offline Maya Kirova posted over 12 years ago

Hello dbishop9,

Thank you for posting in our forum.

If you don’t want to use any JS you’ll have to use the WebDateChooser control instead of the WebDatePicker since the latter is part of the Akido controls set and is better integrated with the new WebDataGrid .You can still use it but you’ll have to handle client side events to get and set the value of the corresponding cell you want to edit. For the WebDateChooser these client side events are already handled so you don’t need to write additional JS.

I’m attaching a sample for your reference. Please test it on your side and let me know if you have any concerns or questions.

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support

UWG_RowEditTemplateSample.zip
Cancel
Reply

Verify Answer

Cancel
4110

Daryl posted over 12 years ago in reply to Maya Kirova

Maya, below is what I have (it won't let me add an attachment). I have a couple of problems; 1) the edit template is aligned to the top of the row, not the bottom, which causes part of it to be off screen and it won't scroll up, 2) the dropdowns are not popluated. I followed your example, but I must not be doing something right. Please help. Also, how do I get the data from the controls in the edit template? Thanks

<igtbl:UltraWebGrid ID="igAction" runat="server" EnableAppStyling="True" StyleSetName="Office2007Blue"
StyleSetPath="~/ig_res/" DisplayLayout-CellPaddingDefault="5" OnUpdateRow="igActions_UpdateRow">
<Bands>
<igtbl:UltraGridBand>
<Columns>
<igtbl:UltraGridColumn BaseColumnName="ID" Key="ID"></igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Process" Key="Process">
<Header>
<RowLayoutColumnInfo OriginX="2" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="2" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Action Item" Key="Action Item">
<Header>
<RowLayoutColumnInfo OriginX="3" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="3" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Action Type" Key="Action Type">
<Header>
<RowLayoutColumnInfo OriginX="4" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="4" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Status" Key="Status">
<Header>
<RowLayoutColumnInfo OriginX="5" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="5" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Assigned To" Key="Assigned To">
<Header>
<RowLayoutColumnInfo OriginX="6" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="6" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Due Date" Key="Due Date" Format="MM/dd/yyyy">
<Header>
<RowLayoutColumnInfo OriginX="7" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="7" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="Completion Date" Key="Completion Date" Format="MM/dd/yyyy">
<Header>
<RowLayoutColumnInfo OriginX="8" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="8" />
</Footer>
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn BaseColumnName="DATE" Key="DATE">
<Header>
<RowLayoutColumnInfo OriginX="9" />
</Header>
<Footer>
<RowLayoutColumnInfo OriginX="9" />
</Footer>
</igtbl:UltraGridColumn>
</Columns>
<RowEditTemplate>
<p align="left">
<asp:DropDownList ID="ddlActionProcess" runat="server" columnkey="Process"
DataTextField="Process" OnInit="ddlActionProcess_Init">
</asp:DropDownList>
<input id="txtActionItem" columnkey="Action Item" style="width:150px;" type="text" />
<asp:DropDownList ID="ddlActionItem" runat="server" columnkey="Action Item" DataTextField="Action Item"
OnInit="ddlActionItem_Init">
</asp:DropDownList>
<asp:DropDownList ID="ddlActionStatus" runat="server" columnkey="Status" DataTextField="Status"
OnInit="ddlActionStatus_Init">
</asp:DropDownList>
<input id="txtActionAssignedTo" columnkey="Assigned To" style="width: 100px;" type="text" />
<igsch:WebDateChooser ID="igActionDueDate" columnkey="Due Date" runat="server"
NullDataLabel="Select a Date" Format="Short" OnInit="igActionDueDate_Init">
</igsch:WebDateChooser>
<igsch:WebDateChooser ID="igActionCompletionDate" columnkey="Completion Date" runat="server" NullDataLabel="Select a Date"
Format="Short" OnInit="igActionCompletionDate_Init">
</igsch:WebDateChooser>
<igsch:WebDateChooser ID="igActionDate" columnkey="DATE" runat="server"
NullDataLabel="Select a Date" Format="Short" OnInit="igActionDate_Init">
</igsch:WebDateChooser>
<br /><br />
</p>
<br />
<p align="center" >
<input id="igAction_reOkBtn" onclick="igAction_gRowEditButtonClick(event);" style="width: 50px;"
type="button" value="OK">  
<input id="igAction_reCancelBtn" onclick="igAction_gRowEditButtonClick(event);" style="width: 50px;"
type="button" value="Cancel"> </input>
</input>
</p>
</RowEditTemplate>
<AddNewRow View="NotSet" Visible="NotSet">
</AddNewRow>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout Name="igAction" AllowDeleteDefault="Yes" AllowSortingDefault="No" AllowUpdateDefault="RowTemplateOnly"
BorderCollapseDefault="Separate" CellPaddingDefault="5" AutoGenerateColumns="false" RowSelectorsDefault="No"
RowHeightDefault="20px" Version="4.00" CellClickActionDefault="Edit" SelectTypeRowDefault="Extended"
StationaryMargins="Header" TableLayout="Fixed" >
<FrameStyle>
</FrameStyle>
<ActivationObject BorderColor="" BorderWidth="">
</ActivationObject>
</DisplayLayout>
</igtbl:UltraWebGrid>

********************************************************

Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Collections.Generic
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports Infragistics
Imports Infragistics.WebUI
Imports Infragistics.WebUI.UltraWebGrid
Imports Infragistics.WebUI.WebSchedule

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
SetSubtitle()
If Not IsPostBack Then
Response.Cache.SetNoServerCaching()
Response.Cache.SetCacheability(HttpCacheability.NoCache)
ClearCache()
LoadData()
End If

End Sub

Private Sub LoadData()
Dim ds As New DataSet
Try
ds = GetActionDataSet()
igAction.DataSource = ds
igAction.DataBind()
Catch ex As Exception
End Try
End Sub

Protected Sub igActionProcess_Init(ByVal sender As Object, ByVal e As EventArgs)
Try
Dim d As DropDownList = DirectCast(sender, DropDownList)
Dim ds As New DataSet

ds = GetDataSet("processes)
If IsDatasetValid(ds) Then
d.DataSource = ds
d.DataBind()
End If
Catch ex As Exception
End Try
End Sub

Protected Sub igActionType_Init(ByVal sender As Object, ByVal e As EventArgs)
Dim d As DropDownList = DirectCast(sender, DropDownList)
Dim ds As New DataSet

Try
Try
ds = GetDataSet("actiontypelist")
If IsDatasetValid(ds) Then
d.DataSource = ds
d.DataBind()
End If
Catch ex As Exception
End Try
Catch ex As Exception
End Try
End Sub

Protected Sub igActionStatus_Init(ByVal sender As Object, ByVal e As EventArgs)
Dim d As DropDownList = DirectCast(sender, DropDownList)
Dim ds As New DataSet

Try
Try
ds = GetDataSet("statuslist")
If IsDatasetValid(ds) Then
d.DataSource = ds
d.DataBind()
End If
Catch ex As Exception
End Try
Catch ex As Exception
End Try
End Sub

Protected Sub igActionDueDate_Init(ByVal sender As Object, ByVal e As EventArgs)
Try
Dim c As WebDateChooser = DirectCast(sender, WebDateChooser)
c.Format = DateFormat.Short
Catch ex As Exception
End Try
End Sub

Protected Sub igActionCompletionDate_Init(ByVal sender As Object, ByVal e As EventArgs)
Try
Dim c As WebDateChooser = DirectCast(sender, WebDateChooser)
c.Format = DateFormat.Short
Catch ex As Exception
End Try
End Sub

Protected Sub igActionDate_Init(ByVal sender As Object, ByVal e As EventArgs)
Try
Dim c As WebDateChooser = DirectCast(sender, WebDateChooser)
c.Format = DateFormat.Short
Catch ex As Exception
End Try
End Sub

Protected Sub igAction_UpdateRow(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.RowEventArgs)

End Sub
Cancel
Reply

Verify Answer

Cancel
29417

Verified Answer
Offline Maya Kirova posted over 12 years ago in reply to Daryl

Hello dbishop9 ,

1) I couldn’t reproduce this behavior but you might try using the RowTemplateStyle properties to customize the edit template. Try setting the Wrap property to true and TextOverflow.

2) It seems to me that we take the same approach for filling the DropDownList. I suggest that you debug the code in the initialize event of the drop down and check the data source of the drop down that you’re setting. Another approach that I can suggest is that you handle the InitializeLayout event of the grid and in it access the RowEditItem. In it you can find the controls in the RowEdit template and set data sources and data bind accordingly. For example:

DropDownList myList = (DropDownList)UltraWebGrid1.Bands[0].RowEditItem.FindControl("DD1");

myList.Items.Clear();

myList.DataSource = BuildTable();

myList.DataBind();

3) You can use the same approach I’ve mentioned for getting the items in the RowEditTemplate. For example in the Page_Load event get the drop down in the same way and check which is the selected index:

DropDownList myList = (DropDownList)UltraWebGrid1.Bands[0].RowEditItem.FindControl("DD1");

int index = myList.SelectedIndex;

Let me know if you have any further questions or if you need further assistance with this issue.

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support
Cancel
Reply

Reject Answer

Cancel
4110

Daryl posted over 12 years ago in reply to Maya Kirova

Great. Working wonderfully. Now my question is how to initialize/prefill the RowEdit items with the values of the row I selected?
Cancel
Reply

Verify Answer

Cancel
29417

Verified Answer
Offline Maya Kirova posted over 12 years ago in reply to Daryl

Hello dbishop9,

By default the values should be automatically prefilled when you set the columnkey property of the controls in the RowEditTemplate. This is getting set trough some ig java scripts and will set the current value automatically for all simple controls like text boxes, DropDownLists and so on. For controls like the WebDateChooser you might have to manually set the current value based on the current row you’re editing. Do you experience a different behavior when you set the columnkey property?

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support
Cancel
Reply

Reject Answer

Cancel
4110

Daryl posted over 12 years ago in reply to Maya Kirova

They are all working as expected, however, the WebDateChoosers (see below) are showing Null when there is no date. I have set the NullDataLabel="Select a Date', but it still shows null. I've also tried to set it in the InitializeRow method to an empty value, but it doesn't work either. Not sure what I need to do.

<igsch:WebDateChooser ID="igDueDate" columnkey="Due Date" runat="server"
EnableAppStyling="True" Section508Compliant="true" StyleSetName="Office2007Blue"
StyleSetPath="~/ig_res/" NullDataLabel="Select a Date" AllowNull="false" Format="Short" >
</igsch:WebDateChooser>

Dim dtDueDate As Infragistics.WebUI.WebSchedule.WebDateChooser = igActions.Bands(0).RowEditItem.FindControl("igDueDate")
If IsDate(e.Row.Cells(6).Text) = True Then
If CDate(e.Row.Cells(6).Text) <= CDate("1/1/2000") Then
e.Row.Cells(6).Text = " "
dtDueDate.Value = ""
Else
dtDueDate.Value = CDate(e.Row.Cells(6).Text)
End If
Else
dtDueDate.Value= ""
End If
Cancel
Reply

Verify Answer

Cancel

Reply

29417

Verified Answer
Offline Maya Kirova posted over 12 years ago in reply to Daryl

Hello dbishop9,

In my sample when I set the AllowNull to false it by default sets the current date. If I set: NullDateLabel="Select a date" AllowNull="true" then it shows the “Select a date" message.

Try setting it like this as well let me know what result it gives on your side.

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support
Cancel
Reply

Reject Answer

Cancel

Children

29417

Offline Maya Kirova posted over 12 years ago in reply to Daryl

Hello dbishop9,

Thank you for sharing your approach.

I’m glad that you managed to resolved your issue.

Let me know if you have any further need of assistance with this issue.

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support
Cancel
Reply

Verify Answer

Cancel
4110

Verified Answer
Daryl posted over 12 years ago in reply to Daryl

Hi Maya. I have resolved the issue on my own. While this may not be the "best" way to do it, it is the only one so far that has worked for me. In the BeforeRowTemplateOpenHandler, just before I assign the cell's date value to the WebDateChooser, I manually format the UTC date by using a bit of free javascript from the following link rather than spending time building my own formatting function.(I don't know if it's okay to include an outside link or not).

http://blog.stevenlevithan.com/archives/date-time-format

So now my code is:

function igMyGrid_BeforeRowTemplateOpenHandler(gridName, rowId, templateId) {
    var row = igtbl_getRowById(rowId);
    var currentValDueDate = row.getCell(1).getValue();
    var currentValueCompletedDate = row.getCell(6).getValue();
    currentValDueDate = dateFormat(currentValDueDate, "mm/dd/yyyy");
    currentValueCompletedDate = dateFormat(currentValueCompletedDate, "mm/dd/yyyy");
    dateChooserDueDate.value = currentValDueDate;
    dateChooserDueDate.inputBox.value = currentValDueDate;
    dateChooserCompletedDate.value = currentValueCompletedDate;
    dateChooserCompletedDate.inputBox.value = currentValueCompletedDate;
}

function igMyGridDueDate_InitializeDateChooser(oDateChooser) {
    dateChooserDueDate = oDateChooser;
}
function igMyGridCompletedDate_InitializeDateChooser(oDateChooser) {
    dateChooserCompletedDate = oDateChooser;

}

This now makes the WebDateChooser display the initial date value as 02/01/2012, as I need it to to fulfill the requirements. Again, I'm still not sure what I have set or not set that was causing the previous methods to fail, but this overrides that and gives me the expected result I need.
Cancel
Reply

Reject Answer

Cancel
4110

Daryl posted over 12 years ago in reply to Maya Kirova

Here is what I have in both HTML & code. How do I set the culture?

<igsch:WebDateChooser ID="igDueDate" runat="server"
EnableAppStyling="True" Section508Compliant="true" StyleSetName="Office2007Blue" Format="Short"
DisplayModeFormat="d" EditModeFormat="d" StyleSetPath="~/ig_res/" NullDateLabel="Select a Date"
AllowNull="true" ClientSideEvents-InitializeDateChooser ="igDueDate_InitializeDateChooser">
</igsch:WebDateChooser>

With e.Layout.Bands(0).Columns.FromKey("DATE")
.Header.Caption = "Due Date"
.DataType = "System.DateTime"
.Format = "MM/dd/yyyy".Header.Style.HorizontalAlign = HorizontalAlign.Center
.CellStyle.HorizontalAlign = HorizontalAlign.Center
.Width = Unit.Pixel(75)
End With
Cancel
Reply

Verify Answer

Cancel
29417

Offline Maya Kirova posted over 12 years ago in reply to Daryl

Hello dbishop9 ,

Have you tried setting the ShortDatePattern with:

c.DateTimeFormat.ShortDatePattern = "yyyy/MM/dd";

Where c is the current culture info.

Also you need to set for the Format prorty of the WebDateChooser to Short. For example:

<igsch:WebDateChooser ID="WebDateChooser1" columnkey="Data" runat="server" AllowNull="false" Format="Short" OnInit="WebDateChooser1_Init">

                                <ClientSideEvents InitializeDateChooser="WebDateChooser1_InitializeDateChooser">

                                </ClientSideEvents>

                            </igsch:WebDateChooser>

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://es.infragistics.com/support
Cancel
Reply

Verify Answer

Cancel
4110

Daryl posted over 12 years ago in reply to Maya Kirova

Hi Maya, That was the problem. I didn't know I had to actually initialize the clent-side events. I haven't had to do that for other controls. Thanks so much. I still can't get the display/text format to work. I've set the display format to "d" and it works after I've selected a date, but for the initial date it shows the Fri Sept 30 00:00:00 CDT 2011 format. I've set it in the control, in the code-behind on row initalize and control initialize, but nothing seems to work. I've even captured the value from the grid cell, formatting it, then assigned it to the control, but it still fails. This will keep me from using the grid, because the date has to initially display as mm/dd/yyyy. Any ideas?
Cancel
Reply

Verify Answer

Cancel