I have created kendoComboBox
jQuery("#" + id).kendoComboBox(
{
filter: "contains",
change: changecallback
}).trigger("change");
var changecallback = function () {
//var combobox = jQuery("#" + id).data("kendoComboBox");
if (this.selectedIndex == -1) {
this.selectedIndex = 0;
this.trigger("change");
return;
}
this.select(this.selectedIndex);
};
what i want to do is to select 0th index if the value entered is not found (this.selectedIndex == -1) in options. where am i going wrong?
Use the select method. You can try it using the API demo of the ComboBox.
try this:
$combobox.select(0);
Related
I create a grid and a toolbar with Two Menu of menuCheckItem. When i check the menuCheckItem the grid filters even with multiple values and multiple columns.
This working fine, as I have created grid 1st and then the toolbar
this.up('') // Used Instead of Ext.getCmp()
Working FIDDLE - https://fiddle.sencha.com/#view/editor&fiddle/2lop
Now I am trying to create same toolbar along with Menu separately on top 1st and then create grid at below. But while doing this, nly Multiple values is working.
I am trying to filter grid with multiple values as well as multiple columns.
Few things i tried -
// Only Filters One Value at a time with each Columns
store.queryBy(function(record,id){
return (record.get('name') == someValue && record.get('phone') == otherValue);
});
and
// Filters Many Columns with Single Value
filter.add(
property : name, phone
value : "somevalue"
operator : "OR"
);
Is there any way to implement Toolbar 1st and then grid ? And Filter grid with many values and columns simultaneously ?
In this FIDDLE i remade a function(checkchange), which is universal , can be put separately and you'll be able to attach it to every menucheckitem you create. The only thing is that if you add new menucheckitem filter you should name the menucheckitem id with the name of the columnDataIndex-Menu and add this columnDataIndex in menuFilters and thats all.
checkchange: function (checkbox, checked, eOpts) {
var menuFilters = ['name', 'phone'];
var getChecked = function (m) {
var checkedItems = [];
m.items.items.forEach(function (c) {
if (c.checked) {
checkedItems.push(c.text);
}
});
return checkedItems;
};
//
var menus = new Map();
menuFilters.forEach(function (e) {
menus.set(e, Ext.getCmp(e + '-Menu'));
});
//
var fieldValues = [];
menuFilters.forEach(function (e) {
fieldValues.push([e, getChecked(menus.get(e))]);
});
//
var store = checkbox.up('grid').store;
store.clearFilter();
//
if (fieldValues.length > 0) {
store.filterBy(function (record) {
var fV = this.fieldValues;
for (var i = 0; i < fV.length; i++) {
if (fV[i][1].length > 0) {
if (fV[i][1].indexOf(record.get(fV[i][0])) === -1) {
return false;
}
}
}
return true;
}, {
fieldValues: fieldValues
});
}
}
Link to the filter:
code: http://jsfiddle.net/ar3PY/92/
Question:
I can filter and I will get result "empty"
But how to disable checkboxes that will anyway appear empty when filtering.
!!Notice that each category shall no filter with itself, only with other categories.
For example:
If I check "VOLVO" and "SILVER" I get "empty".
What I looking for:
If I check "VOLVO", then "SILVER" will be disabled.
Image that show how it should work:
Basically you just needed to access your class attributes to make it work. I forked your fiddle, here's the modified version:
$("#filters :checkbox").click(function() {
var subj = this;
resetBoxes();
$(".filterme").show();
if(this.checked){
var all = $(".filterme");
var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
var brandtgt = tgts[0].className.split(' ')[1];
$("#filters :checkbox").each(function(idx){
var inval = $(this).attr("value");
var brandclasses = tgts[0].className.split(' ');
var found = $.inArray(inval, brandclasses);
if(found<0){
disable($(this));
}
});
all.not(tgts).hide();
tgts.show();
if (tgts.length == 0) {
$('.empty').show();
} else {
$('.empty').hide();
}
}
});
I've included helper functions (resetBoxes, enable, disable) found in the working fiddle below.
http://jsfiddle.net/ppzwmvs9/6/
How to show content of checked filter that only has exacly same attribute for each category?
see also image for explanation:
.
JSFIDDLE HERE:
http://jsfiddle.net/ar3PY/104
.
var getFilter = function (category) {
var filter = $("#filters ." + category + ":checked").map(function () {
return '[data-filter*="' + this.value + '"]';
}).get().join(",");
filter = (filter.length > 0) ? filter : "*";
return filter;
}
Hi this is my hotel project. But I'm having a problem with a filter.
I want to filter the data in the amenities column.
This is: my fiddle
It works if you select a single checkbox but it does not work if you select multiple checkboxes.
I suspect the problem arises from indexof instead of what I can use. What method should I follow?
How to change this line: indexOf(x);
This is my bad code:
//PROBLEM FILTER HERE
$scope.am_en = function()
{
//get input value
x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();
//filter
$scope.ot_Filter = function (location) {
return location.amenities.indexOf(x) !== -1;
};
}
The problem is indeed caused by the function $scope.am_en, in the declaration of the inner function $scope.ot_Filter
When you select multiple checkboxes, your x variable is an array of objects, so you should do a loop and can create a variable to check whether the element should be shown or not. You can do it as follows:
$scope.ot_Filter = function (location) {
var shouldBeShown = false;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) !== -1) {
shouldBeShown = true;
break;
}
}
return shouldBeShown;
};
I modified your jsfiddle, so that you can see this solution working properly.
I'm working on this codepen. The data comes from an array of objects, and I need to make a filter only by name and amount.
I have this code, but if you type a character in the search box, it only search by amount, and not by name too. In other words, if the you type 'warren' or '37.47' it has to return the same result, but doesn't works.
var filterFilter = $filter('filter');
$scope.filter = {
condition: ""
};
$scope.$watch('filter.condition',function(condition){
$scope.filteredlist = filterFilter($scope.expenses,{name:condition} && {amount:condition});
$scope.setPage();
});
You want to create a custom filter for your app.
directiveApp.filter("myFilter", function () {
return function (input, searchText) {
var filteredList = [];
angular.forEach(input, function (val) {
// Match exact name
if (val.name == searchText) {
filteredList.push(val);
}
// Match exact amount
else if (val.amount == searchText) {
filteredList.push(val);
}
});
input = filteredList;
return input;
};
});
You can write your logic in this filter and now use this filter to filter your list.
Update
You can just implement this filter to your custom filter pagination.
Here is the new version of your code. Codepen
List of updates on your code
Added new filter parameter to your ng-repeat attribute
ng-repeat="expense in filteredlist | pagination: pagination.currentPage : numPerPage : filter.condition"
...
Well, finally (based in the idea of Abhilash P A and reading the docs), I solved my question in this way:
var filterFilter = $filter('filter');
$scope.filter = {
condition: ""
};
$scope.$watch('filter.condition',function(condition){
$scope.filteredlist = filterFilter($scope.expenses,function(value, index, array){
if (value.name.toLowerCase().indexOf(condition.toLowerCase()) >= 0 ) {
return array;
}
else if (value.amount.indexOf(condition) >= 0 ) {
return array;
}
});
$scope.setPage();
});
The final codepen ! (awsome)
I try to delete element from array of objects:
ng-click="deleteSpecialization(item)"
Where item is item from ng-repeat:
ng-repeat="item in data"
My function:
$scope.deleteSpecialization = function (item) {
var index = $scope.data.indexOf(item);
if (index != -1) {
$scope.data.splice(index, 1);
}
}
This code removes some items in template HTML after second click. I do one ng-clickbut template changes incorrect.
Format:
[{"name":"A","checked":false,"id":"6"},{"name":"B","checked":false,"id":"8"},{"name":"C","checked":false,"id":"10"},{"name":"D","checked":false,"id":"12"},
Here is the working demo of splice functionality, although you write the absolutely fine for splice.
https://codepen.io/kashifmustafa/pen/VvjqwE
$scope.deleteSpecialization = function (item) {
var index = $scope.data.indexOf(item);
if (index != -1) {
$scope.data.splice(index, 1);
}
}
Hello Demo is here http://jsfiddle.net/qjcqwhsw/2/
$scope.deleteItem = function(item){
var index = $scope.data.indexOf(item);
$scope.data.splice(index, 1);
};
hope this may help you