PDA

View Full Version : [CLOSED] Can fully control gridpanel in code behind?



asiaesolutions
Jan 09, 2013, 4:30 AM
I'm the newcomer with ext.net and I want to know is there anyway to fully control the gridpanel in code behind.
Because I want to build 1 search page with the gridpanel to display with a lot dynamic input parameter(over 15) and trigger it by a button. I search the forum and look the demo, almost is the simple and automatic one. (becos it's an internal project I can't provide the code)

I can bind data with code behind but don't know how to set the total page to the grid. If add the proxy in the gridpanel, I can't use the code to bind data to grid. So is there any way to set total page to paging control without proxy, handler
How to do manual paging and sorting with code behind without proxy, handler

Thanks.

Daniil
Jan 09, 2013, 6:17 AM
Hi @asiaesolutions,

Welcome to Ext.NET!

Please clarify why can't you use a Proxy to organize remote paging? It is the easiest way.

Did you see these examples?
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Page/
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/DirectMethod/

asiaesolutions
Jan 09, 2013, 6:40 AM
If I using proxy, when click the search button I can't bind the data to the gridpanel but when remove the proxy all ok.
If I set the autoload data to false, is there any way to trigger the load data in code behind when I got all the search parameter from the search form if I using proxy or remote method?
Because the data over 300k records with many filter parameter so I want to fully control it than any autoway. If can control it like the original asp.net gridview is better.

Daniil
Jan 09, 2013, 7:03 AM
If I using proxy, when click the search button I can't bind the data to the gridpanel but when remove the proxy all ok.

Unfortunately, it is hard to say something concrete here without a sample to reproduce.


If I set the autoload data to false, is there any way to trigger the load data in code behind when I got all the search parameter from the search form if I using proxy or remote method?


Loading the data without any Proxy.
http://examples2.ext.net/#/GridPanel/ArrayGrid/Remote_Load/

If the Store is configured with some Proxy, when you can just call

App.GridPanel1.getStore().load();

It is JavaScript.

asiaesolutions
Jan 09, 2013, 7:44 AM
Here example, If I want to load data like this, which proxy is used? And how to implement remote sorting and paging.

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
Search(0, 10);
}

protected void Search(int startindex, int limit)
{
int count = Data.Count();
Store store = this.GridPanel1.GetStore();
store.DataSource = Data.Skip(startindex * limit).Take(limit);
store.DataBind();
this.GridPanel1.Show();
}


protected partial class TestData
{
public double Item1 { get; set; }
public double Item2 { get; set; }
public double Item3 { get; set; }
public double Item4 { get; set; }
}

