CollectionView
CollectionView
Collection View Navigator
The CollectionViewNavigator is used for navigating records of data in CollectionView.
Features
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
1
Jan 25 25
00:00
German
Gadget
Green
$581.61
$1,030.17
14%
2
Feb 25 25
01:30
Italy
Gadget
Green
($4,673.75)
$3,499.71
13%
3
Mar 25 25
02:00
China
Gadget
Black
($2,265.49)
$4,535.49
20%
4
Apr 25 25
03:30
France
Widget
Green
$3,964.40
$432.90
21%
5
May 25 25
04:00
UK
Widget
Red
($1,744.99)
$3,355.18
12%
6
Jun 25 25
05:30
France
Gadget
Red
$4,276.37
$1,106.71
23%
7
Jul 25 25
06:00
US
Widget
Green
($4,376.92)
$1,408.24
18%
8
Aug 25 25
07:30
Japan
Gadget
Black
$1,996.52
$3,077.04
21%
9
Sep 25 25
08:00
Korea
Widget
Red
($3,442.35)
$4,068.26
16%
10
Oct 25 25
09:30
US
Widget
Green
($2,973.96)
$4,568.15
1%
11
Nov 25 25
10:00
Canada
Widget
Green
($3,217.79)
$4,414.46
14%
12
Dec 25 25
11:30
UK
Gadget
Red
$1,556.19
$1,705.14
1%
13
Jan 25 25
12:00
Canada
Gadget
Red
($4,981.75)
$4,917.13
24%
14
Feb 25 25
13:30
China
Gadget
Green
($397.56)
$1,702.41
19%
15
Mar 25 25
14:00
Italy
Widget
Green
$199.60
$4,148.18
14%
16
Apr 25 25
15:30
China
Gadget
Green
($176.56)
$506.04
11%
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
0
Settings
Description
The CollectionViewNavigator is used for navigating records of data in CollectionView.
This demo uses two CollectionViewNavigator controls, the first for navigating by item, the second for navigating by page. It uses following properties:
The ItemSourceId refers the Id of CollectionViewService or Control that binds to data for navigating.
The ByPage property for determining navigating by item or by page.
The RepeatButtons property for enabling whether the next/previous buttons fires repeatedly or not while remaining pressed.
The HeaderFormat property for formatting the string used to display the current total item/page values in the control header.
This demo uses two CollectionViewNavigator controls, the first for navigating by item, the second for navigating by page. It uses following properties:
The ItemSourceId refers the Id of CollectionViewService or Control that binds to data for navigating.
The ByPage property for determining navigating by item or by page.
The RepeatButtons property for enabling whether the next/previous buttons fires repeatedly or not while remaining pressed.
The HeaderFormat property for formatting the string used to display the current total item/page values in the control header.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class CollectionViewController : Controller { private readonly ControlOptions _collectionViewoptions = new ControlOptions { Options = new OptionDictionary { //{"By Bapge", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}}, { "Repeat Buttons" , new OptionItem {Values = new List< string > { "True" , "False" }, CurrentValue = "True" }}, //{"HeaderFormat",new OptionItem{Values = new List<string> {"None", "Item: {current:n0} / {count:n0}", "Page: {currentPage} / {pageCount}"},CurrentValue = "None"}}, { "Css Class" , new OptionItem {Values = new List< string > { "None" , "Red" , "Blue" , "Green" }, CurrentValue = "None" }}, } }; public ActionResult CollectionViewNavigator(FormCollection collection) { IValueProvider data = collection; if (CallbackManager.CurrentIsCallback) { var request = CallbackManager.GetCurrentCallbackData<CollectionViewRequest< object >>(); if (request != null && request.ExtraRequestData != null ) { var extraData = request.ExtraRequestData.Cast<DictionaryEntry>() .ToDictionary(kvp => ( string )kvp.Key, kvp => kvp.Value.ToString()); data = new DictionaryValueProvider< string >(extraData, CultureInfo.CurrentCulture); } } _collectionViewoptions.LoadPostData(data); var model = Sale.GetData(500); ViewBag.DemoOptions = _collectionViewoptions; return View(model); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | @using C1.Web.Mvc.Grid @model IEnumerable< Sale > @ { ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true ; } < style type = "text/css" > .Red { color: red !important; } .Blue { color: blue !important; } .Green { color: green !important; } .None { color: none; } .wj-collectionview-navigator .wj-btn .wj-glyph-right, .wj-collectionview-navigator .wj-btn .wj-glyph-left, .wj-collectionview-navigator .wj-btn .wj-glyph-step-forward, .wj-collectionview-navigator .wj-btn .wj-glyph-step-backward { pointer-events: none; } </ style > @section Scripts{ <script> c1.documentReady( function () { function getCSS(el) { if (el.currentStyle) return el.currentStyle; else if (window.getComputedStyle) return document.defaultView.getComputedStyle(el, null ); else return {}; } function setCSS(el, css, rxFilter) { for ( var key in css) { if (!rxFilter || rxFilter.test(key)) el.style[key] = css[key]; } } function measureWidthPx(input) { var el = document.createElement( 'div' ); setCSS(el, getCSS(input), /padding|border|padding|font|zoom/); el.style.position = 'absolute' ; el.style. float = "left" ; el.style.visibility = 'hidden' ; el.style.whiteSpace = 'nowrap' ; el.style.width = "auto" ; el.style.height = "auto" ; el.textContent = input.value; el = document.body.appendChild(el); var w = el.offsetWidth + 20; el.parentNode.removeChild(el); return w + "px" ; } function updateCvnWidth(headerElem) { setTimeout( function () { if (headerElem.value != headerElem._value) { headerElem.style.width = measureWidthPx(headerElem); headerElem._value = headerElem.value; } else updateCvnWidth(headerElem); },10) } var cvnIds = [ '#CVNavigatorToCV' , '#CVNavigatorToGridCV' ]; cvnIds.forEach( function (cvnId) { var cvn = wijmo.Control.getControl(cvnId); var headerElem = cvn._txtCurr; updateCvnWidth(headerElem); cvn.cv.currentChanged.addHandler( function (s, e) { updateCvnWidth(headerElem) }); cvn.cv.pageChanged.addHandler( function (s, e) { updateCvnWidth(headerElem) }); }) }); </script> } @ (Html.C1().CollectionViewService() .Id( "CVService" ).Bind(Model).InitialItemsCount(500) .PageSize(16)) @ (Html.C1().CollectionViewNavigator() .Id( "CVNavigatorToCV" ) .ItemsSourceId( "CVService" ) .ByPage( false ) .HeaderFormat( "Item: {current:n0} / {count:n0} - Page {currentPage}" ) //'{currentItem}', '{itemCount}' .RepeatButtons(Convert.ToBoolean(optionsModel.Options[ "Repeat Buttons" ].CurrentValue)) .CssClass(optionsModel.Options[ "Css Class" ].CurrentValue) .CssStyle( "background-color" , "lightgray" ) ) @ (Html.C1().FlexGrid< Sale >() .Id( "FlexGridCVN" ) .ItemsSourceId( "CVService" ) .AutoGenerateColumns( false ) .Columns(bl => { bl.Add(cb => cb.Binding( "ID" )); bl.Add(cb => cb.Binding( "Start" ).Format( "MMM d yy" )); bl.Add(cb => cb.Binding( "End" ).Format( "HH:mm" )); bl.Add(cb => cb.Binding( "Country" )); bl.Add(cb => cb.Binding( "Product" )); bl.Add(cb => cb.Binding( "Color" )); bl.Add(cb => cb.Binding( "Amount" ).Format( "c" )); bl.Add(cb => cb.Binding( "Amount2" ).Format( "c" )); bl.Add(cb => cb.Binding( "Discount" ).Format( "p0" )); bl.Add(cb => cb.Binding( "Active" )); }) .SortingType(AllowSorting.SingleColumn) .SelectionMode(SelectionMode.Row) .CssClass( "grid" ) .IsReadOnly( true ) .Height(500) ) @ (Html.C1().CollectionViewNavigator() .Id( "CVNavigatorToGridCV" ) .ItemsSourceId( "FlexGridCVN" ) .ByPage( true ) .HeaderFormat( "Page: {currentPage} / {pageCount}" ) //'{currentItem}', '{itemCount}' .RepeatButtons(Convert.ToBoolean(optionsModel.Options[ "Repeat Buttons" ].CurrentValue)) .CssClass(optionsModel.Options[ "Css Class" ].CurrentValue) .CssStyle( "background-color" , "lightgray" ) ) @section Settings{ @Html .Partial( "_OptionsMenu" , optionsModel) } @section Description{ @Html .Raw(Resources.CollectionView.CollectionViewNavigator_Text0) } |