This question is locked. New answers and comments are not allowed.
I am trying to use the client-side API to filter a grid, but it is not doing anything at all. There are no Javascript errors either even though my breakpoint hits it in Firebug. Everything else works on the client-side even the sorting and filter headers, but my button click is not doing anything. Am I doing anything wrong here?
@(Html.Telerik().Grid(Model)
.Name("RouteGrid")
.Columns(columns =>
{
columns.Bound(r => r.RouteId).Title("Route #");
columns.Bound(r => r.LongName).Title("Route:");
columns.Bound(r => r.Description).Title("Description");
})
.ToolBar(toolBar => toolBar.Template(
@<
text
>
<
input
type
=
"text"
id
=
"routes_search"
/>
<
input
type
=
"submit"
id
=
"routes_submit"
value
=
""
/>
</
text
>))
.DataBinding(dataBinding => dataBinding.Ajax()
.OperationMode(GridOperationMode.Client)
.Select("GridAjax", "Routes"))
.Sortable()
.Filterable()
)
<
script
type
=
"text/javascript"
>
$(function() {
$('#routes_submit').click(function(e) {
var grid = $('#RouteGrid').data('tGrid');
grid.filter("LongName~substringof~'" + $('#routes_search').val() + "'");
});
});
</
script
>
public
class
RoutesController : Controller
{
public
ActionResult Grid(
string
view)
{
return
View(
this
.GetRoutes());
}
[GridAction]
public
ActionResult GridAjax()
{
return
View(
new
GridModel(
this
.GetRoutes()));
}
}