protected List<TestData> Data
{
get
{
List<TestData> list = new List<TestData>();
for (int i = 0; i < 100; i++)
{
list.Add(new TestData() { Item1 = i, Item2 = i, Item3 = i, Item4 = i });
}
return list;
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Panel ID="Panel1"
runat="server"
Title="Example" Visible="true"
Width="600"
Height="350"
Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Load Data" OnDirectClick="Button1_Click" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Hidden="true"
Border="false">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false" RemoteSort="true" RemotePaging="true">
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
</AutoLoadParams>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Item1" Type="Float" />
<ext:ModelField Name="Item2" Type="Float" />
<ext:ModelField Name="Item3" Type="Float" />
<ext:ModelField Name="Item4" Type="Float" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy />
</Proxy>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Item 1" DataIndex="Item1">
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Item 2" DataIndex="Item2">
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Item 3" DataIndex="Item3">
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Item 4" DataIndex="Item4">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1"
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying properties {0} - {1} of {2}"
EmptyMsg="No properties to display" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>

Vladimir
Jan 09, 2013, 10:04 AM
If you use PageProxy then you have to define OnReadData event handler and bind data in that handler
Please see
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Page/

Daniil
Jan 09, 2013, 11:02 AM
Because the data over 300k records with many filter parameter so I want to fully control it than any autoway. If can control it like the original asp.net gridview is better.

Also we are not sure what you mean here. Please clarify.

asiaesolutions
Jan 10, 2013, 7:11 AM
Please refer to the attachment file, it my design. The run flow is the user select the filter option on the form then click the Search button and the gridpanel will appear and display the result. The grid display 20 record per page, my search function will return the 20 rows and the total page after query.

1 - If I not use proxy, use search button to bound the result data to gridpanel store manual. The databind but I can't set the total page to the grid.
2 - If I set PageProxy in the gridpanel, after click the button to bind data manual, it got record but can't bind to gridpanel(mean blank grid with 0 record).

If I do the first way, is there any way to set the total page to grid and do the remote paging(the search form allow 2 level sorting) and sorting.
If I choose the second way, I must implement the OnReadData to do refresh and remote sorting and paging. If like that the OnReadData got the code to requery and paging and sorting inside. Is there any way to trigger the grid load data by the Search button and got the separate event for sorting and paging(mean like original asp.net gridview got 2 event OnSorting and OnPaging).

5407

Vladimir
Jan 10, 2013, 11:14 AM
When you click Search button then you have to call the following handler instead direct event


Handler="Store1.load();"


In this case, OnReadData handler will be called, you can apply own filtering, paging and etc in that code and return total count

Vladimir
Jan 10, 2013, 12:09 PM
Also you have to set RemoteSort="true" for the store
In this case, sorting will trigger OnReadData also

asiaesolutions
Jan 12, 2013, 5:08 AM
Thank for your help, now I nearly done the page and feel little familiar with the ext.net but still got something I don't know.

Can the Sorter on the GridPanel can handle and process 2 or more DataSorter?
Is there any sample about gridpanel cell event in code behind?
I got 1 template column below, the FloorArea and FloorRate all is number, but I don't know how to format this like 0,000.00 for the template column

<ext:TemplateColumn runat="server" ID="colTemplate1" DataIndex="FloorArea" Width="70" Resizable="false" Text="Foor Area<br/>Rate">
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
{FloorArea}<br />
S${FloorRate}
</tpl>
</Html>
</Template>
</ext:TemplateColumn>

Daniil
Jan 14, 2013, 7:49 AM
Can the Sorter on the GridPanel can handle and process 2 or more DataSorter?


Yes. The Store supports multi sorting.

Here is an example for local multi sorting.
http://examples2.ext.net/#/GridPanel/Paging_and_Sorting/Multiple_Sorting_Local/

In the case with RemoteSort="true" the sort parameters are sent with a load request.

Please notice that the built-in GridPanel sorting (clicking the columns' headers) doesn't support multi sorting.



Is there any sample about gridpanel cell event in code behind?


Please clarify what exactly do you mean under "cell event"?



I got 1 template column below, the FloorArea and FloorRate all is number, but I don't know how to format this like 0,000.00 for the template column

<ext:TemplateColumn runat="server" ID="colTemplate1" DataIndex="FloorArea" Width="70" Resizable="false" Text="Foor Area<br/>Rate">
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
{FloorArea}<br />
S${FloorRate}
</tpl>
</Html>
</Template>
</ext:TemplateColumn>


This is a candidate for a new forum thread. Please start.

asiaesolutions
Jan 14, 2013, 8:59 AM
Please clarify what exactly do you mean under "cell event"?



This is a candidate for a new forum thread. Please start.

Like I want 1 image button in the gridpanel cell, and this button will get the data from database and prompt new window from code behind.

About the other one I will start new thread, many thanks.

Daniil
Jan 14, 2013, 12:32 PM
Here is an example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
class Test
{
public string test1 { get; set; }
public string test2 { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new Test { test1 = "test1", test2 = "test2" },
new Test { test1 = "test3", test2 = "test4" }
};
store.DataBind();
}
}

protected void OnCommand(object sender, DirectEventArgs e)
{
Test record = JSON.Deserialize<Test>(e.ExtraParams["record"]);

X.Msg.Alert("OnCommand", record.test1).Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2">
<Commands>
<ext:ImageCommand CommandName="test" Icon="Accept" />
</Commands>
<DirectEvents>
<Command OnEvent="OnCommand">
<ExtraParams>
<ext:Parameter Name="command" Value="command" Mode="Raw" />
<ext:Parameter Name="record" Value="record.data" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Also you can send just a record's id instead of whole data.

<ext:Parameter Name="recordId" Value="record.getId()" Mode="Raw" />

asiaesolutions
Jan 15, 2013, 8:12 AM
Thanks for your support Danill,

I want to style the gridpanel, is the gridpanel display in structure like below
Topbar -> Columns -> Footer Bar -> Bottom bar

Please refer to the attachment, I want to change the text Datasource URA to center of the bottom bar, I added the css to this toolbar but no work. And why the paging toolbar display to big when I put it in the footer bar?
Thanks.

5422

Daniil
Jan 15, 2013, 11:00 AM
Please start a new forum thread.

This is our policy to keep a single topic per a thread.