[CLOSED] pop up grid editor

  1. #1

    [CLOSED] pop up grid editor

    Hello,
    I have a grid with pop up text editor, the pop up shows if one of the rows clicked. The problem is that after I close the pop up, it passed the value to the row grid but it doesn't show the new value immediately, only after I click the row once again then it changed to the passed value. Please help me with this.

    Thank you.



    aspx form:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="RowTemplate.aspx.vb" Inherits="RowExpen.RowTemplate" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:XScript ID="XScript1" runat="server">
            <script type ="text/jscript">
      
               var topicValues = function (value)
                    { 
                     var r = #{StoreCombo}.getById(value);  
                         if (Ext.isEmpty(r))
                                {               
                                return "";          
                                 }             
                                 return r.data.TopicName;       
                       };
               
             </script> 
            </ext:XScript>
            <script type ="text/jscript">
                function saveLongDescriptionToGrid() {
                    var longDescription = App.txtArLongDesp.getRawValue(),
                    selectedRow = App.GridPanel1.getSelectionModel().getSelection()[0];
                    selectedRow.data.ShortDescription = longDescription;
                }
    
            </script>
            <ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
            <ext:Store ID="StoreCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="TopicID">
                        <Fields>
                            <ext:ModelField Name="TopicID" />
                            <ext:ModelField Name="TopicName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="TopicID" />
                                    <ext:ModelField Name="TopicName" />
                                    <ext:ModelField Name="ShortDescription" />
                                    <ext:ModelField Name="LongDescription" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
                            <Renderer Fn="topicValues" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
                                    ValueField="TopicID" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
                            Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnLongDescription" runat="server" DataIndex="LongDescription"
                            Hidden="true" Hideable="false">
                        </ext:Column>
                        <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="Long Description">
                            <Commands>
                                <ext:ImageCommand CommandName="LongDescription" Icon="TextAlignRight" ToolTip-Text="Long Description">
                                </ext:ImageCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="#{window2}.show(); #{txtArLongDesp}.reset(); #{CheckboxSelectionModel1}.select(record.index); #{txtArLongDesp}.setValue(record.data.LongDescription);">
                                </Command>
                            </Listeners>
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server">
                    </ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click>
                                        <ExtraParams>
                                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
            <ext:Window ID="window2" runat="server" Hidden="true" Width="510px">
                <Items>
                    <ext:TextArea ID="txtArLongDesp" Width="500px" EmptyText="Enter Short Description"
                        MaxLength="2000" AutoScroll="true" runat="server" />
                </Items>
                <Listeners>
                    <Close Handler="saveLongDescriptionToGrid()">
                    </Close>
                </Listeners>
            </ext:Window>
        </div>
        </form>
    </body>
    </html>
    code behind:
    Imports Ext.Net
    Imports System.Collections.Generic
    
    Public Class RowTemplate
        Inherits System.Web.UI.Page
        Dim x As New Ext.Net.X
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not X.IsAjaxRequest Then
                'DataSource for StoreCombo
                Dim StoreComboData As New List(Of Object)() From { _
                 New With { _
                   .TopicID = "1", _
                   .TopicName = "Topic1" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3" _
                 } _
                }
                StoreCombo.DataSource = StoreComboData
                StoreCombo.DataBind()
    
    
    
                'DataSource for GridBox
                Dim gridData As New List(Of Object)() From { _
                 New With { _
                    .TopicID = "1", _
                    .TopicName = "Topic1", _
                    .ShortDescription = "Test1" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3", _
                    .ShortDescription = "Test2" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2", _
                    .ShortDescription = "Test3" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2", _
                    .ShortDescription = "Test4" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3", _
                    .ShortDescription = "Test5" _
                 } _
                }
                Store1.DataSource = gridData
                Store1.DataBind()
            End If
    
        End Sub
    
    End Class
    Attached Thumbnails Click image for larger version. 

