@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
<! -- ########## Pasted code for cards here ########## -->

@Html.HiddenFor(m => m.String)
@Html.Kendo().TextBoxFor(m => m.String).HtmlAttribute(new { @class = "k-state-disabled", disabled = "disabled" })

 columns
                    .Bound(p => p.Total)
                    .Title("Total")
                    .Format("{0:C}")
                    .Filterable(ftb => ftb.Extra(true)
                    //.UI("currencyFilter")
                     .Operators(o => o.
                        ForNumber(n => n
                            .IsLessThanOrEqualTo("Min")
                            .IsGreaterThanOrEqualTo("Max")
                            )
                     ))
                    .Width(130);

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using MyApp.Data.Models;
using MyApp.Interfaces;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class IndexModel : PageModel
    {
        private readonly IDataService _dataService = null!;

        public List<Item> Items { get; set; }

        public IndexModel(IDataService dataService)
        {
            _dataService = dataService;
            Items = new();
        }

        public async Task<JsonResult> OnPostCreate([DataSourceRequest] DataSourceRequest request, Item item)
        {
            await _dataService.CreateItemAsync(item);

            return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
        }

        public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request, bool isFound)
        {
            Items = await _dataService.GetActiveItemsAsync(isFound);
            var result = await Items.ToDataSourceResultAsync(request);

            return new JsonResult(result);
        }

        public async Task<JsonResult> OnPostUpdate([DataSourceRequest] DataSourceRequest request, Item item)
        {
            var updatedItem = await _dataService.UpdateItemAsync(item);

            return new JsonResult(new[] { updatedItem }.ToDataSourceResult(request, ModelState));
        }

        public async Task<JsonResult> OnPostDestroy([DataSourceRequest] DataSourceRequest request, Item item)
        {
            await _dataService.DeleteItem(item.Id);

            return new JsonResult(new[] { item }.ToDataSourceResult(request, ModelState));
        }
    }
}

@page
@model IndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<kendo-grid name="grid" height="700">
    <filterable enabled="true" />
    <groupable enabled="true" />
    <sortable enabled="true" />
    <editable enabled="true" mode="popup" template-id="popup-editor" />
    <scrollable enabled="true" />
    <pageable enabled="true" page-sizes="new int[] { 10, 20, 50}" />
    <toolbar>
        <toolbar-button template="toolbarTemplate"></toolbar-button>
        <toolbar-button name="create"></toolbar-button>
    </toolbar>
    <columns>
        <foreign-key-column field="ItemTypeId" />
        <column field="ReportDate" title="Date Reported" format="{0:yyyy-MM-dd}" width="160" />
        <column field="ItemDescription" title="Description" />
        <column field="Unit" title="Unit" width="200" />
        <column field="ContactName" title="Contact Name" width="250" />
        <column field="ReceivedBy" title="Received By" hidden="true" />
        <column field="ContactPhone" title="Contact Phone" hidden="true" />
        <column field="ContactAddress" title="Contact Address" hidden="true" />
        <column field="ContactDetails" title="Contact Details" hidden="true" />
        <column field="Qty" title="Item Quantity" hidden="true" format="{0:0}" />

        <column width="180">
            <commands>
                <column-command name="edit"></column-command>
                <column-command name="destroy"></column-command>
            </commands>
        </column>
    </columns>
    <datasource type="DataSourceTagHelperType.Ajax" page-size="10">
        <transport>
            <read url="/Index?handler=Read" data="getDataParameters" />
            <create url="/Index?handler=Create" data="getDataParameters" />
            <update url="/Index?handler=Update" data="getDataParameters" />
            <destroy url="/Index?handler=Destroy" data="getDataParameters" />
        </transport>
        <sorts>
            <sort field="ReportDate" direction="desc" />
        </sorts>
        <schema data="Data" total="Total" errors="Errors">
            <model id="Id">
                <fields>
                    <field name="Id" type="number" editable="false" />
                    <field name="ItemTypeId" type="object" />
                    <field name="ReportDate" type="date" />
                    <field name="ItemDescription" type="string" />
                    <field name="Unit" type="string" />
                    <field name="ContactName" type="string" />
                    <field name="ReceivedBy" type="string" />
                    <field name="ContactPhone" type="string" />
                    <field name="ContactAddress" type="string" />
                    <field name="ContactDetails" type="string" />
                    <field name="Qty" type="number" default-value="1" />
                </fields>
            </model>
        </schema>
    </datasource>
</kendo-grid>

<script id="popup-editor" type="text/x-kendo-template">
    @await Html.PartialAsync("_ItemPartial")
</script>

<!--
the following @model throws:
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'MyApp.Pages.IndexModel', but this ViewDataDictionary instance requires a model item of type 'MyApp.Data.Models.Item'.
-->
@model MyApp.Data.Models.Item
 
<!-- the following @model shows an empty grid: -->
@model IndexModel
<h6>magical mystery template</h6>