I have a problem using ng-grid search filter on column wich references cellTemplate.
My data object has multiple fields. One of those fields is an array and I use cellTemplate to create a div with ng-repeat to show those values and apply a certain css class according values from that array.
Here is the plunkler that demonstrate my problem: plnkr.co/edit/jMvafIjqCsU0cnW6Ecvy?p=preview.
My problem is when I use cellTemplate grid propertie, the filter do not work properly. To simulate this scenario, you can try search by person2#gmail.com that you'll notice the problem. In this plunker, I use a cellTemplate to concatenate '#gmail.com' to person's email so if you type person2 the filter is applied, but after type # you'll see that filter do not work.
Can someone help me? Thank you!
ng-grid does not search on the rendered cellTemplate output but on the underlying data.
So the best way would be to transform your data to have searchable values.
angular.forEach($scope.myData, function(value) {
value.email+='#gmail.com';
});
Find a Plunker here
Related
I have bind data to table from Json Object,i need to implement column wise multiselect dropdown filter for the data. i have done the single dropdown selection.filter required on multiple selections on each column dropdown.
I dont really understand the question but you can take a look Here .
it works really nice and it works also on mobile phones .
I have a kendo grid "GridProjects" (See attachement: Part HTML). At the initialization, the column set (name, field, ...) and the sorted column list are retrieved from my BD on the gridHelperService.
To update the column set, I used the attribute "k-columns" on my HTML. However, I couldn't do the same thing for the sorted columns since the sort proprety is inside datasource.
I Know that I can use k-data-source, but in my case, it doesn't work because my dataSource transport and filter is binded with some variables on the controller.
Every thing is explained at this attachement: Projects Kendo Grid
I can't figure out how to fix this, if anyone can give me a hit, I'll appreciate.
Thanks!
I don't know much about your setup but based upon the image. Here is what you can try where you want the sort to happen. I don't know the columns your setup has but if you have firstName I would do sort like this.
$scope.GridProjects.dataSource.sort({field: "FirstName", dir: "asc"});
Inside the $scope you can get access to the kendo-grid="GridProjects" and then its dataSource and then sort it.
My problem was that my settings (columns) are loaded after my grid was created.
I changed my code to created the grid after my settings are loaded. To do, I called my function that creates the grid on my callback function (onSuccess).
I am trying to set the filter in ui-grid pragmatically but doesn't seem to work with ranges.
This plunkr shows one of the filters working perfectly (the name). But the age filter populates the input box but doesn't appear to update the grid's filter.
Do I have to manually update the filter?
I have also tried setting the entire filter when the button is clicked by:
$scope.ageColumn.filters=$scope.ageFilter;
but that also doesn't work.
Any idea how to get this to work?
Looks like we need the term to be a string - when it's a number it doesn't work.
$scope.ageColumn.filters[0].term='30';
http://plnkr.co/edit/2TvIqdKYeRuYXUx1bRNo?p=preview
Not sure why that would be the case, so I need to take a look at that.
I'm trying to filter a collection with several checkboxes that use the same property. I can not pass the filter properly. To better explain I send a example a link
Thanks
I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.