This question is locked. New answers and comments are not allowed.
Done with Telerik Extensions for ASP.NET MVC Q1 2011 (03/15/2011)
This sample shows how to send additional filters to you server side data query method. The example sends back two additional filter value. The first one is a country name that can be chosen from a ComboBox. The second one is a search text that will filter data be in multiple columns. In this case it searches for the leading numbers of an Order ID and for a Shipping Contact. If the search text will match in any of the columns the according record will be displayed. You can still use built-in grid filters, sorting and paging.
The key is to sending additional values to the server is modifying the ajax selectUrl of the grid. This is done in a OnDataBinding client event handler. In the event handler the values of the Country ComboBox and the Search Text InputBox is fetched, a parameter string is created and attached to the action url. The resulting url is finally assigned to the axaj selectUrl of the grid.
In the controller the two additional fields can be added to the model for automatically assigning its values. The data source is filtered by our custom filters and then passed to the GridModel.
[View]
[Controller]
@Telerik: Feel free to include this code/description in your samples or do with it whatever you like. I implemented it in your sample project so it should run instantly. I used the same data as in the Ajax Binding sample to make it easier for people to see the differences. Maybe the View needs some UI polishing.
Edit: I also attached the source files but with a small typo. Just don't know how to replace already attached files.
Best wishes,
Michael
This sample shows how to send additional filters to you server side data query method. The example sends back two additional filter value. The first one is a country name that can be chosen from a ComboBox. The second one is a search text that will filter data be in multiple columns. In this case it searches for the leading numbers of an Order ID and for a Shipping Contact. If the search text will match in any of the columns the according record will be displayed. You can still use built-in grid filters, sorting and paging.
The key is to sending additional values to the server is modifying the ajax selectUrl of the grid. This is done in a OnDataBinding client event handler. In the event handler the values of the Country ComboBox and the Search Text InputBox is fetched, a parameter string is created and attached to the action url. The resulting url is finally assigned to the axaj selectUrl of the grid.
In the controller the two additional fields can be added to the model for automatically assigning its values. The data source is filtered by our custom filters and then passed to the GridModel.
[View]
<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<
Telerik.Web.Mvc.Examples.AjaxFilterBindingModel
>" %>
<
asp:Content
ContentPlaceHolderID
=
"MainContent"
runat
=
"server"
>
<
div
>
Select Country:
<%= Html.Telerik().ComboBox()
.Name("Country")
.BindTo(new SelectList(Model.Countries))
%>
</
div
>
<
div
>
Enter start of Order ID or part of Contact Name:
<%= Html.TextBoxFor(model => model.SearchText) %>
</
div
>
<
div
>
<
a
href
=
"javascript:filterGridData();"
>Filter grid data with Ajax</
a
>
</
div
>
<%= Html.Telerik().Grid<
Order
>()
.Name("Grid")
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.Customer.ContactName).Width(200);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Grid"))
.Pageable()
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
%>
<
script
type
=
"text/javascript"
>
function onDataBinding(e) {
var country = $('#Country').val();
var searchText = $('#SearchText').val();
var params = { Country: country, SearchText: searchText };
var paramsStr = $.param(params);
var selectUrl = "<%= @Url.Action("_AjaxFilterBinding", "Grid") %>" + "?" + paramsStr;
var grid = $('#Grid').data('tGrid');
grid.ajax.selectUrl = selectUrl;
}
function filterGridData() {
var grid = $('#Grid').data('tGrid');
grid.ajaxRequest();
}
</
script
>
</
asp:Content
>
[Controller]
namespace
Telerik.Web.Mvc.Examples
{
using
System.Collections.Generic;
using
System.Linq;
using
System.Web.Mvc;
using
Models;
public
partial
class
GridController : Controller
{
public
ActionResult AjaxFilterBinding(AjaxFilterBindingModel model)
{
var countries = (from customer
in
GetCustomers()
orderby customer.Country
select customer.Country).Distinct();
model.Countries = countries.ToList();
return
View(model);
}
[GridAction]
public
ActionResult _AjaxFilterBinding(AjaxFilterBindingModel model)
{
var qry = GetOrders().AsQueryable();
if
(!
string
.IsNullOrEmpty(model.Country))
{
qry = qry.Where(order => order.Customer.Country == model.Country);
}
if
(!
string
.IsNullOrEmpty(model.SearchText))
{
qry = qry.Where(order =>
order.OrderID.ToString().StartsWith(model.SearchText) ||
order.Customer.ContactName.Contains(model.SearchText));
}
var data = qry.ToList();
return
View(
new
GridModel<Order>
{
Data = data
});
}
}
public
class
AjaxFilterBindingModel
{
public
IEnumerable<
string
> Countries {
get
;
set
; }
public
string
Country {
get
;
set
; }
public
string
SearchText {
get
;
set
; }
}
}
@Telerik: Feel free to include this code/description in your samples or do with it whatever you like. I implemented it in your sample project so it should run instantly. I used the same data as in the Ajax Binding sample to make it easier for people to see the differences. Maybe the View needs some UI polishing.
Edit: I also attached the source files but with a small typo. Just don't know how to replace already attached files.
Best wishes,
Michael