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 .
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 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
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