Custom search in DATA GRID SEPARATE FORM - Forum - Kendo UI Builder - Progress Community

Custom search in DATA GRID SEPARATE FORM

 Forum

Custom search in DATA GRID SEPARATE FORM

This question is answered

Hello,

At first, I am a beginner in programming.
I am trying to implement a custom search text box, which is working now in blank view and it is connected to js function:

----------------------------------------

changeHandler: function (e) {
var filter,
value = e.value;
if (value) {
filter = {
logic: 'or',
filters: [
{ field: 'Name', operator: 'contains', value: value },
{ field: 'Address', operator: 'contains', value: value }
]
};

this.scope._$ds.Clients.filter(filter);
} else {
this.scope._$ds.Clients.filter({});
}
}

---------------------------------------------------------------

In a DATA GRID SEPARATE FORM I am using this html:
---------------------------------------------------------------

<div class="row ng-scope">
<div class="col-sm-6">
<text-box
data-id="textbox1"
data-title=""
data-model="_$viewModels.textbox1"
,=""
data-placeholder="test"
data-debounce="400"
data-default-value=""
data-events="textbox1.events"
data-validation="textbox1.validation"
class="ng-isolate-scope">
</text-box>

</div>
</div>

---------------------------------------------------------------


but I don't know how to make the connection to the "changeHandler" in the view-factory.js .

Verified Answer
  • Hi Martin,

    In my personal experience, copying code from the Blank canvas into the templates rarely works (different structure) ...

    I've created a sample for you, please try and let me know ... 

    topSection.html

    <form ng-controller="searchControler">
    	<label for="searchField">Search:</label>
    	<input kendo-textbox type="text" ng-model="newInput" ng-change="changeFilter()" id="searchField" />
    </form>
    <br>

     

    view-factory.js

    /* global angular */
    (function(angular) {
    
        angular
            .module('viewFactories')
            .factory('customersCustomerMaintenance', ['$q', 'dsService', function($q, dsService) {
    
                function CustomersCustomerMaintenance() {
                    this.scope = null;
                }
    
                CustomersCustomerMaintenance.prototype = {
                    /*  The resolve method could return arbitrary data, 
                        which will be available in the "viewShowHandler" and "viewHideHandler" handler as the customData argument */
                    onInit: function($stateParams) {
                        return $q(function(resolve, reject) {
                            resolve({});
                        });
                    },
                    /* "customData" is the data return by the viewInitHandler handler*/
                    onShow: function($scope, customData) {
                        this.scope = $scope;
                    },
                    /* "customData" is the data return by the viewInitHandler handler*/
                    onHide: function(customData) {
    
                    },
                    /* Kendo event object*/
                    onRowSelect: function(e) {
    
                    }
                };
                return new CustomersCustomerMaintenance();
            }]);
    		
    	angular
            .module('viewFactories')
    		.controller('searchControler',function($scope,$http){
    			$scope.changeFilter = function () {
    				var value = $scope.newInput;
    				if (value) {
    					var filter = {
    						logic: 'or',
    						filters: [
    							{ field: 'Name', operator: 'contains', value: value },
    							{ field: 'Address', operator: 'contains', value: value }
    						]
    					};
    					$scope.grid.dataSource.filter(filter);
    				} else {
    					$scope.grid.dataSource.filter({});
    				}
    			};
    		});
    
    })(angular);

     

    Warm Regards,

    Ricardo Perdigao

