This is a migrated thread and some comments may be shown as answers.

Grid paging, filtering, pagesize, sorting not passing parameter to controller

4 Answers 245 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 15 Nov 2018, 06:23 PM

Hey,

So i have a grid on my page which is going to act as a result view to search criteria input into the provided controls.

By default to grid does not make a request to obtain data on page load. .AutoBind(false) has been set.

So what i require is when the page is loaded the user will be presented with a range of inputs that will make up the "Search Filter", when the search button is clicked i create a complex object which is then passed to the controller and the filtering will happen in the IQueryable object. and this works without an issue.

The problem comes in when i try and page, filter, sort or change the page size the grid does not use my custom javascript function to pass the complex object as parameters to the controller, my parameters are only passed when i click on the search button.

i have read up on the grid events here

and i attached the .Sort(), .Filter(), .Page() events to my javascript  function, the problem is that then the grid makes  2 requests to the server, 1 request with a null parameter and another request with the parameter.

How do i disable the default grid Paging, Filtering,Sorting and Page Size change triggers and make it use my own javascript function so that even if i page, filter, sort the complex parameter object is passed to the controller every single time?

public class SystemLogsParameters
{
  public string Message { get; set; }
}

 

Controller

[HttpPost]
public ActionResult PopulateLogsGrid([DataSourceRequest] DataSourceRequest request, SystemLogsParameters Data)
{
  DataSourceResult result = new LogsGrid().PopulateSystemSettingLogsGrid(request,Data);
  return Json(result);
}

 

View

<div class="row">
    <input type="text" id="tbMessage" placeholder="Message" />
</div>
 
<div class="row">
    @(Html.Kendo().Grid<Presentation.GenericGridViewModel>()
        .Name("Grid")
        .AutoBind(false)
        .Events(ev => ev
 
            .Sort("loadGrid") <-- Makes 2 requests to server
            .Filter("loadGrid") < --Makes 2 requests to server
            .Group("loadGrid") < --Makes 2 requests to server
            .Page("loadGrid")) < --Makes 2 requests to server
 
         .Columns(columns =>
         {
             columns.Bound(o => o.Name);
             columns.Bound(o => o.LastUpdated).Format("{0: dd MMM yyyy HH:mm}");
             columns.Bound(o => o.Active);
             columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update' />" +
             "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)' title='Delete' />#}#")
             .Width(100)
             .Title("Actions")
             .Filterable(false)
             .Sortable(false)
             .Groupable(false);
         })
        .NoRecords("No logs found.")
        .ToolBar(toolbar =>
        {
            toolbar.Template("<a class='k-button k-primary' onclick='Add()' href='javascript:;'><i class='fa fa-plus'></i>  Add</a>");
        })
        .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object>{ 5, 10, 20, 100 }))
            .Sortable()
            .Filterable()
            .Scrollable(a => a.Height("auto"))
        .DataSource(d => d
            .Ajax()
            .Model(a => a.Id(p => p.Id))
            .Read(read => read.Action("PopulateLogsGrid", "Setting"))
            .PageSize(20)
        ))
 
</div>
<div class="row">
    <input type="button" onclick="loadGrid()" value="Submit" />
</div>
 
 
<script>
 
 
    function loadGrid() {
 
        var myParameters = { "Message": $("#tbMessage").val() };
 
        var grid = $('#Grid').data('kendoGrid');
        grid.dataSource.read({ Data: myParameters });
    }
 
</script>

4 Answers, 1 is accepted

Sort by
0
n/a
Top achievements
Rank 1
answered on 17 Nov 2018, 01:06 AM
Any Response to this issue?
0
n/a
Top achievements
Rank 1
answered on 18 Nov 2018, 05:50 PM

Hey,

So i have managed to figure this one out.

Everything remains as is, the only difference is that i have added a new javascript function called filter.

function filter() {
 return { "Message": $("#tbMessage").val() };
}

 

and passed this function as the additional .Data("filter") to the .Read() of the datasource

 

the new grid looks as follows.

@(Html.Kendo().Grid<Presentation.GenericGridViewModel>()
                    .Name("Grid")
                    .AutoBind(false)
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Name);
                        columns.Bound(o => o.Data).Title("User");
                        columns.Bound(o => o.LastUpdated).Format("{0: dd MMM yyyy HH:mm}");
                        columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update' />" +
                                                                "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)' title='Delete' />#}#")
                        .Width(100)
                        .Title("Actions")
                        .Filterable(false)
                        .Sortable(false)
                        .Groupable(false);
                    })
                .NoRecords("No logs found.")
                .ToolBar(toolbar =>
                {
                    toolbar.Template("<a class='k-button k-primary' onclick='Add()' href='javascript:;'><i class='fa fa-plus'></i>  Add</a>");
                })
                .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object> { 5, 10, 20, 100 }))
                    .Sortable()
                    .Filterable()
                    .Scrollable(a => a.Height("auto"))
                .DataSource(d => d
                    .Ajax()
                    .Model(a => a.Id(p => p.Id))
                    .Read(read => read.Action("PopulateLogsGrid", "Setting").Data("filter"))
                    .PageSize(20)
                ))

 

This now achieves my desired result of when paging, filtering, sorting or changing the page size that the additional parameter is now also passed to the action method of my controller.

 

 

 

 

0
Viktor Tachev
Telerik team
answered on 19 Nov 2018, 10:03 AM
Hi,

Indeed the approach you went for is recommended in this scenario. Passing additional parameters to the read action using Data() method will work when the users perform operations with the Grid (paging, sorting, etc.).

When you need to populate the Grid with data you can just call the DataSource read() method without arguments.


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ravi
Top achievements
Rank 1
answered on 31 Dec 2020, 02:54 PM

Hi,

For sorting, paging, filtering the grid, I used .ServerOperation(false) where these operations are performed on the client side.

 

 

Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
n/a
Top achievements
Rank 1
Viktor Tachev
Telerik team
Ravi
Top achievements
Rank 1
Share this question
or