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!

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

Perhaps you didn't understand me correctly.  The ng-model does update the correct object, and $scope.form is not null, and e.data.filter and e.data.sort are null AFTER the user has selected a filter or sort.  All show data up until the time the MVC Controller is hit.  In the first example, using the url in "read", when the MVC Controller is hit the form data is null.  In the second example using the function in"read" when the MVC Controller are hit the filters and sorts are null even though the user has selected filters and sorts.  I have attached a PDF  document with pictures of what is happening when trying to use the service in the second example above.  Thank you for your response. 

In the first example, when I try to post to the URL, $scope.form loses its value when it hits the Controller.  However, if I hit the F5 to refresh the page, the $scope.form data is sent correctly to the MVC controller.  Please see the attached for a better explanation.  I just need a solution for either one of these implementations.  The first one, doesn't send the form data until after refresh, the second one (using the service) doesn't send the filters and sort.  I have attached two files showing what happens in the first example when I try to use the URL

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: 

but use the parameterMap function of your transport to serialize the data source information. Eventually the code will look like: 

Regards,
Boyan Dimitrov
Telerik by Progress

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.

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

Thanks for trying to help.  Unfortunately, your sample project does not address my issue at all.  First, I am using Angular, the project is not.  Second, I am sending form data along with the DataSourceRequest this project is not.  I feel as if we are speaking two different languages.  I am still unable to pass both $scope.form and the DataSourceRequest information together.

Thank you very much.  This solved my issue.