[CLOSED] gridpanel with remoting paging - sorting issue

[PriceRightHTML5team]

Hi,
Mine is a Asp.net Mvc Razor view engine application.
I have a gridpanel with a groupfield column.
I applied Remote paging to the gridpanel. Paging works fine.
But sorting is not working.
parameters.SimpleSort is always the groupfield column and the parameters.SimpleSortDirection is always ASC even when I try to sort by other column.

[Daniil]

Hi @PriceRightHTML5team,

Is there .RemoteSort(true) setting of the Store?

Please post the Store's configuration.

[PriceRightHTML5team]

Yes RemoteSort(true) has been set.
Following is the markup for the gridpanel

X.Container().DefaultAnchor("100%").Items(
 X.GridPanel().ID("grdExistingRoles")
.Cls("x-grid-custom").StyleSpec("margin-top:7px;")
.Scroll(ScrollMode.Both)
.EnableColumnHide(false)
.ColumnLines(true)
.Layout(LayoutType.Container)
.ForceFit(false)
.Store(X.Store()
      .ID("Store1")
      .RemoteSort(true)         
      .PageSize(
                Convert.ToInt32(PriceRight.Settings.PropertyReader.GetProperty("GRID_PAGE_SIZE"))
                )
      .GroupField("RStatusMessage")//.Sorters("RStatusMessage", Ext.Net.SortDirection.DESC).GroupDir(Ext.Net.SortDirection.DESC) //.Listeners(ls => ls.Load.Fn = "customPagenation")
                    .Model(X.Model().ID("Model1").Fields(
                    new ModelField("ScenarioUUID"),
                    new ModelField("RStatusMessage"),
                    new ModelField("UserName"),
                    new ModelField("STUDY_TITLE"),
                    new ModelField("ScenarioName"),
                    new ModelField("ScenarioFileName"),
                    new ModelField("ScenarioDesc"),
                    new ModelField("DateCreated", ModelFieldType.Date, "yyyy-MM-ddTHH:mm:ss"),
                    new ModelField("DateLastUpdated", ModelFieldType.Date, "yyyy-MM-ddTHH:mm:ss"),
                   new ModelField("ProductGroup.PRODUCT_GROUP_DESC"),
                    new ModelField("CsvPriceChangeCountryList"),
                    new ModelField("CsvCountryList")

                    )

                )
                .Proxy(
                    Html.X().AjaxProxy()
                        .Url(Url.Action("GetData"))
                        .Reader(Html.X().JsonReader().Root("data"))

                )
            )
            .ColumnModel
                (
                    X.Column().ID("ScenarioID").DataIndex("ScenarioUUID").Hidden(true),
                    X.Column().Text("Status").ID("colstatusMsg").DataIndex("RStatusMessage").Groupable(true).Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(2),
                    X.Column().Text("Owner").ID("colOwner").DataIndex("UserName").Groupable(true).Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(2),
                    X.Column().Text("Study Title").ID("colStudyTitle").DataIndex("STUDY_TITLE").Groupable(true).Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(2),
                    X.Column().Text("Scenario Title").ID("colName").DataIndex("ScenarioName").Groupable(true).Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.Column().Text("File Name").ID("colFileName").DataIndex("ScenarioFileName").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.Column().Text("Scenario Description").ID("colDesc").DataIndex("ScenarioDesc").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(4),
                    X.DateColumn().Text("Date Created").ID("colDateCreated").DataIndex("DateCreated").Format("dd MMMM yyyy").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.DateColumn().Text("Last Updated").ID("colDateUpdated").DataIndex("DateLastUpdated").Format("dd MMMM yyyy").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.Column().Text("Product Name").ID("colProductName1").DataIndex("ProductGroup.PRODUCT_GROUP_DESC").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.Column().Text("Price Change Countries").ID("colPriceChangeCountries").DataIndex("CsvPriceChangeCountryList").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(3),
                    X.Column().Text("Included Countries").ID("colIncludedCountries").DataIndex("CsvCountryList").Html("<i class='prfl_unfilter_icon' onclick='return ShowGridFilter(this);'></i>").Flex(4)
                )
                .BottomBar(Html.X().PagingToolbar().HideRefresh(true).ID("PageBar"))
                  .Features(
                           Html.X().Grouping().HideGroupedHeader(false)
)
.Listeners(l =>
{
    l.ItemContextMenu.Handler = "onContextMenu(e,this.store.getAt(index),#{GridExecutedContextMenu},#{GridNonExecutedContextMenu})";
})

                            )

