PDA

View Full Version : [CLOSED] Popup on grid cell click



vmehta
May 27, 2014, 2:55 PM
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.

geoffrey.mcgill
May 27, 2014, 3:06 PM
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.

vmehta
May 27, 2014, 3:32 PM
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.


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
May 27, 2014, 4:52 PM
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?3440-Forum-Guidelines-For-Posting-New-Topics

http://forums.ext.net/showthread.php?10205-More-Information-Required

vmehta
May 28, 2014, 2:24 PM
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({selectedOn ly: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>

Daniil
May 28, 2014, 3:24 PM
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.

vmehta
May 29, 2014, 5:46 AM
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({selectedOn ly: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();
}
}
}

EnZo
May 29, 2014, 8:36 AM
@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.LongDescript ion);">
</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({selectedOn ly: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>

Daniil
May 29, 2014, 12:44 PM
Thank you, @EnZo.

@vmehta, could you, please, conform the @EnZo's suggestion helps you?

vmehta
May 30, 2014, 12:38 PM
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;

Daniil
May 30, 2014, 1:34 PM
It should work with

function saveLongDescriptionToGrid() {
var longDescription = App.txtArLongDesp.getRawValue(),
selectedRow = App.GridPanel1.getSelectionModel().getSelection()[0];
selectedRow.data.LongDescription = longDescription;
}

By the way, do you really need to select a row when a Window opens for that row? It might be done without selection.

vmehta
Jun 02, 2014, 1:59 PM
This one worked!! Thanks :)