grid.js Grid & ASP.NET Core 6.0 MVC add date filtering min and max value

Question

How to create date filtering in ASP.NET Core MVC using Razor with grid.js grid? The scenario is: render grid.js grid. But will create a date controls with button. When button clicked, it should update the grid data based from the date input.

Uses grid.js Grid render on div, create 2 input type date with for the from and to value and 1 button that should trigger grid update. I'm expecting that after button clicked it should update the grid.js.Grid table based from the date. How to update grid.js data?

Answer 1

Here is a whole working demo you could follow:

Model

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

View(Index.cshtml)

@model Test
<div>
    <label for="startDate">Start Date:</label>
    <input asp-for="StartDate" />

    <label for="endDate">End Date:</label>
    <input asp-for="EndDate" />

    <button onclick="applyDateFilter()">Apply Filter</button>
</div>

<div id="grid"></div>
@section Scripts
{
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    <script>
        const grid = new gridjs.Grid({
            columns: ['Id','Name', 'Start Date', 'End Date'],
            server: {
                // Configure server-side data fetching
                url: '/home/getdata', // Replace with your API endpoint
                then: data => data.map(card => [card.id, card.name, card.startDate, card.endDate])
            },
        }).render(document.getElementById('grid'));

        function applyDateFilter() {
            const startDate = document.getElementById('StartDate').value;
            const endDate = document.getElementById('EndDate').value;

            // Make an API request to filter data based on start and end dates
            // Update the grid with the filtered data
            grid.updateConfig({
                server: {
                    url: '/home/getdata?startDate=' + startDate + "&endDate=" + endDate, // Replace with your API endpoint
                    then: data => data.map(card => [card.id, card.name, card.startDate, card.endDate])
                },

            }).forceRender();
        }
    </script>
}

Controller

 public class HomeController : Controller
    {
        public async Task<IActionResult> Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult GetData(DateTime? startDate, DateTime? endDate)
        {
            //hard-coded for easy testing
            var data = new List<Test>()
            {
                new Test(){Id=1,Name="aa",StartDate=new DateTime(2022,1,12),EndDate=new DateTime(2022,2,23) },
                new Test(){Id=2,Name="bb",StartDate=new DateTime(2022,1,20),EndDate=new DateTime(2022,3,23) },
                new Test(){Id=3,Name="cc",StartDate=new DateTime(2022,2,12),EndDate=new DateTime(2022,3,12) },
                new Test(){Id=4,Name="dd",StartDate=new DateTime(2022,3,12),EndDate=new DateTime(2022,3,23) }
            };
            var query = data
                .Where(d => (!startDate.HasValue || d.StartDate >= startDate)
                            && (!endDate.HasValue || d.EndDate <= endDate));

            // Execute the query and return the data
            var result = query.ToList();
            return Ok(result);
        }
    }