And following is my controller code

  public ActionResult GetData(StoreRequestParameters parameters)
        {
            //var scenariolist = GetAllScenarios();
            //return this.Store(scenariolist.TheEntity);
            return this.Store(Paging(parameters));
        }

        private Paging<ScenarioDTO> Paging(StoreRequestParameters parameters)
        {
            return Paging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
        }

        public Paging<ScenarioDTO> Paging(int start, int limit, string sort, SortDirection dir, string filter)
        {
            var scenariolist = GetAllScenarios();
            List<ScenarioDTO> data = scenariolist.TheEntity;

            data.OrderByDescending(r => r.RStatusMessage);

            if (!string.IsNullOrEmpty(filter) && filter != "*")
            {
                //data.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower()));
            }

            if (!string.IsNullOrEmpty(sort))
            {
                data.Sort(delegate(ScenarioDTO x, ScenarioDTO y)
                {
                    object a;
                    object b;

                    int direction = dir == SortDirection.DESC ? -1 : 1;

                    a = x.GetType().GetProperty(sort).GetValue(x, null);
                    b = y.GetType().GetProperty(sort).GetValue(y, null);

                    return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
                });
            }

            if ((start + limit) > data.Count)
            {
                limit = data.Count - start;
            }

            List<ScenarioDTO> rangePlants = (start < 0 || limit < 0) ? data : data.GetRange(start, limit);

            return new Paging<ScenarioDTO>(rangePlants, data.Count);
        }

[Daniil]

Generally speaking, grouping is kind of sorting. So, a group field goes as a sorter. The SimpleSort property retrieves the first sorter. It is probably a group field one.

Please try the Sort property instead of the SimpleSort one. The Sort property should contain all the sorters. Can you see a required sorter there?

[PriceRightHTML5team]

Hi Daniil,
I updated above code from

private Paging<ScenarioDTO> Paging(StoreRequestParameters parameters)
      {
          return Paging(parameters.Start, parameters.Limit, parameters.SimpleSort, parameters.SimpleSortDirection, null);
      }

to

 private Paging<ScenarioDTO> Paging(StoreRequestParameters parameters)
        {
            return Paging(parameters.Start, parameters.Limit, parameters.Sort[parameters.Sort.Length - 1].Property, parameters.Sort[parameters.Sort.Length - 1].Direction, null);
        }

By this sorting is working fine.

But the groups order is lost (the grid has grouping applied to it).
How to maintain the groups order while sorting. i.e. the records are sorted and are shown in the same order of groups.

[Daniil]

I think remote grouping could be a solution. This setting for the Store:

.RemoteGroup(true)

http://docs.sencha.com/extjs/4.2.1/#...fg-remoteGroup

Here is discussed this option.
http://forums.ext.net/showthread.php?24896

[PriceRightHTML5team]

Hi Daniil,
I set the .RemoteGroup(true) property. Unfortunately it is the same. i.e. The groups sequence gets changed.

[Daniil]

Please clarify did you change the server code to group?

[PriceRightHTML5team]

Hi Daniil,
I haven't changed my server side code.
Could you please provider some pointer / sample code to accommodate RemoteSort.

following is my server side code

        public ActionResult GetData(StoreRequestParameters parameters)
        {
            //var scenariolist = GetAllScenarios();
            //return this.Store(scenariolist.TheEntity);
            return this.Store(Paging(parameters));
        }

        private Paging<ScenarioDTO> Paging(StoreRequestParameters parameters)
        {
            return Paging(parameters.Start, parameters.Limit, parameters.Sort[parameters.Sort.Length - 1].Property, parameters.Sort[parameters.Sort.Length - 1].Direction, null);
            //return Paging(parameters.Start, parameters.Limit, parameters.Sort, parameters.SimpleSortDirection, null);
        }

        public Paging<ScenarioDTO> Paging(int start, int limit, string sort, SortDirection dir, string filter)
        {
            var scenariolist = GetAllScenarios();
            List<ScenarioDTO> data = scenariolist.TheEntity;

          

            if (!string.IsNullOrEmpty(filter) && filter != "*")
            {
                //data.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower()));
            }

            if (!string.IsNullOrEmpty(sort))
            {
                data.Sort(delegate(ScenarioDTO x, ScenarioDTO y)
                {
                    object a;
                    object b;

                    int direction = dir == SortDirection.DESC ? -1 : 1;

                    a = x.GetType().GetProperty(sort).GetValue(x, null);
                    b = y.GetType().GetProperty(sort).GetValue(y, null);

                    return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
                });
            }

            data.OrderByDescending(r => r.RStatusMessage);

            if ((start + limit) > data.Count)
            {
                limit = data.Count - start;
            }

            List<ScenarioDTO> rangePlants = (start < 0 || limit < 0) ? data : data.GetRange(start, limit);

            return new Paging<ScenarioDTO>(rangePlants, data.Count);
        }

[Daniil]

Here is an example of using RemoteSort.
http://mvc.ext.net/#/GridPanel_Pagin...orting/Remote/

Here is an example of using RemoteGroup and RemoteSort.
http://forums.ext.net/showthread.php...l=1#post109465

Setting up either RemoteSort or RemoteGroup settings means that on a respective action on client - sorting or grouping - a Store initiates a load request to server with respective parameters, sorting or grouping ones. You should take those parameters into account when prepare the data returned from server.