PDA

View Full Version : [CLOSED] pop up grid editor



redi
Jun 18, 2014, 9:09 AM
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.


http://forums.ext.net/attachment.php?attachmentid=12751&stc=1
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.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 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

Daniil
Jun 18, 2014, 10:43 AM
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?

redi
Jun 19, 2014, 5:17 AM
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.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="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>

Daniil
Jun 19, 2014, 5:31 AM
Thank you.

To get it updated, please replace

selectedRow.data.ShortDescription = longDescription;
with

selectedRow.set("ShortDescription", longDescription);

redi
Jun 19, 2014, 7:28 AM
Thank you so much. It works.