How to get a Telerik Grid filtered based on previo

问题:

What I'm trying to do:-

Index page would have a dropdown of say categories, select 1 then submit, redirected to telerik grid page with all records kept from a big table of selected category.

so for example pet store, dropdown for which type of pets the store has then on next page a grid is populated with all pets of that type which the store has available today.

already got the date filter sorted since that's applied to the databind.

database is connection via an edmx, it has 2 table with no relationships but there is say a category/pet table which goes into details for each category/pet and then there is a record table which has a category/pet column of which the 2 tables have that single field incommon.

I have been trying to get this to work by using ViewData which works perfectly fine for the drop down <%: Html.DropDownList("category", (SelectList)ViewData["CategoryList"])%> but fails to populate the grid on the next page.

so something sorta like http://demos.telerik.com/aspnet-mvc/grid/selectionserverside but if possible with a dropdown and across 2 pages.

回答1:

From the docs.

Telerik Grid for ASP.NET MVC is using its built-in Linq-based expression engine to perform the grid operations - paging, sorting and filtering. However in some cases the developer may want to bypass the expression engine and page, sort or filter the grid data by himself. This is called "Custom binding".

Heres the link:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-data-binding-custom-binding.html

as per the example; if this was your controller that loaded your page:

[GridAction]
public ActionResult Index(GridCommand command)
{
    IEnumerable<Order> data = GetData(command);
    var dataContext = new NorthwindDataContext();
    //Required for pager configuration
    ViewData["total"] = dataContext.Orders.Count();

    return View(data);
}

Then your post back would be a place you could filter this:

[GridAction]
[HttpPost]
public ActionResult Index(GridCommand command)
{
    desiredCategory = this.myDropDownList.SelectedCategory.ToString();

    //Change the query here using post back variables
    IEnumerable<Order> data = GetData(command);
    data = from x in data.[entity name]
           where x.category = desiredCategory
           select x;

    var dataContext = new NorthwindDataContext();

    //Required for pager configuration
    ViewData["total"] = dataContext.Orders.Count();

    return View(data);
}

回答2:

I ran into the same thing, so I just use jQuery to get the data for each page (Replace #category with the ID of your category dropdown):

    function onDataBinding(e) {
        showWaitDialog();
        var grid = $('#Grid').data('tGrid');

        var args = 'page=' + e.page + '&category' + $('#category').val();

        $.ajax({
            url: "/Search/AjaxBinding/",
            type: "POST",
            data: args,
            dataType: "json",
            success: function (data) {
                grid.total = data.total;
                grid.dataBind(data.data);
                hideWaitDialog();
            }
        });

    }

Add this to your Grid code:

.ClientEvents(x => x.OnDataBinding("onDataBinding"))

Controller code:

    [GridAction(EnableCustomBinding = true)]
    public ActionResult AjaxBinding(int page, int category)
    {

        var searchResultsViewModel = //Code to get search results

        return View(new GridModel
                        {
                            Data = searchResultsViewModel.SearchResults,
                            Total = searchResultsViewModel.TotalCount
                        });
    }

Pass the category back, and filter the results before putting it into the grid.

回答3:

I can give a few directions without any code (my MVC is a bit rusty and I lack time to code samples).

So basically you have one page where the dropdown is and then another page where the grid will be. What you need is:

• have the first page submit to the grid page (form action pointing to grid page instead of itself)
• on the grid page see if you receive the input value from the dropdown, if so then filter your data based on that value before binding the grid
• emit a hidden field on this page where you store the filter value received from the dropdown so it is not lost when paging the grid
• basically check for either dropdown value or hidden field value in order to filter the grid

HTH