PDA

View Full Version : [CLOSED] Paging in grid loses params



vmehta
Jun 02, 2014, 3:21 PM
Hello

I am doing paging functionality in my grid as in this - http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/DirectMethod/

If i do this, and add a new row and save, the params are not getting passed to the method in .cs page.



<ext:Button ID="btnSave" runat="server" Icon="Disk" ToolTip="Save">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOn ly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>


protected void btnSave_Click(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
Dictionary<string, string>[] dctIdea = JSON.Deserialize<Dictionary<string, string>[]>(json);
}

I am trying to figure out why.

EnZo
Jun 02, 2014, 3:27 PM
Hi @vmehta

I believe you can't deserialize to an array of dictionaries. Please check Daniil's post here (http://forums.ext.net/showthread.php?36011-Help-with-JSON-function&p=162551&viewfull=1#post162551)

Daniil
Jun 02, 2014, 5:01 PM
Hi @EnZo,

Thank you for the answer. Though, I think it is a bit different case. A result of getRowsValues call might be deserialized to an array of Dictionaries. Here is an example.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Submit_Two_Grids/

Hi @vmehta,

Please provide a full test case to reproduce.

vmehta
Jun 03, 2014, 12:56 PM
Here is the code sample. When paging is not implemented, it get the params values during save but when I did paging, the count is 0.

aspx


<%@ 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 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;

};

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


</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" PageSize="3">
<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 OnEvent="btnSave_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>

<BottomBar>

<ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Displaying ideas {0} - {1} of {2}"
EmptyMsg="No ideas to display" HideRefresh="true">

</ext:PagingToolbar>
</BottomBar>

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

.cs


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" },
new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test6" },
new {TopicID = "2", TopicName = "Topic2", ShortDescription="Test7" },
};
Store1.DataSource = gridData;
Store1.DataBind();
}

}

[DirectMethod]
protected void btnSave_Click(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);

string strTopicName = string.Empty;
string strTopicDescp = string.Empty;
string strTopicID = string.Empty;
foreach (Dictionary<string, string> row in dctTopics)
{

foreach (KeyValuePair<string, string> keyValuePair in row)
{
if (keyValuePair.Key == "TopicName")
{

strTopicName = keyValuePair.Value;
}

}



}
}
}

Thanks in advance

Daniil
Jun 03, 2014, 3:15 PM
Thank you.

Please set IDProperty="TopicID" for the Model2 or SelectionMemory="false" for the GridPanel. In the second case you will lose the functionality of maintaining selection across GridPanel's pages.

vmehta
Jun 05, 2014, 8:43 AM
Thanks. I was looking for this.