I am trying to use the Kendo Grid in an Angular controller. The DataSource posts to an MVC Controller. I need to send the data collected from the user in the form as well as the DataSourceRequst to the MVC Controller. My dataSource for the grid in the Angular controller looks like this:
dataSource: new kendo.data.DataSource({
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/SSQV4/SSQV5/Search/SubmitCriteria",
data: { form: $scope.form }
}
},
schema: {
data: "Data",
total: "Total"
},
pageSize: 25,
serverPaging: true,
serverFiltering: true,
serverSorting: true
}),
The method in the MVC Controller looks like this:
public async Task<ActionResult> SubmitCriteria([DataSourceRequest]DataSourceRequest command, ContractorSearchViewModel form)
The problem is that is the values in $scope.form are set using ng-model on any inputs like <input type="text" ng-model="form.UnitID">, although it shows a value in $scope.form.UnitID in the Angular controller, when it reaches the MVC controller it is null. However, if instead of setting it from ng-model in an input, I set it manually in the Angular controller like $scope.form.UnitID = "123", then when the dataSource hits the MVC Controller, UnitID has value and is not null. I can I fix this? I need all of the information in the DataSourceRequest object as well as all of the information in the $scope.form object to get to my MVC Controller.
I also tried using a service like below:
transport: {
read: function (e) {
generalsearchService.submitSearch(e.data, form)
.then(function success(response) {
e.success(response.data);
});
}
},
When this hits the MVC controller, "form" is completely populated as desired, but e.data is missing the "filtering" and "sorting" which are null. It only contains page and pageSize. This has been a very frustrating process. Any assistance is greatly appreciated!
10 Answers, 1 is accepted
Hello,
It seems that ng-model updates not the right object in the scope ($scope.form) and $scope.form is null before sending to the server. An easy way to check this is to define the transport.read.data as a function and check (either with debugger or console.log($scope.form)) what is the current value of the $scope.form.
The reason why filtering and sorting are null when transport.read is defined as function (e.data.filter and e.data.sort are null) is because when there is no filter or sort expression set they are considered as null. Initially (in case that no filter or sort is set using the configuration code) it is expected not to have filter or sort value. If user types something in the filter menu or click on the column header (to sort if the sortable option is enabled) the e.data should have it.
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1
Rank 1
Hello Beryl,
Thank you for the clarification.
In order to populate the DataSourceRequest object the sorting, filtering, grouping values should be extracted from the DataSource and serialized in way that model binder expects it on the server. I believe that it is quite easier to go with second approach with making a request from your angular service and pass the DataSource request options along with your form values:
transport: { read: function (e) { generalsearchService.submitSearch(e.data, form) .then(function success(response) { e.success(response.data); }); } },but use the parameterMap function of your transport to serialize the data source information. Eventually the code will look like:
transport: { read: function (e) { //get the parameterMap function var parameterMap = grid.dataSource.transport.parameterMap; // use it to serialize the datasource options (e.data can be used in order to extract the filtering, sorting and etc //information var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() }); generalsearchService.submitSearch(data, form) .then(function success(response) { e.success(response.data); }); } },Boyan Dimitrov
Telerik by Progress
Rank 1
Boyan,
Thanks for the response, but the code you provided throws an error. It does not seem to recognize "parameterMap" in the code. I have included a .png file to show you what is happening.
Rank 1
I found this thread "http://www.telerik.com/forums/kendo-datasource-transport-parametermap-undefined-when-data-is-not-returned-by-transport" which addresses the issue I am having with the code you provided, so I tried this:
transport: {
read: function (e) {
var grid = $scope.SearchGrid;
var data = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
.options.parameterMap({
sort: grid.dataSource.sort(),
filter: grid.dataSource.filter(),
group: grid.dataSource.group()
});
generalsearchService.submitSearch(data, form)
.then(function success(response) {
e.success(response.data);
});
}
},
It doesn't throw an error but the Filters and Sort or still null when the MVC Controller is hit.
Hello,
I prepared a sample project in order to avoid any misunderstanding. For testing purposes there are two static data sent to the server as a form (Test1 and Test2). Both form values and filter/sorting/paging information is accessible on the server when a break-point is placed in the read action method. In order to run the project the Kendo.MVC.dll file should be referenced from the reference section in the project.
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1
Hello,
I modified the example in order to illustrate how it should work in AngularJS scenario. There are two static key-value pairs ("Test1" and "Test2") that being sent along with DataSourceRequest data to the server. They represent the case when a form data should be sent to the server along with the DataSourceRequest data. The data from the form should be extracted (prior sending the request and parsed to key-value pairs) first and sent as key-value pairs (same format as Test1 and Test2).
Regards,Boyan Dimitrov
Telerik by Progress
Rank 1