What's New?

[CLOSED] RemoteSort method

Page 1 of 2 12 LastLast
  1. #1
    Apr 19, 2012, 7:33 PM

    [CLOSED] RemoteSort method

    I have the store defined below:

    <ext:Store ID="Store" runat="server" GroupField="Key" AutoLoad="False" RemoteSort="True" OnReadData="Store_RefreshData" >
    And the following is the code for sorting:
    protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
    {
        var data = getData();

        if (e.Sort.Length > 0)
        {


            data.Sort(delegate(object x, object y)
            {
                object a;
                object b;

                int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

                a = x.GetType().GetProperty(e.Sort[0].Property).GetValue(x, null);
                b = y.GetType().GetProperty(e.Sort[0].Property).GetValue(y, null);
                return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
            });
        }

        this.Grid1.GetStore().DataSource = data;   
    }
    However, it looks like this method is never called since the code never stop at the debug points. The samething happens in 1.x.
    Did I miss anything?
    Last edited by Daniil; Apr 25, 2012 at 9:55 PM. Reason: [CLOSED]
  2. #2
    Apr 19, 2012, 7:43 PM
    Hi,

    Did you define PageProxy for the store?
  3. #3
    Apr 19, 2012, 7:53 PM
    No, we don't want to use paging.
    What's the correct way or example we can follow?
  4. #4
    Apr 19, 2012, 8:17 PM
    PageProxy doesn't mean paging, it means that data will be fetched from a current page by separate ajax request. If you need remote sort then proxy must be used
    Please see the sample with remote paging
    https://examples2.ext.net/#/GridPane..._Sorting/Page/
    Last edited by Vladimir; Apr 19, 2012 at 8:21 PM.
  5. #5
    Apr 20, 2012, 12:59 PM
    yep, it works with the PageProxy.
    And it seems like the method Store_RefreshData will not be called and no data show up in the grid if I don't specify the Sorters in the store although I believe that there is a sorter for the group field.
    Is this a bug or a feature?
    Please advise.
  6. #6
    Apr 20, 2012, 1:25 PM
    It is a bug. I will fix it soon and notify you
    Thanks for the report
  7. #7
    Apr 20, 2012, 1:35 PM
    No, i was wrong. It was specific error for example
    https://examples2.ext.net/#/GridPane..._Sorting/Page/

    That example assumes that sorting is always provided (and it always reads sorting in Store1_RefreshData)
    OnReadData event is executed always when store requires a data (it doesn't depend from sorting)

    If you have another behaviour then please provide test sample
  8. #8
    Apr 20, 2012, 1:59 PM
    Ok, it is my bug :).
    BTW, if I set RemoteSort="ture", do we have to implement the sort method using OnReadData handler and PageProxy?
    We didn't do anything except specify RemoteSort="ture" in the store for V1, but it seems to be working.
  9. #9
    Apr 20, 2012, 2:49 PM
    Ok, maybe I am also wrong.
    I have to set the AutoLoad="False" per your suggestion for the large amount of data.
    Althought I set the datasource and bind the data in a method similar to what I put in Page_Load(), but there is no data in the grid when page loads.

    Here is the example:

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

