Model Null when set using Ng-Model

11 posts, 1 answers
  1. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 29 Apr Link to this post

    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!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 02 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 03 May in reply to Boyan Dimitrov Link to this post

    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. 
  4. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 03 May Link to this post

    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
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 05 May Link to this post

    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);
                             });
                     }
                 },

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 05 May in reply to Boyan Dimitrov Link to this post

    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.

  7. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 05 May in reply to Boyan Dimitrov Link to this post

    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.

  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 09 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 16 May in reply to Boyan Dimitrov Link to this post

    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.
  10. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1968 posts

    Posted 18 May Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Beryl
    Beryl avatar
    19 posts
    Member since:
    Jul 2015

    Posted 19 May in reply to Boyan Dimitrov Link to this post

    Thank you very much.  This solved my issue.
Back to Top