How to send an object to the Telerik MVC Grid Ajax Select() Controller Method
Asked Answered
V

2

5

I am using the Telerik MVC Grid with Ajax binding, and am having a problem passing an object to the controller to be used to filter data. I am able to pass simple data (string, int), but not a more complex object.

For instance, I can to this no problem:

.DataBinding(dataBinding => dataBinding.Ajax().Select("_CasesAjaxBinding", "Home", new {orderId = "12345"} ))

And then in my controller, handle the orderId like this:

public ActionResult _CasesAjaxBinding(string orderId)

The problem I am having is when I try to pass a more complex object (in this case the @Model) to the controller, like this (The @Model is type CaseFilterModel):

.DataBinding(dataBinding => dataBinding.Ajax().Select("_CasesAjaxBinding", "Home", new {filterSpec = @Model} ))

And then trying to handle the object, like this:

public ActionResult _CasesAjaxBinding(CaseFilterModel filterSpec)

The filterSpec parameter is always null.

Thanks in advance for any ideas!

Virago answered 15/9, 2011 at 15:44 Comment(0)
S
19

As far as I can find on the Telerik forums this cannot be done this way. There was a similar question on there, which described exactly the same problem. When passing the model it was always null in the controller's action method.

However there is a workaround if you want to pass multiple parameters to the select method in order to filter the data, but it requires some client side coding.

I'll include a summary of that work around here, so that the answer is complete. A solemn link doesn't say much.

Assume we have a grid which displays orders items (articles) from all the orders. First make sure to hook up the client side onDataBinding event:

<%= Html.Telerik().Grid<Order>()
        .Name("Grid")
        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
        .DataBinding(dataBinding => dataBinding.Ajax()
                                               .Select("_AjaxBinding", "Grid"))
%>

In the client side event handler you need to compose your select URL. Here I'll pass two parameters, an order id (int) and a description of an article (string).

<script type="text/javascript">

    function onDataBinding(e) {
        var orderId = 100;
        var searchText = "test";
        var params = { OrderId: orderId, ArticleDescription: searchText };
        var paramsStr = $.param(params);
        var selectUrl = "<%= @Url.Action("_AjaxFilterBinding", "Grid") %>" 
            + "?" + paramsStr;
        var grid = $('#Grid').data('tGrid');
        grid.ajax.selectUrl = selectUrl;
    } 

</script>

Then in your controller you can declare the select method as follows:

[GridAction]
public ActionResult _AjaxFilterBinding(AjaxFilterBindingModel model)
{
    // Retrieve data here and filter it based upon the data present in the model.
    var data = ...;

    return View(new GridModel<Order> { Data = data });
}

The model looks like:

public class AjaxFilterBindingModel
{
    public int OrderId { get; set; }
    public string ArticleDescription { get; set; }
}

Passing a collection via the URL (GET) is also possible. Let's assume you want a collection of order IDs instead of just one.

The model would look like this:

public class AjaxFilterBindingModel
{
    public IEnumerable<int> OrderIds { get; set; }
    public string ArticleDescription { get; set; }
}

And the JavaScript would look like this:

    function onDataBinding(e) {
        jQuery.ajaxSettings.traditional = true;
        var intArray = [1, 2, 3, 4, 5];
        var params = {  OrderIds: intArray, ArticleDescription: "Test" };
        var paramsStr = $.param(params);
        var selectUrl = "<%= @Url.Action("_AjaxFilterBinding", "Home") %>" + "?" 
            + paramsStr;
        var grid = $('#Grid').data('tGrid');
        grid.ajax.selectUrl = selectUrl;
    }

Remark: Don't forget to set "jQuery.ajaxSettings.traditional = true;" or the parameters will be serialized incorrectly and the ASP.NET MVC model binder will not be able to bind the integer array.

And to be complete here is the Telerik forum thread I mentioned:

http://www.telerik.com/community/forums/aspnet-mvc/grid/getting-the-model-object-in-a-custom-binding-grid-ajax-controller.aspx

And the suggested work around:

http://www.telerik.com/community/forums/aspnet-mvc/grid/code-sample-sending-additional-filters-with-ajax-binding.aspx

Smutty answered 15/9, 2011 at 16:5 Comment(3)
This is like 85% of the way working for me. Let's say instead of an int OrderID, I wanted to pass a List<int> OrderIds. Can you see how to do that? I can't. I do appreciate the help so far! I tried doing { "OrderIds" : [1, 2, 3] } but my model is always null (doesn't seem to get passed to the controller).Virago
@MattW: Updated the article. It now contains an example of binding an integer array to an IEnumerable.Smutty
Well, isn't that perfect. I was unaware of the jQuery.ajaxSettings.traditional setting, which was my issue. Thanks for your help!!!Virago
B
1

Also as a note, this solution is not in Razor syntax... took me forever to spot it but the line

var selectUrl = "<%= @Url.Action("_AjaxFilterBinding", "Home") %>" + "?" + paramsStr;

should be changed to
var selectUrl = "@Url.Action("_AjaxFilterBinding", "Home")" + "?" + paramsStr;

For Razor... I copied the code but couldn't figure out why my _AjaxFilterBinding was not being called. Just thought I'd point it out in case anyone else has this problem.

Thanks for the solution, it NOW works great :)

Beeswing answered 18/4, 2013 at 22:1 Comment(1)
Yeah if memory serves me right I was using ASP.NET MVC 2 at the time, so no Razor :(Smutty

© 2022 - 2024 — McMap. All rights reserved.