I am little new with angular Grids, sorry if it looks silly. Here is a link of plnkr which I have created.
My issues:
I wanted to disable selction of those rows which has the property IsApplicable as false. As of now all are available for selection.
I tried to achieve the same by below code in onRegisterApi
$scope.gridOptions.isRowSelectable = function(row){
return row.entity.IsApplicable;
};
But it did not seem to work.
I wanted to give color to grouping Header and selection header.
I don't know if its possible, but it would have been good if I could make the width of first column("MetricName") as '0px'. As of now If I do that my group header also becomes '0px'. Because my first column is taking space, which is unused and I am forced to keep it because of group header.
Here is a plunker with 1+2
set this inside your gridOptions object (not after the api was registered)
isRowSelectable: function(row){
return row.entity.IsApplicable;
}
and the column`s color is in simple css... i dont know if you can add a class to those cells, for that you need to do some digging in the angular grid api documentation http://ui-grid.info/docs/#/api
http://plnkr.co/edit/9oexAuXeRfadOrImu1CJ?p=preview
im not sure what you want to do in 3... if you are trying to keep the header without taking space in the columns that not possible... since this is a table if you have a header and the row`s column has an empty value it is still going to take the width of the column
Related
First, this is what I'm trying to do: I am using ngResource to grab an array of data from an API and setting the ui-grid's data to the array. One of the columns is an ID that has no meaning to the user. I would like to use another API to look up the meaning of that ID and get the human-friendly result of that. Before using ui-grid, I was simply using a directive that took that ID and set the element's text as the return result from the secondary API.
I know that it's possible to bind a column dynamically to data in that row's object, having looked at: http://ui-grid.info/docs/#/tutorial/106_binding, but it appears that this is limited to binding to the data in $scope or in the grid's data (such as in the example). I also see that there is a cellClass options method which allows conditional setting of the cell's class. However, I do not see any good options for intercepting the element in the cell and replacing it with a result of my choosing.
I am wondering what the best way to do this is. I've tried using ngResource's transformResponse but the array is too large to make a blocking event. As well, I've tried to inject the html for the directive into the field's return function, i.e. field: transformToHtml() but only the raw string shows, not the rendered html.
I am currently building a keyword bank to assist in tagging my in-house design assets. My idea is to have each keyword as a checkbox form element with one empty div at the bottom. You'd go through the entire list, check what you need and the text assigned to the id of that checkbox would populate in the empty div, separated by commas, and I can just copy/paste that text right into the metadata. I plan on having hundreds, so I'm hoping there is simple solution to this.
I have no problem setting up the html form/checkboxes, but I am unsure how to make this text populate in that empty div—or even IF it's possible. Would I use jQuery? Ajax? I also don't need a submit button—just that div to update immediately each time a checkbox is touched. Would I also need to have some server-side communication with a submit button to even make this work?
Thank you so much in advance for any help you can give or any direction you can point me in.
Here is a working fiddle
What you need is basically something like this :
$( ":checkbox" ).click(function() {
//alert($( this ).val());
$("#myText").append($(this).val() + ";");
});
You can forget the alert. This will add the value assigned to the checkbox in the div followed with a coma. :)
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
I'm trying to use columns in a form.
I have the next code, that produces the
The code is this:
$col=$this->add('Columns');
$left=$col->add($f->addField('text','observaciones'));
$right=$col->add($f->addField('line','cantidad_de_bocas'));
the fields of the columns, are based on form fields. I whant to add more than one field to the columns (ex. 2 fields on left column and 4 fields on right columns).
I have seen some examples about this, like
$col=$page->add('Columns');
$left=$col->addColumn(2)->add('View_SlotMachine');
$right=$col->addColumn(2)->add('View_SlotMachine');
Why the fields are duplicated ?
What does the method addColumn(2) does ?
Very thanks
If you havent gone to far with development using atk 4.1, you could download 4.2 and look at the examples here. There is a lot of new functionality in 4.2 which you can take advantage of and the demos and examples are being updated to reflect these changes.
In 4.2, there is an example of styling with two columns like this
class StylingForm extends Form {
function init(){
parent::init();
$f=$this;
$f->addField('line','name')->validateNotNull()
->setFieldHint('Click "Register" to see error');
$f->addField('line','email')
->validateNotNull()
->validateField('filter_var($this->get(), FILTER_VALIDATE_EMAIL)')
.. .. ..
}
functoin init() {
// Stacked class puts labels on top of fields
$form=$page->add('StylingForm');
$form->addClass('stacked atk-row');
$form->template->trySet('fieldset','span6');
$sep=$form->addSeparator('span6');
$form->add('Order')->move($sep,'before','age')->now();
}
In atk4.1, the form is a view so it has a template in atk4/templates/shared/view/form.html and some code in atk4/lib/View/form.php
In the example of the slot machine that you mention from here the addColumns(2) is being used to set the width of the views to 20% of the available screen width but in the example, each column will contain a view of the slot machine. If you wanted to forms on the same page, you could use the same functionality, but what you appear to want is a single form across two columns with a single submit button.
If you have to continue to use atk4.1, you need to look at the form.html. Romans may be able to suggest how you could create a two column form in that version. I can see there are some classes defined in the css such as atk-form-vertical-2col and atk-form-vertical-3col and there is a function setFormClass to set them but i cant see what tags you would set to put fields into the right hand side - by default, everything goes to the left.
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/