Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
Sorting
Sorting
This sample demonstrates how to use sort feature in the MultiRow control.
Features
Settings
Sorting Field :Description
In this sample, you can sort the collection based on the corresponding field value chosen in the first list.
You can also specify the sorting order in the second list.
using C1.Web.Mvc.Fluent; using C1.Web.Mvc.Grid; using C1.Web.Mvc.MultiRow; using C1.Web.Mvc.MultiRow.Fluent; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MultiRowExplorer.Models { public class LayoutDefinitionsBuilders { public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine { get { return ld => { ld.Add().Colspan(15).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id")) .Add(cell => cell.Binding("Date").Header("Ordered")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount")) .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City") .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")) .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email")) .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone")) .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper")) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email")) .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines { get { return ld => { ld.Add().Header("Order").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150")) .Add(cell => cell.Binding("Date").Header("Ordered").Width("150")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")); }); ld.Add().Header("Customer").Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true) .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")); }); ld.Add().Header("Shipper").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2)) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines { get { return ld => { ld.Add().Header("Order").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount")) .Add(cell => cell.Binding("Date").Header("Ordered")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")); }); ld.Add().Header("Customer").Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2)) .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City") .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")) .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip")); }); ld.Add().Header("Shipper").Cells(cells => { cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*")) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales { get { return ld => { ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("ID").Header("ID")); cells.Add(cell => cell.Binding("Active").Header("Active")); }); ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("Start").Header("Start")); cells.Add(cell => cell.Binding("End").Header("End")); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2)); cells.Add(cell => cell.Binding("Product").Header("Product")); cells.Add(cell => cell.Binding("Color").Header("Color")); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Amount").Header("Amount")); cells.Add(cell => cell.Binding("Amount2").Header("Amount2")); cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2)); }); }; } } } }
using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MultiRowExplorer.Controllers { public partial class MultiRowController : Controller { public ActionResult Sorting() { return View(Sale.GetData(50)); } } }
@model IEnumerable<Sale> @{ var fields = new[] { "ID", "Start", "End", "Country", "Product", "Color", "Amount", "Amount2", "Discount", "Active" }; var orders = new[] { "Ascending", "Descending" }; ViewBag.DemoSettings = true; ViewBag.SettingsByMenu = false; } @(Html.C1().MultiRow<Sale>() .Id("sortingMultiRow") .CssClass("multirow") .IsReadOnly(true) .Bind(Model) .OrderBy("ID") .LayoutDefinition(LayoutDefinitionsBuilders.Sales) ) @section Scripts{ <script> var field = "ID", order = "Ascending"; function sortMultiRow(combo) { var multiRow, ascending, sd; if (combo.hostElement.id === "sortingfield") field = combo.selectedValue; if (combo.hostElement.id === "sortingorder") order = combo.selectedValue; if (!field || !order) { return; } multiRow = wijmo.Control.getControl("#sortingMultiRow"); ascending = order === "Ascending"; sd = multiRow.collectionView.sortDescriptions; sdNew = new wijmo.collections.SortDescription(field, ascending); // remove any old sort descriptors and add the new one sd.splice(0, sd.length, sdNew); } </script> } @section Settings { Sorting Field : @(Html.C1().ComboBox().Id("sortingfield").Bind(fields).SelectedIndex(0).IsEditable(false).OnClientSelectedIndexChanged("sortMultiRow")) Sorting Order : @(Html.C1().ComboBox().Id("sortingorder").Bind(orders).SelectedIndex(0).IsEditable(false).OnClientSelectedIndexChanged("sortMultiRow")) } @section Summary{ This sample demonstrates how to use sort feature in the MultiRow control. } @section Description{ In this sample, you can sort the collection based on the corresponding field value chosen in the first list. You can also specify the sorting order in the second list. }