Sep 26, 2012, 9:16 AM
Unable to implement Custom Window with Record Details
I have GridPanel with a CommandColumn which when clicked opens a Modal Window which is inside a User Control.
Once details have been changed in the Edit Window and 'Save' button is clicked, I want the GridPanel to refersh and show updated data.
I have tried to use this example as base model - https://examples1.ext.net/#/GridPane...Window_Remote/
Note: Grid is Bound to ObjectDataSource (If that matters)
HTML of Page with GridPanel
HTML for User Control that contains the Window
Please help me find what's missing.
Thanks!
Once details have been changed in the Edit Window and 'Save' button is clicked, I want the GridPanel to refersh and show updated data.
I have tried to use this example as base model - https://examples1.ext.net/#/GridPane...Window_Remote/
Note: Grid is Bound to ObjectDataSource (If that matters)
HTML of Page with GridPanel
<ext:Viewport ID="ViewportOrder" runat="server" Layout="border">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center MarginsSummary="0 5 0 5">
<ext:Panel ID="MainPanel" runat="server" Region="Center" Border="false" Padding="0"
Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server" Height="27">
<Items>
<ext:Button ID="Button1" runat="server" Icon="Add" StandOut="true" Text="Create New...">
<Listeners>
<Click Handler="CreateClientWindow.show()" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Create New Client" />
</ToolTips>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Content>
<asp:ObjectDataSource ID="ODSClient" runat="server" SelectMethod="GetByCompanyWithDetail"
TypeName="DMS.Objects.Client" />
<ext:GridPanel runat="server" ID="GridPanel1" Title="Clients" Height="200" AutoExpandColumn="Title">
<Store>
<ext:Store ID="ClientStore" runat="server" OnRefreshData="ClientStore_RefreshData"
DataSourceID="ODSClient">
<Reader>
<ext:JsonReader IDProperty="ClientID">
<Fields>
<ext:RecordField Name="ClientID" />
<ext:RecordField Name="ParentClientID" />
<ext:RecordField Name="ParentClientName" />
<ext:RecordField Name="CompanyID" />
<ext:RecordField Name="Name" />
<ext:RecordField Name="Title" />
<ext:RecordField Name="Code" />
<ext:RecordField Name="ContractDate" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Title" Header="Title" DataIndex="Title">
</ext:Column>
<ext:Column ColumnID="Code" Header="Code" DataIndex="Code">
</ext:Column>
<ext:Column ColumnID="ParentClientName" Header="Parent Client" DataIndex="ParentClientName">
</ext:Column>
<ext:DateColumn ColumnID="ContractDate" Header="Contract Date" DataIndex="ContractDate">
</ext:DateColumn>
<ext:CommandColumn Width="25">
<Commands>
<ext:GridCommand Icon="NoteEdit" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:CommandColumn Width="25">
<Commands>
<ext:GridCommand Icon="NoteDelete" CommandName="Delete">
<ToolTip Text="Delete" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
<DirectEvents>
<RowSelect OnEvent="ReloadAsset">
<ExtraParams>
<ext:Parameter Name="ClientID" Value="record.id" Mode="Raw" />
</ExtraParams>
</RowSelect>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="9" DisplayInfo="true"
DisplayMsg="Displaying clients {0} - {1} of {2}" EmptyMsg="No clients to display" />
</BottomBar>
<DirectEvents>
<Command OnEvent="HandleCommand">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Command" Value="command" Mode="Raw" />
<ext:Parameter Name="ClientID" Value="record.id" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:GridPanel>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
Codebehind for the page with GridPanel Public Sub HandleCommand(ByVal sender As Object, ByVal e As DirectEventArgs)
If e.ExtraParams.Item("Command") = "Edit" Then
Me.EditWindow.GridStore = Me.ClientStore
Session("GridStore") = Me.ClientStore
Me.EditWindow.nClientID = e.ExtraParams.Item("ClientID")
Me.EditWindow.Show()
End If
End Sub
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
Me.EditWindow.GridStore = Me.ClientStore
End Sub
HTML for User Control that contains the Window
<asp:ObjectDataSource ID="ODSClient" runat="server" SelectMethod="GetByCompany" TypeName="DMS.Objects.Client" />
<ext:Window ID="EditClientWindow" runat="server" Icon="GroupEdit" Title="Edit Client"
Hidden="true" Width="700" Height="440" Maximizable="false" Modal="true" Collapsible="false"
AutoShow="false">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" DeferredRender="false">
<Items>
<ext:Panel ID="MainPanel" runat="server" Region="Center" Border="false" Padding="0"
Layout="Fit" Height="405" Title="Client Information">
<Content>
<ext:FormPanel ID="StatusForm" runat="server" LabelWidth="75" ButtonAlign="Right"
Border="False" PaddingSummary="5px 5px 5px" AutoScroll="true" Frame="true" Layout="Form">
<Defaults>
<ext:Parameter Name="Anchor" Value="98%" />
<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
<ext:Parameter Name="MsgTarget" Value="side" />
</Defaults>
<Items>
<ext:Panel ID="Panel1" runat="server" Height="280" Padding="3">
<Items>
<ext:Container ID="Container39" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container40" runat="server" Width="300" Height="25">
<Items>
<ext:DateField ID="ContractDate" runat="server" FieldLabel="Contract Date" BlankText="Contract Date is Required"
AllowBlank="false" Width="300" LabelWidth="110" Format="D, dd MMMM yyyy" />
</Items>
</ext:Container>
<ext:Container ID="Container8" runat="server" Width="10">
</ext:Container>
<ext:Container ID="Container9" runat="server" Width="300" Height="25">
<Items>
<ext:TextField ID="txtCode" runat="server" FieldLabel="Code" BlankText="Code is Required"
AllowBlank="false" Width="300" LabelWidth="110" MaxLengthText="5" MinLength="5"
MinLengthText="Min. length is 5" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container5" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container10" runat="server" Width="300" Height="25">
<Items>
<ext:ComboBox ID="cbParentClient" runat="server" FieldLabel="Parent Client" AllowBlank="true"
Width="300" LabelWidth="110" ValueField="ClientID" DisplayField="Title" AlwaysMergeItems="true">
<Items>
<ext:ListItem Text="None" Value="0" />
</Items>
<Store>
<ext:Store ID="ClientStore" runat="server" AutoLoad="true" DataSourceID="ODSClient">
<Reader>
<ext:JsonReader IDProperty="ClientID">
<Fields>
<ext:RecordField Name="ClientID" />
<ext:RecordField Name="Code" />
<ext:RecordField Name="Title" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</Items>
</ext:Container>
<ext:Container ID="Container13" runat="server" Width="10">
</ext:Container>
<ext:Container ID="Container14" runat="server" Width="300" Height="25">
<Items>
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container41" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container42" runat="server" Width="610" Height="25">
<Items>
<ext:TextField ID="txtTitle" runat="server" FieldLabel="Title" BlankText="Title is Required"
AllowBlank="false" Width="610" LabelWidth="110" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container11" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container12" runat="server" Width="610" Height="25">
<Items>
<ext:TextField ID="txtArabicTitle" runat="server" FieldLabel="Arabic Title" AllowBlank="true"
Width="610" LabelWidth="110" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container33" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container34" runat="server" Width="610" Height="25">
<Items>
<ext:TextField ID="txtName" runat="server" FieldLabel="Name" AllowBlank="false" BlankText="Name is Required"
Width="610" LabelWidth="110" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container43" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container44" runat="server" Width="610" Height="25">
<Items>
<ext:TextField ID="txtArabicName" runat="server" FieldLabel="Arabic Name" AllowBlank="true"
Width="610" LabelWidth="110" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container1" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="SpacerContainerTel" runat="server" Width="115">
</ext:Container>
<ext:Container ID="Container2" runat="server" Width="245" Height="25">
<Items>
<ext:NumberField ID="txtTelephone" runat="server" Icon="Telephone" AllowBlank="True"
Width="245" AllowNegative="false" MinLength="10" />
</Items>
</ext:Container>
<ext:Container ID="SpacerContainereEmail" runat="server" Width="5">
</ext:Container>
<ext:Container ID="Container3" runat="server" Width="245" Height="25">
<Items>
<ext:TextField ID="txtEmail" runat="server" Icon="Email" AllowBlank="true" Width="245" />
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="Container35" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="Container36" runat="server" Height="55" Width="610">
<Items>
<ext:TextArea ID="txtNotes" runat="server" FieldLabel="Note" Height="50" Width="610"
LabelWidth="110">
</ext:TextArea>
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:Container ID="MulitComboContainer" runat="server" Layout="ColumnLayout">
<Items>
<ext:Container ID="cont1" runat="server" Height="25" Width="610">
<Items>
<ext:MultiCombo ID="cbSettings" runat="server" SelectionMode="All" Width="610" FieldLabel="Settings"
LabelWidth="110">
<Items>
<ext:ListItem Text="Include Signature in every confirmation" Value="1" />
<ext:ListItem Text="All sub-clients require web access" Value="2" />
<ext:ListItem Text="Arabic Language is default for all web access" Value="Arabic Language is default for all web access" />
<ext:ListItem Text="Managed" Value="4" />
<ext:ListItem Text="Archived" Value="5" />
</Items>
</ext:MultiCombo>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:FormPanel>
</Content>
<BottomBar>
<ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready" Height="20">
<Plugins>
<ext:ValidationStatus ID="ValidationStatus1" runat="server" FormPanelID="StatusForm"
ValidIcon="Accept" ErrorIcon="Exclamation" />
</Plugins>
</ext:StatusBar>
</BottomBar>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
<Buttons>
<ext:Button ID="btnUpdate" runat="server" Text="Save" Icon="Disk">
<DirectEvents>
<Click OnEvent="UpdateData">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{EditClientWindow}.body}" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="CancelButton" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="#{EditClientWindow}.hide(null);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
Codebehind for the User ControlImports DMS.Objects
Imports Ext.Net
Imports System.Data.SqlClient
Imports System.Threading
Partial Class ClientCreateControl
Inherits System.Web.UI.UserControl
Private Connection As New Data.SqlClient.SqlConnection(ConfigurationManager.AppSettings("ConnectionString"))
Private _clientid As Int32
Private _Store As Ext.Net.Store
Public Property GridStore() As Store
Get
Return _Store
End Get
Set(value As Store)
_Store = value
End Set
End Property
Public Property nClientID() As Int32
Get
Return _clientid
End Get
Set(value As Int32)
_clientid = value
End Set
End Property
Public Sub Show()
Me.cbSettings.SelectItem(0)
Dim Client As New Client(Me.Connection)
Client.ClientID = Me.nClientID
Session("ID") = Me.nClientID
Client = Client.GetClient.Item(0)
If Client.ArabicDefaultLanguage = True Then
Me.cbSettings.SelectItem(2)
End If
ContractDate.Text = Client.ContractDate
txtTitle.Text = Client.Title
txtName.Text = Client.Name
txtArabicTitle.Text = Client.ArabicTitle
txtArabicName.Text = Client.ArabicName
txtTelephone.Text = Client.Telephone
txtEmail.Text = Client.Email
txtCode.Text = Client.Code
txtNotes.Text = Client.Notes
For Each item As Object In ODSClient.Select
If DirectCast(item, DMS.Objects.Client).ParentClientID = Client.ParentClientID And Client.ParentClientID <> 0 Then
Me.cbParentClient.SelectedItem.Value = DirectCast(item, Client).ParentClientID
Me.cbParentClient.SelectedItem.Text = DirectCast(item, Client).Name
End If
Next
Me.EditClientWindow.Show()
End Sub
Protected Sub UpdateData(ByVal sender As Object, ByVal e As DirectEventArgs)
Dim success As Int32
Dim Client As New DMS.Objects.Client
Client.ClientID = Int32.Parse(Session("ID"))
If Not Me.cbParentClient.SelectedItem.Value Is Nothing Then
Client.ParentClientID = Int32.Parse(Me.cbParentClient.SelectedItem.Value)
Else
Client.ParentClientID = 0
End If
With Client
.ConnectionString = Connection
.CompanyID = Session("CompanyID")
.ContractDate = Date.Parse(ContractDate.RawValue)
.Code = Me.txtCode.Text
.Title = Me.txtTitle.Text
.ArabicTitle = Me.txtArabicTitle.Text
.Name = Me.txtName.Text
.ArabicName = Me.txtArabicName.Text
.Notes = Me.txtNotes.Text
.Telephone = Me.txtTelephone.Text
.Email = Me.txtEmail.Text
.CreatedOn = Date.Now
.ModifiedBy = 1 'DirectCast(Session("UserSession"), UserSession).UserID
.ModifiedOn = Date.Now
For Each item As Ext.Net.SelectedListItem In Me.cbSettings.SelectedItems
Select Case item.Text
Case "Archived"
.IsArchived = True
Case "Include Signature in every confirmation"
.RequireSignature = True
Case "Arabic Language is default for all web access"
.ArabicDefaultLanguage = True
Case "All sub-clients require web access"
.AllClientRequireWebAccess = True
End Select
Next
End With
success = Client.Update
'Call this only after sucessful save
If success = 1 Then
'SaveNotification(Me.txtName.Text & " client has been updated successfully")
Dim TempStore As Store
TempStore = DirectCast(Session("GridStore"), Store) 'Did this because at this point Me.GridStore is Nothing!
With TempStore
.LoadData(Client.GetByCompanyWithDetail)
.DataBind()
End With
Me.EditClientWindow.Hide()
Else
' SaveNotification(Me.txtName.Text & " client update failed.")
End If
End Sub
Protected Sub FormSave(ByVal sender As Object, ByVal e As DirectEventArgs)
FormStatusBar.Icon = Icon.Accept
FormStatusBar.SetStatus("Form Saved")
End Sub
Private Sub SaveNotification(ByVal Message As String)
Notification.Show(New NotificationConfig() With { _
.Title = "Confirmation", _
.AlignCfg = New NotificationAlignConfig() With { _
.ElementAnchor = AnchorPoint.Right, _
.TargetAnchor = AnchorPoint.Right, _
.OffsetX = 0, _
.OffsetY = -88, _
.El = btnUpdate.ClientID _
}, _
.ShowFx = New SlideIn() With { _
.Anchor = AnchorPoint.Right _
}, _
.HideFx = New Ghost() With { _
.Anchor = AnchorPoint.Right _
}, _
.Height = 150, _
.Html = Message _
})
End Sub
Protected Sub ODSClient_ObjectCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ObjectDataSourceEventArgs) Handles ODSClient.ObjectCreated
Dim Client As New Client
Client = DirectCast(e.ObjectInstance, Client)
Client.ConnectionString = Me.Connection
Client.CompanyID = Session("CompanyID")
End Sub
End Class
Please help me find what's missing.
Thanks!