filter data in Kendo grid by connect to a method asp.net MVC

Question

I am making a code using ASP.NET MVC with kendo grid. I want to bring the data from database to Kendo grid which equal to specific date or by default "today".

I want to make a datepicker and a button at the toolbar and everytime I click the button it send a request to the control and filter the data in LINQ and send the request for all the data in one day. I wrote this code:

Controller class:

//main method
public ActionResult LogAdminList()
        {
            return View();
        }
//submethod for grid
    public ActionResult Grid_ReadLogAdminList([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "id")] string date)
            {
                DateTime _temp;
                if (!DateTime.TryParse(date, out _temp))
                    _temp = DateTime.Now;

                return Json(_context.Entities<LogAdmin>().NoTracking().OrderByDescending(l => l.TimeStamp)
                    .Where(f => DbFunctions.TruncateTime(f.TimeStamp) == DbFunctions.TruncateTime(_temp))
                    .Select(l => new LogAdminInfo
                    {
                        Id = l.Id,
                        Message = l.Message,
                        MessageTemplate = l.MessageTemplate,
                        Level = l.Level,
                        TimeStamp = l.TimeStamp,
                        Exception = l.Exception,
                        Properties = l.Properties,
                        LogEvent = l.LogEvent,
                    })
                    .ToDataSourceResult(request));
            }

the kendo code is :

@(Html.Kendo().Grid<LogAdminInfo>()
        .BindTo(Model)
        .Name("LogAdminList")
        .Sortable()
        .Columns(columns =>
        {
            columns.Bound(p => p.Message).Width(50).Title(WebResources.LogListMessage);
            columns.Bound(p => p.MessageTemplate).Width(50).Title(WebResources.LogListMessageTemplate);
            columns.Bound(p => p.Level).Title(WebResources.LogListLevel);
            columns.Bound(p => p.TimeStamp).Title(WebResources.LogListTimeStamp).Format("{0:dd.MM.yyyy H:mm}");
            columns.Bound(p => p.Exception).Width(50).Title(WebResources.LogListException);
            columns.Bound(p => p.Properties).Width(50).Title(WebResources.LogListProperties);
            columns.Bound(p => p.LogEvent).Title(WebResources.LogListLogEvent);
        })
        .Pageable(pageable => pageable
            .Refresh(true)
            .ButtonCount(5))
            .HtmlAttributes(new { @class = "grd_UpcomingMilestone" })
            .ToolBar(toolbar =>
                {
                    toolbar.Template(@<text>
                    <div class="toolbar">
                        <label class="category-label" for="category">@WebResources.LogFilterMessage</label>
                        @(Html.Kendo().DatePicker()
                                        .Name("datepicker")
                                        .Value(DateTime.Today)
                                        .Format("dd.MM.yyyy")
                                        )

                        @(Html.Kendo().Button()
                                        .Name("filterButton")
                                        .Icon("filter")
                                        .Content("Filter")
                                        .HtmlAttributes(new { type = "button" })

                        )
                    </div>
                    </text>);
                        })

        .DataSource(source => source
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .PageSize(100)
            .Read(read => read.Action("Grid_ReadLogAdminList", "LogAdmin").Data("getFilterDate"))
        ))

I don't know what to do exactly in the javascript. the code works fine in the first request but not when I filter.

what should I write as a javascript?

thank you very much.

anmarti anmarti · Accepted Answer · 2016-10-14T07:04:39

You have to pass data from client to server using getFilterDate function specified in you Kendo Grid Read Data method. Implement a function like this. The return type must be an object with fields with the same name you defined in your MVC Action, in this case date. Kendo will serialize them in order to build the get request:

function getFilterDate() {
    var mydate = $("#datepicker").data("kendoDatePicker").value();
    return {
       "date": mydate
    }
}

filter data in Kendo grid by connect to a method asp.net MVC

1 Answers