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
>