Name:	pic.png 
Views:	33 
Size:	10.9 KB 
ID:	12751  
    Last edited by Daniil; Jun 19, 2014 at 6:33 AM. Reason: [CLOSED]
  2. #2
    Hi @redi,

    We have asked you a few times to put the code behind directly on the .aspx page. For example, in this thread:
    http://forums.ext.net/showthread.php?34841

    Could you follow that, please?
  3. #3
    Hello,
    Sorry about that. Here's the code.

    <%@ Page Language="vb"%>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <%@ Import Namespace="Ext.Net.Utilities"%>
    <%@ Import Namespace="System.Collections.Generic"%>
    
       <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not ExtNet.IsAjaxRequest Then
    
                Dim StoreComboData As New List(Of Object)() From { _
                 New With { _
                   .TopicID = "1", _
                   .TopicName = "Topic1" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3" _
                 } _
                }
                StoreCombo.DataSource = StoreComboData
                StoreCombo.DataBind()
    
    
                Dim gridData As New List(Of Object)() From { _
                 New With { _
                   .TopicID = "1", _
                    .TopicName = "Topic1", _
                    .ShortDescription = "Test1" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3", _
                    .ShortDescription = "Test2" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2", _
                    .ShortDescription = "Test3" _
                 }, _
                 New With { _
                    .TopicID = "2", _
                    .TopicName = "Topic2", _
                    .ShortDescription = "Test4" _
                 }, _
                 New With { _
                    .TopicID = "3", _
                    .TopicName = "Topic3", _
                    .ShortDescription = "Test5" _
                 } _
                }
                Store1.DataSource = gridData
                Store1.DataBind()
            End If
        End Sub
        </script>
    
    <!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 id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:XScript ID="XScript1" runat="server">
            <script type ="text/jscript">
      
               var topicValues = function (value)
                    { 
                     var r = #{StoreCombo}.getById(value);  
                         if (Ext.isEmpty(r))
                                {               
                                return "";          
                                 }             
                                 return r.data.TopicName;       
                       };
               
             </script> 
            </ext:XScript>
            <script type ="text/jscript">
                function saveLongDescriptionToGrid() {
                    var longDescription = App.txtArLongDesp.getRawValue(),
                    selectedRow = App.GridPanel1.getSelectionModel().getSelection()[0];
                    selectedRow.data.ShortDescription = longDescription;
                }
    
            </script>
            <ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
            <ext:Store ID="StoreCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="TopicID">
                        <Fields>
                            <ext:ModelField Name="TopicID" />
                            <ext:ModelField Name="TopicName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="TopicID" />
                                    <ext:ModelField Name="TopicName" />
                                    <ext:ModelField Name="ShortDescription" />
                                    <ext:ModelField Name="LongDescription" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
                            <Renderer Fn="topicValues" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
                                    ValueField="TopicID" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
                            Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnLongDescription" runat="server" DataIndex="LongDescription"
                            Hidden="true" Hideable="false">
                        </ext:Column>
                        <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="Long Description">
                            <Commands>
                                <ext:ImageCommand CommandName="LongDescription" Icon="TextAlignRight" ToolTip-Text="Long Description">
                                </ext:ImageCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="#{window2}.show(); #{txtArLongDesp}.reset(); #{CheckboxSelectionModel1}.select(record.index); #{txtArLongDesp}.setValue(record.data.LongDescription);">
                                </Command>
                            </Listeners>
                        </ext:ImageCommandColumn>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server">
                    </ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click>
                                        <ExtraParams>
                                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
            <ext:Window ID="window2" runat="server" Hidden="true" Width="510px">
                <Items>
                    <ext:TextArea   ID="txtArLongDesp" Width="200px" Height="200px" EmptyText="Enter Short Description"
                        MaxLength="2000" AutoScroll="true" runat="server" />
                </Items>
    
                <Listeners>
                    <Close Handler="saveLongDescriptionToGrid()">
                    </Close>
                </Listeners>
            </ext:Window>
        </div>
        </form>
    </body>
    </html>
  4. #4
    Thank you.

    To get it updated, please replace
    selectedRow.data.ShortDescription = longDescription;
    with
    selectedRow.set("ShortDescription", longDescription);
  5. #5
    Thank you so much. It works.

Similar Threads

  1. [CLOSED] Disable Editor grid row
    By AmitM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 19, 2013, 12:57 PM
  2. [OPEN] [#259] Data Grid Row Editor
    By RRD in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: May 31, 2013, 8:56 PM
  3. [CLOSED] Grid Pin editor with drop down box
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: May 23, 2013, 11:22 AM
  4. [CLOSED] Grid with popup editor
    By acrossdev in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2012, 11:22 AM
  5. Tab in Grid Editor
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 2
    Last Post: Aug 24, 2009, 10:44 AM

Tags for this Thread

Posting Permissions