Unable to implement Custom Window with Record Details

  1. #1

    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
       <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 Control

    Imports 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!
  2. #2

    Solution!

    Simply had to add following

    <Listeners>
            <BeforeHide Handler="#{GridPanel1}.reload();" />
    </Listeners>
    to the window in the user control which when hidden will do the trick

    Please note that GridPanel1 is the name of the GridPanel in the window.

    Also to clean up the code I removed the following lines from UpdateData Sub

     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
    Following from Store Definition in Parent Page

    OnRefreshData="ClientStore_RefreshData"

    Following from User Control Code Behind

    Public Property GridStore
    Private Property _GridStore
    Please note that this works because GridPanel in the parent page is bound to a ObjectDataSource which calls a function in the Class to load the data from DB.

    I updated the Database in UpdateData Function first, then all I needed to do is call a load on the GridPanel to reload the data.

    Hope this helps someone.

    Enjoy!

Similar Threads

  1. Replies: 0
    Last Post: Aug 31, 2012, 11:38 AM
  2. Replies: 1
    Last Post: Apr 22, 2012, 3:17 PM
  3. Replies: 0
    Last Post: Oct 24, 2011, 4:26 PM
  4. [CLOSED] DataView Template unable to read the store Record Field
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 20, 2010, 3:23 PM
  5. [CLOSED] details window variation
    By alexp in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 23, 2009, 7:40 AM

Tags for this Thread

Posting Permissions