Send Additional Parameter in Kendo Grid Read Action

Question

I have a kendo Grid as follows.

@(Html.Kendo().Grid<RevenueModel>()
     .Name("WeeklyRevenue")
     .Resizable(resizing => resizing.Columns(true))
     .Columns(columns =>
         {
            columns.Bound(p => p.Number).Width(100);
            columns.Bound(p => p.Type).Width(100);
            columns.Bound(p => p.Week1).Format("{0:c}");
            columns.Bound(p => p.Week2).Format("{0:c}");
            columns.Bound(p => p.Week3).Format("{0:c}");
            columns.Bound(p => p.Week4).Format("{0:c}");
            columns.Bound(p => p.Week5).Format("{0:c}");
            columns.Bound(p => p.TotalRevenue).Format("{0:c}");
         })
     .Scrollable()
     .Events(events => events.Change("onChange").DataBound("onDataBound"))
     .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("WeeklyRevenue", "Home")).ServerOperation(false))
     .Pageable(pager => pager.Refresh(true))
 )

Here is my Controller code

public ActionResult WeeklyRevenue([DataSourceRequest]DataSourceRequest request)
        {
            ...
            DataSourceResult result = res.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

It works fine. But I want to send additional data when Grid reads data, something like the following;

public ActionResult WeeklyRevenue([DataSourceRequest]DataSourceRequest request, string AdditionalParam)

I couldn't find any solution how to do this. Thanks in advance.

Solution 1

If the additional data is known at server-side you should use the overload of the Action method which accepts route values:

.DataSource(dataSource => dataSource.Server()
   .Read(read => read.Action("Read", "Home", 
        new { AdditionalParam = ViewData["AdditionalParam"] }))
)

If this additional data is known at the client-side only you should use the Data method:

.DataSource(dataSource => dataSource.Ajax()
   .Read(read => read
      .Action("Read", "Home")
      .Data("additionalData")
  )
)
<script>
 function additionalData() {
     return {
         AdditionalParam: $("#search").val()
     };
 }
</script>

Solution 2

You can try this;

.Read(read => read.Action("WeeklyRevenue", "Home", new { AdditionalParam = "Test" }))

Or via JavaScript function;

.Read(read => read.Action("Products_Read", "Grid").Data("additionalInfo"))

function additionalInfo() {
    return {
        AdditionalParam : "test"
    }
}

Or full JavaScript;

transport: {
    read: {
      url: "/Home/WeeklyRevenue",
      type: "POST",
      contentType: "application/json",
      dataType: "json",
      data: {
        AdditionalParam : "Test" 
      }
    }
  }

If you use parameterMap make sure you stringify like following:

parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }
                    else if (operation === "read") {
                        return kendo.stringify(data);
                    }
                }

In controller something like this

public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request, string AdditionalParam) {...}

Further documentation can be found in here and here.

Solution 3

We can use options given below to pass additional parameters.

//object route values
Read(read => read.Action("vs_Read", "vs", new{id=33})

//js function name
Read(read => read.Action("vs_Read", "vs").Data("passAdParam")

//By Template Delegate
Read(read => read.Action("Aggregates_Read", "Grid").Data(@<text>
            function() {
                //pass parameters to the Read method
                return {
                    name: "test",
                    id: $("#search").val()
                }
            }
              </text>))

Solution 4

In my case : I have a input type text, and I want my grid load data with filter from my text input, and the grid will load data when I press btnSearch:

@(Html.Kendo().Grid<ARM.Models.UserViewModel>()
                .Name("gridUsers")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Code);
                    columns.Bound(c => c.LanID);
                    columns.Bound(c => c.DepartmentName);
                    columns.Bound(c => c.UserRole);
                    columns.Bound(c => c.Level);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetUserSample", "ApprovalManager").Data("filterLanID"))
                    .PageSize(20)
                )
            )

<script>
function filterLanID() {
        return {
            lanid: $('#txtFilterUserId').val().trim()
        };
    }
function btnSearchOnClick(){
        $('#gridUsers').data("kendoGrid").dataSource.read();
}
</script>

An the controller :

public ActionResult GetUserSample([DataSourceRequest]DataSourceRequest request, string lanid)
        {
            IEnumerable<UserViewModel> userModel = GetListUser(lanid);
            return Json(userModel.ToDataSourceResult(request));
        }

View more solutions

Comments

[Dan Randolph]

Thanks Mahib, the first option worked for me. I spent a long time searching for this on the Telerik site and could find no examples. When you Use the Data() method in treeview it overrides the default id parameter so you need to return this: [code] return { id: _curId, param1: _val1, param2: _val2 }

[Muhammad Umar Farooq]

don't know why but none other method worked for me except this one. I used a js function as in other answers but template delegate solved it