All Replies
  • Hi Martin,

    In my personal experience, copying code from the Blank canvas into the templates rarely works (different structure) ...

    I've created a sample for you, please try and let me know ... 

    topSection.html

    <form ng-controller="searchControler">
    	<label for="searchField">Search:</label>
    	<input kendo-textbox type="text" ng-model="newInput" ng-change="changeFilter()" id="searchField" />
    </form>
    <br>

     

    view-factory.js

    /* global angular */
    (function(angular) {
    
        angular
            .module('viewFactories')
            .factory('customersCustomerMaintenance', ['$q', 'dsService', function($q, dsService) {
    
                function CustomersCustomerMaintenance() {
                    this.scope = null;
                }
    
                CustomersCustomerMaintenance.prototype = {
                    /*  The resolve method could return arbitrary data, 
                        which will be available in the "viewShowHandler" and "viewHideHandler" handler as the customData argument */
                    onInit: function($stateParams) {
                        return $q(function(resolve, reject) {
                            resolve({});
                        });
                    },
                    /* "customData" is the data return by the viewInitHandler handler*/
                    onShow: function($scope, customData) {
                        this.scope = $scope;
                    },
                    /* "customData" is the data return by the viewInitHandler handler*/
                    onHide: function(customData) {
    
                    },
                    /* Kendo event object*/
                    onRowSelect: function(e) {
    
                    }
                };
                return new CustomersCustomerMaintenance();
            }]);
    		
    	angular
            .module('viewFactories')
    		.controller('searchControler',function($scope,$http){
    			$scope.changeFilter = function () {
    				var value = $scope.newInput;
    				if (value) {
    					var filter = {
    						logic: 'or',
    						filters: [
    							{ field: 'Name', operator: 'contains', value: value },
    							{ field: 'Address', operator: 'contains', value: value }
    						]
    					};
    					$scope.grid.dataSource.filter(filter);
    				} else {
    					$scope.grid.dataSource.filter({});
    				}
    			};
    		});
    
    })(angular);

     

    Warm Regards,

    Ricardo Perdigao

  • Hi Ricardo,

    It's almost working :)

    I have a problem with:

                   $scope.grid.dataSource.filter(filter);

    TypeError: Cannot read property 'filter' of undefined
    at ChildScope.$scope.changeFilter (view-factory.js:54)
    at fn (eval at compile (angular.js:14268), <anonymous>:4:227)
    at ChildScope.$eval (angular.js:17025)
    at angular.js:23850
    at angular.js:26614
    at forEach (angular.js:321)
    at NgModelController.$$writeModelToScope (angular.js:26612)
    at writeToModelIfNeeded (angular.js:26605)
    at angular.js:26599
    at validationDone (angular.js:26526)

  • Hello Martin,

    community.progress.com/.../96566

    A possible approach would be to use $scope._$ds.filter(filter) .

    Please notice that in KUIB 1.1, pre-defined templates use a single data source and $scope._$ds points to the data source.

    However, views created using the Blank view option can have multiple data sources and in this case, $scope._$ds is a hash containing the data sources.

    I hope this helps,

    Edsel

  • Martin,

    My bad, I've used the non-separated template to create the sample ... As I mentioned, the structures change between different types of templates ...  I am looking into the correct syntax for the Separated template and will post it here by EOD (If I can figure it out on Debugger).

    All the best,

    Ricardo Perdigao

  • Hi Martin,

    I've just tested with a Separate Form Template and the syntax that I've originally posted worked for me ... Are you using KUIB 1.1?

    Can you please post your topSection.html and view-factory.js  for me to take a look?  We might need to schedule a WebEx for me to take a look with you...

    Thanks in advance,

    Ricardo Perdigao

  • Hi Ricardo,

    I am using KUIB 1.1

    This is my view-factory.js

    https://pastebin.com/kxFPZfLc

    I used your topSection.html

  • Hi Martin,

    On the code you sent it has:

    $scope.grid.Clients.filter(filter);

    On my code, I've used:

    $scope.grid.dataSource.filter(filter);

    Please change your code to read as mine (dataSource should not be replaced with the dataSource name). give it a try and let us know if it worked.

    All the best,

    Ricardo Perdigao

  • Yes, sorry for the misunderstanding.

    Now it is working.

    Thank you!

  • No problem at all! Glad it helped!

    All the best,

    Ricardo Perdigao