I am using ng-table to list a set of elements, and am needing to group the elements in the table.
I want to be able to redefine what the data is sorted by, (even if this means having to redefine the table), as the creation of the table is fast.
I have had a go on JSFiddle, but it doesn't seem to be able to update the grouping.
I aim to have something like the following:
1. create table using initial data, and default grouping column
2. change grouping column using a variable
3. table updates to reflect changed grouping variable
I thought of maybe using an ng-if to surround the entire ng-table, as I've read that it destroys the DOM elements inside it when evaluated to false, but this is a drastic measure to something that may be fairly easy to solve.
Link to JSFiddle
I found what I was looking for.
See the updated JSFiddle here.
What I had to do was call the $scope.tableParams.reload() function.
I didn't find any documentation about this, and ended up looking through the source code.
JSFiddle Link
Related
Apache Zeppelin 0.8.0 allow to modify data in cells in built-in table.
I assume new values are linked to some variable inside angular scope.
How can I find out what is the name of this variable, so I'd be able to read it in the next paragraph using zeppelin context:
z.angular("tableData??")
Is it possible to get all variables available in zeppelin context?
Any suggestions appreciated.
As for now I've found an indirect way of doing it. It's a bit tacky way, so I'm still looking for better solution.
In the example below I'm implementing simplified scenario, where I just need to remove selected lines.
There are few features I'm using:
Table grid allow to incorporate html into the cells.
%spark.sql
select product, price, '%html <input class="input_data" ... />' from table_a
Unfortunately it's impossible to use %angular inside table, so I've requested this feature: ZEPPELIN-3068
Using this feature we can add another column into the table with any html element (checkbox, input field or external link). I can use selected variables from table to generate unique ids.
It can even be a small form with POST request to web-service that will immediately perform requested changes.
Next paragraph will contain javascript that read data from html elements we've created above and store it in zeppelin context.
%angular
document.getElementsByClassName("input_data")
ps. if anyone need code, I can add full script.
is there a way to query a MongoDB collection, return the results, use an AngularJS ng-repeat to iterate through the results, BUT BEGIN the iteration at a specific position in the results, somewhere in the middle for example?
I am currently returning a query to an angular view; a category of materials. Then i have my view set up to paginate(ng-repeat) through the results. However, no matter what material I click on to bring me into the view (from a different view), the ng-repeat always starts at the beginning of the materials list, rather than on the material i clicked. Any thoughts?
I do not believe the mongodb part has anything to do with the actual question but ill give you 2 options:
The quick way:
<div ng-repeat="item in items" ng-show="$index >= myCtrl.startPoint">
While this will do the trick you might want to do the ng-show expression with a filter. In addition you might run into performance issues. You should also use the track by feature.
A better way would be to have a filteredData model for the ng-repeat and do the correct filtering once per action. You would have to make sure yourself that the model is updated on every data change and every user input.
There are many choices in between these 2 options but what to use depends on your needs. For instance - does user input change frequently? Is your data updated frequently? etc.
I am using Angular JS - ng-table. Which generates grid structure with Sorting, filtering, pagination features.
We are using Coded UI automation tools which expects all HTML controls should be Unique.
For Example :
Lets have Grid Table consist of Employee records.
Automation Tester wrote a test cases expecting the first 1-10 records are having unique Id (Emp1-to-Emp10) which is NOT going to be changed.
But when Tester sorting the Grid then whole structure of Grid is being changed.
First 10 records will have - Emp11,Emp1,Emp4,Emp5,Emp37,Emp42,Emp67,Emp89,Emp12,Emp10.
when the Tester re test the test case it FAILs .
So, how to maintain the consistency for dynamic records unique ids with the combination of Angular JS + Coded UI?.
Thanks
Gokul
I would say that what is happening is expected sorting behaviour..
Some ways that you could solve your problem. From the tester's point of view:
Tests should restore the page to the initial state before ending. For example if the test sorts a table, it should 'un-sort' the table before it finishes. This leaves the data in an expected state so that the test can be repeated
Don't select things by id. All the test frameworks I know of allow you to select things by css selectors, which can do much more powerful selections than by id. E.g. you could look up a row by the employee Id and it would find it regardless of what order the table is in.
From the developer's point of view:
I presume the rows are items in an array. You can assign a unique id as a property to each item in the array and use it in the template markup. The unique id would not be affected by any sorting.
Unless you are using a very unusual framework or constrained by strange rules, I would suggest that the automated tests are amended rather than the code.
I'm trying to emulate a spreadsheet using AngularJS and ng-grid. My needs are simple but I cannot find anything anywhere that will help me fix my code.
I have a simple table of scores and in the last column I need a "Total Score" column.
You can see my code at this plunk.
My problem is that though I was able to get the total in each row on document.load, I cannot make the "Total" column update whenever any of the scores are changed.
Or alternatively, you could add the getTotal() function directly to the model object:
http://plnkr.co/edit/LhlK1C?p=preview
I prefer solutions where I don't have to work with $watch(), but it depends if you want the total to be stored in your model or only need it for display.
You could watch for changes to the 'original_data' object and recreate the process_data object every time updates.
http://plnkr.co/edit/c4iynItnznKNRoFgeuio?p=preview
here is the example edited by crop grid:
1st i view like a normal grid like this image
http://imageshack.us/f/836/groupcontrollingb4.png/
then i create a check box name as "Cuisine:American" and check it to reload become image like this
http://imageshack.us/f/803/gridcontrollingafter.png/
the group data "Cuisine:American" can be group it and expand
then other data still remain the normal grid view
Does any one know a example or possibility for controlling the groupView like in the example i've shown ?
Hope u all can understand my question
thankz.
It's harder than it should be, because ext is not calling Ext.util.Grouper.getGroupString method. I've managed to bypass this. Here is working sample: http://jsfiddle.net/bP7Y2/
I am basing on Grouped Grid Example from Ext JS site. I've created CuisineGrouper which is extending Ext.util.Grouper. There are 2 important methods: getGroupString which returns gruping string and sorterFn which sorts in that way that grupped elements are on the top. For example when there is grouping by 'Cuisine:American' getGroupString returns 'American' or '' depending on cuisine value.
Another important bit is overriden getGroupString method on Restaurants store, so now it calls Ext.util.Grouper.getGroupString.
Last thing I've modified is groupHeaderTpl of groupingFeature.
(Update) It's possible to hide Others grouping header with some hacks. Example: http://jsfiddle.net/bP7Y2/1/