[CLOSED] Popup on grid cell click

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Popup on grid cell click

    Hello,

    I have a gridpanel control and a window control holding a text area control in it. Now, when I click on a cell on the grid, I make the window open as a pop up. When the user edits the text area inside the window and close it, and on a save button click outside the grid, I need to save this edited text. (I already have implemented save functionality for other columns in the grid. I only need to add this text area value along with other values while saving.)

    Thanks in advance.
    Last edited by Daniil; Jun 02, 2014 at 2:00 PM. Reason: [CLOSED]
  2. #2
    Do any of the samples in the Examples Explorer come close to your requirements?

    There's more than 100 GridPanel related samples in the Examples Explorer.
    Geoffrey McGill
    Founder
  3. #3
    Hello Geoffrey,

    I tried looking at all the samples but did not find any that was of help to me.

    I have a grid with 5 columns. One of the columns needs long text. So I added a column where if you click the icon in the cell, opens new window with text box. I enter text in the text box and close it. Then I save the grid. The grid save operation should save the text in the text box as well and when the grid is reloaded should populate the text box with the text for the row.

    Thanks for the help.

    Quote Originally Posted by geoffrey.mcgill View Post
    Do any of the samples in the Examples Explorer come close to your requirements?

    There's more than 100 GridPanel related samples in the Examples Explorer.
  4. #4
    The first place to start will be providing a code sample demonstrating as much of the scenario as possible.

    Please ensure you remove all code that is not directly related to the problem.

    You can review the forum Guidelines at the following location(s):

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
  5. #5
    Please refer the screenshot as how I am trying to get it done.

    On click of long description image button, a pop up appears with a text area and on entering value it has to save with other row values.

    Code sample is below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DrodpownPage.aspx.cs" Inherits="DrodpownPage" MasterPageFile ="~/Site.master"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
     <asp:Content ID="ContentPlaceHolder" ContentPlaceHolderID="MainContent" runat="server">
      
    
            <ext:XScript ID="XScript1" runat="server"> 
            <script>
               var topicValues = function (value) 
                    {           
                    //alert(#{StoreCombo}.getById(value));
                     var r = #{StoreCombo}.getById(value);   
                         if (Ext.isEmpty(r)) 
                                {                
                                return "";           
                                 }              
                                 return r.data.TopicName;        
                       };  
             };
             </script>  
            </ext:XScript>
    
            <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: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();">
                        </Command>
                    </Listeners>
                </ext:ImageCommandColumn>
    
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing>
                        
                    </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" Text="Enter Long Description" MaxLength="2000"  AutoScroll="true" runat="server" />
        </Items>
    </ext:Window>
    </asp:Content>
    Attached Thumbnails Click image for larger version. 

Name:	popUp1.png 
Views:	44 
Size:	17.8 KB 
ID:	11531  
  6. #6
    I don't think we have Site.master. It would be better if you create a standalone example.

    Anyway, I've tried to run it, but it threw a JavaScipt error because of "};". After removing that, I finally got something, but a GridPanel has no rows. I don't think I can click any cell if there is no row.
  7. #7
    Here is the running code.

    aspx page

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupQuery.aspx.cs" Inherits="PopupQuery" %>
    <%@ 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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:XScript ID="XScript1" runat="server"> 
            <script>
    
               var topicValues = function (value) 
                    {  
                     var r = #{StoreCombo}.getById(value);   
                         if (Ext.isEmpty(r)) 
                                {                
                                return "";           
                                 }              
                                 return r.data.TopicName;        
                       }; 
             
             </script>  
            </ext:XScript>
    
            <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: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();">
                        </Command>
                    </Listeners>
                </ext:ImageCommandColumn>
    
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing>
                       
                    </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" Text="Enter Long Description" MaxLength="2000"  AutoScroll="true" runat="server" />
        </Items>
    </ext:Window>
    </div>
        </form>
    </body>
    </html>
    Code behind page

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    using Ext.Net;
    
    public partial class PopupQuery : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                //DataSource for StoreCombo
                List<object> StoreComboData = new List<object>
                                        {
                                            new {TopicID="1",TopicName="Topic1"},
                                            new {TopicID="2",TopicName="Topic2"},
                                            new {TopicID="3",TopicName="Topic3"}
                                        };
                StoreCombo.DataSource = StoreComboData;
                StoreCombo.DataBind();
    
                
    
                //DataSource for GridBox
                List<object> gridData = new List<object>
                                        {
                                            new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1" },
                                            new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2"},
                                            new {TopicID = "2", TopicName = "Topic2", ShortDescription="Test3"},
                                            new {TopicID = "2", TopicName = "Topic2", ShortDescription="Test4"},
                                            new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test5" },
                                        };
                Store1.DataSource = gridData;
                Store1.DataBind();
            }
        }
    }
    Attached Thumbnails Click image for larger version. 

Name:	popUpquery.png 
Views:	28 
Size:	19.5 KB 
ID:	11591  
    Last edited by vmehta; May 29, 2014 at 5:50 AM.
  8. #8
    @vmehta,

    I edited your code so that the values you enter in the textfield are added to the row's data.

    When you want to save, the new value is now available to you.

    EDIT: forgot to fill the textfield with the value when opened. Now value is filled.

    ASPX page:

    <!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>
     
               var topicValues = function (value) 
                    {  
                     var r = #{StoreCombo}.getById(value);   
                         if (Ext.isEmpty(r)) 
                                {                
                                return "";           
                                 }              
                                 return r.data.TopicName;        
                       }; 
              
             </script>  
            </ext:XScript>
            <script>
                function saveLongDescriptionToGrid() {
                    var longDescription = App.txtArLongDesp.getRawValue();
                    var selectedRow = App.GridPanel1.getSelectionModel();
                    selectedRow[0].data.LongDescription = 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 Long Description"
                        MaxLength="2000" AutoScroll="true" runat="server" />
                </Items>
                <Listeners>
                    <Close Handler="saveLongDescriptionToGrid()">
                    </Close>
                </Listeners>
            </ext:Window>
        </div>
        </form>
    </body>
    </html>
    Last edited by EnZo; May 29, 2014 at 1:38 PM.
  9. #9
    Thank you, @EnZo.

    @vmehta, could you, please, conform the @EnZo's suggestion helps you?
  10. #10
    Hey EnZo,

    Thanks for the reply. But I get a javascript error saying property data is not defined in the below code.

    selectedRow[0].data.LongDescription = longDescription;
    Attached Thumbnails Click image for larger version. 

Name:	javascriptEr.png 
Views:	22 
Size:	3.9 KB 
ID:	11701  
    Last edited by Daniil; May 30, 2014 at 1:23 PM. Reason: Please use [CODE] tags
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Oct 23, 2015, 4:56 PM
  2. Replies: 0
    Last Post: Jul 15, 2013, 1:47 PM
  3. Replies: 0
    Last Post: May 12, 2012, 11:24 AM
  4. Replies: 1
    Last Post: Apr 11, 2012, 12:52 PM
  5. [CLOSED] on click cell in grid row removed
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 29, 2009, 1:30 AM

Posting Permissions