bbros
Nov 06, 2021, 12:14 PM
I noticed that when a sorter has been added to a GridPanel Store the sort icon will be displayed near to the column name only when sort direction is ascending.
You can try this example if you need:
GridSorter.cshtml
@page
@model ExtCookbook.Pages.GridSorterModel
@{
}
<ext-section target="Main">
<ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
<content>
<h1>GridPanel with filters and paging</h1>
Il filtro è applicato su più colonne e lo store è impostato per fare il paging
<ext-gridPanel model="@Model.Grid" />
</content>
</ext-container>
</ext-section>
GridSorter.cshtml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace ExtCookbook.Pages
{
public class GridSorterModel : PageModel
{
public GridPanel Grid { get; set; }
public List<object> GridData { get; set; }
public void OnGet()
{
GridData = new List<object>
{
new object[] { "Cheesecake Factory", "American", "Lorem ipsum dolor sit amet", 1 },
new object[] { "University Cafe", "American", "Lorem ipsum dolor sit amet", 4 },
new object[] { "Slider Bar", "American", "Lorem ipsum dolor sit amet", 0 },
new object[] { "Pizzeria", "Italian", "Lorem ipsum dolor sit amet", 2 },
new object[] { "El Mariachi", "Mexican", "Lorem ipsum dolor sit amet", 3 },
new object[] { "El Loco", "Mexican", "Lorem ipsum dolor sit amet", 1 },
new object[] { "Ristorante", "Italian", "Lorem ipsum dolor sit amet", 1 },
};
Grid = new GridPanel()
{
Id = "myGrid",
Title = "myGrid",
Anchor = "100%",
Region = RegionType.Center,
Columns = new List<Column>
{
new Column() { DataIndex = "Company", Text = "Company", Flex = 1},
new Column() { DataIndex = "Cuisine", Text = "Cuisine", Flex = 1},
new Column() { DataIndex = "Desctiption", Text = "Desctiption", Flex = 1},
new Column() { DataIndex = "Rating", Text = "Rating", Flex = 1},
},
Store = new Store
{
Id = "myGridStore",
ModelValue = new Model
{
Fields = new List<DataField>
{
new DataField() { Name = "Company", Type = DataFieldType.String },
new DataField() { Name = "Cuisine", Type = DataFieldType.String },
new DataField() { Name = "Desctiption", Type = DataFieldType.String },
new DataField() { Name = "Rating", Type = DataFieldType.Int }
}
},
Data = GridData,
CustomConfig = new JsObject() { { "type", "paging" } },
PageSize = 5
},
Bbar = new PagingToolbar()
};
((Store)Grid.Store).Sorters.Add(new Sorter() { Property = "Company", Direction = SortDirection.DESC });
}
}
}
Sorting do work, so I don't get mad for a workaround ;)
Thanks
You can try this example if you need:
GridSorter.cshtml
@page
@model ExtCookbook.Pages.GridSorterModel
@{
}
<ext-section target="Main">
<ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
<content>
<h1>GridPanel with filters and paging</h1>
Il filtro è applicato su più colonne e lo store è impostato per fare il paging
<ext-gridPanel model="@Model.Grid" />
</content>
</ext-container>
</ext-section>
GridSorter.cshtml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace ExtCookbook.Pages
{
public class GridSorterModel : PageModel
{
public GridPanel Grid { get; set; }
public List<object> GridData { get; set; }
public void OnGet()
{
GridData = new List<object>
{
new object[] { "Cheesecake Factory", "American", "Lorem ipsum dolor sit amet", 1 },
new object[] { "University Cafe", "American", "Lorem ipsum dolor sit amet", 4 },
new object[] { "Slider Bar", "American", "Lorem ipsum dolor sit amet", 0 },
new object[] { "Pizzeria", "Italian", "Lorem ipsum dolor sit amet", 2 },
new object[] { "El Mariachi", "Mexican", "Lorem ipsum dolor sit amet", 3 },
new object[] { "El Loco", "Mexican", "Lorem ipsum dolor sit amet", 1 },
new object[] { "Ristorante", "Italian", "Lorem ipsum dolor sit amet", 1 },
};
Grid = new GridPanel()
{
Id = "myGrid",
Title = "myGrid",
Anchor = "100%",
Region = RegionType.Center,
Columns = new List<Column>
{
new Column() { DataIndex = "Company", Text = "Company", Flex = 1},
new Column() { DataIndex = "Cuisine", Text = "Cuisine", Flex = 1},
new Column() { DataIndex = "Desctiption", Text = "Desctiption", Flex = 1},
new Column() { DataIndex = "Rating", Text = "Rating", Flex = 1},
},
Store = new Store
{
Id = "myGridStore",
ModelValue = new Model
{
Fields = new List<DataField>
{
new DataField() { Name = "Company", Type = DataFieldType.String },
new DataField() { Name = "Cuisine", Type = DataFieldType.String },
new DataField() { Name = "Desctiption", Type = DataFieldType.String },
new DataField() { Name = "Rating", Type = DataFieldType.Int }
}
},
Data = GridData,
CustomConfig = new JsObject() { { "type", "paging" } },
PageSize = 5
},
Bbar = new PagingToolbar()
};
((Store)Grid.Store).Sorters.Add(new Sorter() { Property = "Company", Direction = SortDirection.DESC });
}
}
}
Sorting do work, so I don't get mad for a workaround ;)
Thanks