Features

FlexGrid

FlexGrid

This view shows basic features of FlexGrid razor Pages.

Features

Overview
FlexGrid
Batch Editing
Unobtrusive Validation
FlexChart
Input
ID
Start
End
Country
Product
Color
Amount
Amount2
Active
loading...

Settings

Description

Steps for getting started with the FlexGrid control in Razor Pages:

  1. Add handler OnPostBind to page model for model binding.
  2. Add token @Html.AntiForgeryToken() in Razor page view.
  3. Initialize the FlexGrid control in Razor page view using <c1-flex-grid></c1-flex-grid> tag.
  4. Set value of read-action-url attribute as @Url.Page("FlexGrid", "Bind"). Here, "FlexGrid" is the page name and "Bind" is the handler name without prefix.
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
@page
@using C1.Web.Mvc.Grid
@model FlexGridModel
@{
    var optionsModel = (ControlOptions)ViewData["DemoOptions"];
    ViewData["DemoSettings"] = true;
}
  
@section Scripts{
    <script>
    function collectingQueryData(sender, e) {
        if (e.extraRequestData == null) {
            e.extraRequestData = {};
        }
  
        @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName))
        {
        <text>
        e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)';
        </text>
        }
    }
    </script>
}
  
@Html.AntiForgeryToken()
  
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true"
              sorting-type="@((AllowSorting)Enum.Parse(typeof(AllowSorting), optionsModel.Options["Allow Sorting"].CurrentValue))"
              selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))">
    <c1-flex-grid-column binding="ID"
                         is-visible="@(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "MMM d yy" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "HH:mm" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"
                         width="@optionsModel.Options["Column Resize"].CurrentValue"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source initial-items-count="100" read-action-url="@Url.Page("FlexGrid", "Bind")" query-data="collectingQueryData"></c1-items-source>
</c1-flex-grid>
  
  
  
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
  
@section Summary{
    <p>This view shows basic features of FlexGrid razor Pages.</p>
}
  
@section Description{
    <p>
        Steps for getting started with the FlexGrid control in Razor Pages:
    </p>
    <ol>
        <li>Add handler <b>OnPostBind</b> to page model for model binding.</li>
        <li>Add token <b>@@Html.AntiForgeryToken()</b> in Razor page view.</li>
        <li>Initialize the FlexGrid control in Razor page view using <b>&lt;c1-flex-grid&gt;&lt;/c1-flex-grid&gt;</b> tag.</li>
        <li>Set value of read-action-url attribute as @@Url.Page("FlexGrid", "Bind"). Here, "FlexGrid" is the page name and "Bind" is the handler name without prefix.</li>
    </ol>
}
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
using System.Data.SqlClient;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesExplorer.Models;
using Microsoft.AspNetCore.Http;
using C1.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Serialization;
using System.Linq;
using Microsoft.Extensions.Primitives;
using System;
  
namespace RazorPagesExplorer.Pages
{
    public class FlexGridModel : PageModel
    {
        private readonly ControlOptions _gridDataModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Items",new OptionItem{Values = new List<string> {"5", "50", "500", "5000", "50000", "100000", "500000", "1000000"},CurrentValue = "500"}},
                {"Allow Sorting", new OptionItem {Values = new List<string> {"None", "SingleColumn","MultiColumn"}, CurrentValue = "None"}},
                {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox","MultiRange"},CurrentValue = "Cell"}},
                {"Formatting", new OptionItem {Values = new List<string> {"On", "Off"}, CurrentValue = "Off"}},
                {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}},
                {"Column Resize", new OptionItem {Values = new List<string> {"100", "150"}, CurrentValue = "100"}}
            }
        };
  
        private void SetDemoOptions(IFormCollection collection)
        {
            _gridDataModel.LoadPostData(collection);
            ViewData["DemoOptions"] = _gridDataModel;
        }
  
        public void OnGet(IFormCollection collection)
        {
            SetDemoOptions(collection);
        }
  
        public void OnPost(IFormCollection collection)
        {
            SetDemoOptions(collection);
        }
  
        public ActionResult OnPostBind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            var extraData = requestData.ExtraRequestData
                 .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
            var data = new FormCollection(extraData);
            _gridDataModel.LoadPostData(data);
            var model = Sale.GetData(Convert.ToInt32(_gridDataModel.Options["items"].CurrentValue));
            return JsonConvertHelper.C1Json(CollectionViewHelper.Read(requestData, model));
        }
    }
}