I have a UI grid, and I want to give different CSS to my row which header row for group.
Here , I want to give say blue color to entire row which is group row,(has + sign), also, I dont want a cell template to get applied to it in action column.
I can do condition in cell template but how to identify this row.
I found that , group header row gets class 'ui-grid-tree-header-row'
But not sure how to use this information.
I am looking for something like this :
Use ng-if = "row.groupHeader" in your cell template.
I used something like this :
{
name: 'name',
displayName: 'Name',
cellTemplate: '<div class="ui-grid-cell-contents">'+
'<div class="yourHeaderClass" ng-if="row.groupHeader">{{do or print
something only for group row header}}</div>'+
'<div ng-if="!row.groupHeader">{{do something for group children}}
</div>
</div>'
},
you can use ng-class in your UI-grid row template. from row.entity you will get your data and based on data you can determine whether group exist or not and conditionally select your class. by setting external-scope reference to grid you can use controller method for you group exist related calculation
Related
Using ExtJs 6.7, I'm having issues with tag field which allows to select the same tag twice from the list.
Use case:
I'm using tag field with remote store. Tag field is created and populated with tags (with setValue(counties)). For the sake of the case these tags are: United States, United kingdom, Gemrany, Austria, Australia.
Then user starts to search in tag field and searches for states starting with "Unit", which loads 2 countries from remote country provider into store. In our case United States and United kingdom. And here are two problems.
These two loaded countries are not marked as already selected in the tag field picker (like they are the first time field store is loaded)
User can select one or both of the countries and they actualy get added to the field (which is wrong. Can't think of any use case that would need same record twice in the field)
So I'm trying to figure out where to properly override (hack) the combo/tag field methods to check selected records in picker or to just filter out selected values if they already exist in valueStore. Or if this default behaviour it actually desired, can anybody please explain to me
how to limit this as I need it.
Here is the fiddle. Even though store loads same results when changing search string, results should be marked as selected in picker.
https://fiddle.sencha.com/#view/editor&fiddle/3bf8
Any help appreciated.
Regards
Armando
if you had a static store, you could just use:
filterPickList: true,
that removes the already selected entries from the combo, but with dynamic data, you have to check if the values are already picked:
listeners:{
beforeselect:function ( combo, record, index, eOpts ) {
if (combo.getValue().indexOf(record.data['ID'])!=-1) return false;
}
}
EDIT:
Try this solution with template to mark the list as selected when the combo reloads:
listConfig: {
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
' <div ',
' <tpl if="this.isSelected(ID)"> ',
' class="x-boundlist-selected" ' ,
' </tpl>',
' ><span>{NAME}</span></div>' ,
'</tpl>',
{
isSelected: function(id){
return (this.owner.up("tagfield").getValue().indexOf(id)!=-1);
},
})
},
Remember to remove the "filterPickList"
here is a working sample FIDDLE
I want to show the Row no in my grid.
I use cell template and there i use {{rowRenderIndex+1}}
It works fine when records are less then 14,but after record count get increased then when we scroll down the grid the Row No get initialize with one again and again.
You can add a property in the data and add column for display:
//Add property
$scope.yourData.forEach( function(row, index){
row.idx= index;
});
//Adding column
columnDefs: [
{
field: 'idx',
displayName: '',
width: 30
}
In the ui-grid FAQ there is a section "How can I show a sequence number/id in a column in my grid?"
I believe you are looking for the second answer in that section:
cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'
The rowRenderIndex is used to index rows that are rendered at that moment.
I want to set filer to a column in ui-grid dynamically using gridOptions.columnDef using column name. Right now I am only able to use number as a key.
How can I add multiple filters on a single column dynamically?
Try creating a custom filter for your grid item and then in the logic there you can do whatever you want. Something like this
field: 'myfilteredfield',
filter: {
condition: myCustomFilter
}
and in your controller
$scope.myCustomFilter = function(searchTerm,cellValue,row,column) {
};
Look here for details http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef
I have a column named id in my datagrid. I have set visible:false for the field since I don't want to display the field in the grid.
But then how can I get the value in id? any hope?
I am adding column as
columns.push({'sTitle':'id','visible': 'false'},{'sTitle':'name','visible': 'false'});
And I am retrieving the value in selected row as
this.$view.on("click",function(event){
selectedRow = event.target.parentElement;
var name = selectedRow.cells[0].innerHTML;
}
Here in click event I can't get the value of id as html is not generated for the field with visible:false. So I am searching for a method to access my id field.
You should use display:none property
-Edit:
In order to specify a custom css to your angular datagrid you should also specify the columns. Something like:
$("#gridContainer").dxDataGrid({
// ...
columns: ['CompanyName', 'ContactName', 'City', 'Country']
});
Here's the page I referenced to
Edit2:
Since you're trying to retrieve the value of the field I would recommend you to take a look to this answer
I am using a single-cell grid to show notifications in my application. How do I show date and time of notification with each cell data? The data is present in the model of the associated store. I want it to be something like the phabricator https://secure.phabricator.com/
Any pointers how I may do so?
One way to accomplish this would be to use a templatecolumn. You can then specify a tpl in the config of html representing the two sources of data.
Here is a fiddle I created demonstrating and simple and more complex tpl that resembles the data on the site you referenced.
Here is a simple example of a template column:
{
xtype: 'templatecolumn',
header:'Name',
tpl:'{first_name} {last_name}'
}
And a more complex template column with similar style to the one you referenced:
{
xtype: 'templatecolumn',
header: 'Example With Date',
flex: 1,
tpl:'<span style="display:inline-table;width:50%;">{first_name}</span><span style="width: 50%;display: inline-table;text-align: right;">{myDate}</span>'
}