<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>

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

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {

        var store = this.GridPanel1.GetStore();

        store.DataSource = getData();
 
        store.DataBind();
    }

    protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
    {
        List<Project> data = getData();
        if (e.Sort.Length > 1)
        {

            data.Sort(delegate(Project x, Project y)
                          {
                              object a;
                              object b;

                              int direction = e.Sort[1].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

                              a = x.GetType().GetProperty(e.Sort[1].Property).GetValue(x, null);
                              b = y.GetType().GetProperty(e.Sort[1].Property).GetValue(y, null);
                              return CaseInsensitiveComparer.Default.Compare(a, b)*direction;
                          });
        }

        e.Total = data.Count;
        Store1.DataSource = data;

    }

    private List<Project> getData()
    {
        CultureInfo ci = new CultureInfo("en-US");
        return  new List<Project> 
         { 
            new Project(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
            new Project(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows", 111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
         };
    }

    public class Project
    {
        public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
        {
            this.ProjectID = projectId;
            this.Name = name;
            this.TaskID = taskId;
            this.Description = description;
            this.Estimate = estimate;
            this.Rate = rate;
            this.Due = due;
        }

        public int ProjectID { get; set; }
        public string Name { get;set; }
        public int TaskID { get; set; }
        public string Description { get;set; }
        public int Estimate { get;set; }
        public double Rate { get; set; }
        public double Cost { get; set; }
        public DateTime Due { get; set; }
    }

</script>

<html>
<head id="Head1" runat="server">
    <title>GroupingSummary Plugin - Ext.NET Examples</title>
    
    <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
   
    <style type="text/css">
        .x-grid-body .x-grid-cell-Cost {
            background-color : #f1f2f4;
        }
         
        .x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
            background-color : #e1e2e4;
        }    

        .task .x-grid-cell-inner {
            padding-left: 15px;
        }

        .x-grid-row-summary .x-grid-cell-inner {
            font-weight: bold;
            font-size: 11px;
            background-color : #f1f2f4;
        } 
    </style>

    <script type="text/javascript">
        var totalCost = function (records) {
            var i = 0,
                length = records.length,
                total = 0,
                record;

            for (; i < length; ++i) {
                record = records[i];
                total += record.get('Estimate') * record.get('Rate');
            }
            return total;
        };
    </script>

</head>
<body>
    <form id="Form1" runat="server">
        <h1>Group Summary Plugin</h1>
        <p>Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.</p>

        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        
        <ext:Store ID="Store1" runat="server" GroupField="Name" RemoteSort="True" AutoLoad="False" OnReadData="Store_RefreshData">
            <%--<Sorters>
                <ext:DataSorter Property="Due" Direction="ASC" />
            </Sorters>--%>
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                    <Fields>
                        <ext:ModelField Name="ProjectID" />
                        <ext:ModelField Name="Name" />
                        <ext:ModelField Name="TaskID" />
                        <ext:ModelField Name="Description" />
                        <ext:ModelField Name="Estimate" Type="Int" />
                        <ext:ModelField Name="Rate" Type="Float" />
                        <ext:ModelField Name="Cost" Type="Float" />
                        <ext:ModelField Name="Due" Type="Date" />
                    </Fields>
                </ext:Model>
            </Model>
            <Proxy>
                <ext:PageProxy/>
            </Proxy>
        </ext:Store>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            Frame="true"
            StoreID="Store1"
            Title="Sponsored Projects" 
            Collapsible="true"
            AnimCollapse="false"
            Icon="ApplicationViewColumns"
            Width="800"
            Height="450">
            <Plugins>
                <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
            </Plugins>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:SummaryColumn ID="SummaryColumn1"                        
                        runat="server"
                        TdCls="task"
                        Text="Task"                       
                        Sortable="true"
                        DataIndex="Description"
                        Hideable="false"
                        SummaryType="Count"
                        Flex="1">
                        <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />                            
                    </ext:SummaryColumn>
                     
                    <ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />
                     
                    <ext:SummaryColumn ID="SummaryColumn2"
                        runat="server"
                        Width="85"
                        Text="Due Date"
                        Sortable="true"
                        DataIndex="Due"
                        SummaryType="Max">
                        <Renderer Format="Date" FormatArgs="'m/d/Y'" />                        
                        <SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />                        
                        <Editor>
                            <ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
                        </Editor>
                    </ext:SummaryColumn>
 
                    <ext:SummaryColumn ID="SummaryColumn3"
                        runat="server"  
                        Width="75"
                        Text="Estimate"
                        Sortable="true"
                        DataIndex="Estimate"
                        SummaryType="Sum">
                        <Renderer Handler="return value +' hours';" />
                        <SummaryRenderer Handler="return value +' hours';" />
                        <Editor>
                            <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
                        </Editor>
                    </ext:SummaryColumn>
                     
                    <ext:SummaryColumn ID="SummaryColumn4"
                        runat="server"
                        Width="75"
                        Text="Rate"
                        Sortable="true"
                        DataIndex="Rate"
                        SummaryType="Average">
                        <Renderer Format="UsMoney" />
                        <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                         <Editor>
                            <ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
                        </Editor>
                    </ext:SummaryColumn>
                     
                    <ext:SummaryColumn
                        runat="server"
                        Width="75"
                        ID="Cost"
                        Text="Cost"
                        Sortable="false"
                        Groupable="false"
                        DataIndex="Cost"
                        CustomSummaryType="totalCost">
                        <Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
                        <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                    </ext:SummaryColumn>
                </Columns>                
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" StripeRows="true" MarkDirty="false" />
            </View>
            <Features>               
                <ext:GroupingSummary ID="GroupingSummary1" runat="server" GroupHeaderTpl="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">                   
                </ext:GroupingSummary>
            </Features>     
            
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Toggle" ToolTip="Toggle the visibility of summary row">
                            <Listeners>
                                <Click Handler="#{GroupingSummary1}.toggleSummaryRow(!#{GroupingSummary1}.showSummaryRow);#{GroupingSummary1}.view.refresh();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
    </form>
  </body>
</html>
  10. #10
    Apr 20, 2012, 3:04 PM
    BTW, if I set RemoteSort="ture", do we have to implement the sort method using OnReadData handler and PageProxy?
    Yes, you have to implement sorting on the server side

    We didn't do anything except specify RemoteSort="ture" in the store for V1, but it seems to be working.
    Store assumes that data is sorted on the server therefore no errors, just sequence of rows can be wrong if you don't sort data (grid will show data as is)

    I have to set the AutoLoad="False" per your suggestion for the large amount of data.
    Althought I set the datasource and bind the data in a method similar to what I put in Page_Load(), but there is no data in the grid when page loads.
    You set AutoLoad="false" but you don't load data manually like in my test sample (Render listener of GridPanel)
    <Render Handler="this.store.load();" />
    By the way, we fixed the issue and now it doesn't require to set AutoLoad="false" (you need to update from SVN)

    Also, please note that if you use PageProxy you don't need to bind data in Page_Load, databinding must be provide in OnReadData event handler only (proxy will call that handler when data is required, data will be requested by separate ajax request). Therefore please remove data binding from Page_Load

    I suggest to consider to use PageProxy with static direct method, in this case page will not be created for ajax request (it is good for performance), of course static direct method cannot be used if you need to access page controls during data binding
    https://github.com/extnet/Ext.NET.Ex...d/Default.aspx
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] RemoteSort for buffered store
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 46
    Last Post: May 27, 2012, 8:02 PM
  2. RemoteSort RemotePage SqlDataSource GridPanel Store
    By ecko in forum 1.x Help
    Replies: 0
    Last Post: Oct 08, 2011, 8:02 PM
  3. [CLOSED] GridPanel RemoteSort
    By Marcelo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2011, 8:12 PM
  4. [CLOSED] [1.0] RemoteSort with IsComplex field
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 27, 2010, 4:07 PM
  5. [CLOSED] ServerMapping and RemoteSort
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 17, 2009, 12:12 PM

Posting Permissions