Im using simple solution (example 1) of Flexigrid
http://www.flexigrid.info/
What I'm trying to do is to align text in one of the columns to the right.
Is there a way to do this without connecting to a JSON file (example 3)?
Use the colModel and set that column to have align: 'right'. Take a look at the last example on the page you linked for the syntax.
colModel: [
{ display: 'Col1', name: 'Col1' },
...
{ display: 'Col4', name: 'Col4', align: 'right' }
]
Related
I resolve most of my problem only few left out of which this one is preventing me to submit the form. I am using Nativescript + vue and without Typescript. how to display the Valueproviders with array list? Here is the code
https://play.nativescript.org/?template=play-vue&id=2oWObE
There was the problem with your data type. As per the documentation Array should have key and label properties. But still if you want id and name then you should try like below.
'valuesProvider': {
key: 'id',
label: 'name',
items: [
{ id: 1121, name: 'Shanghai' },
{ id: 3651, name: 'Lagos' },
{ id: 5213, name: 'Moscow' },
{ id: 6214, name: 'São Paulo' },
{ id: 6985, name: 'Sydney' }
]
};
https://docs.nativescript.org/vuejs/ns-ui/DataForm/dataform-editors-providers
Anyway, I tried that and that was not working for me either then searched for it and relaised that there is an open feature request to support the valuesProvider for picker from JSON metadata. You can vote to support the same feature.
https://github.com/NativeScript/nativescript-ui-feedback/issues/369
Solution
Just get you cityList out of vue data and map your data
https://play.nativescript.org/?template=play-vue&id=2oWObE&v=6
more detailed version with groups
https://play.nativescript.org/?template=play-vue&id=rqK7wO&v=3
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I'm using a plugin to create a data table with single row select capability such that when I click anywhere in the row, it links to another page in my web app. I need help figuring out how to disable the select capability on the first column of every row. I've tried using css rules but either they do not work or they are applied to columns other than the first.
Table declaration:
var locationTable = $('#locationTable').DataTable({
dom: 'Brtip',
buttons: [
'excel'
],
select: {
style: 'single'
//selector: ':not(:first-child)'
//selector: ':not(td:nth-of-type(1))'
},
processing: true,
serverSide: true,
ajax: "/locationData",
length: 10,
ordering: false,
"lengthChange": false,
//sDom : '<"top">lrtip',
columns: [
{data: 'locationname'},
{data: 'address1'},
{data: 'address2'},
{data: 'city'},
{data: 'state'},
{data: 'zipcode'},
{data: 'phone'},
{data: 'fax'}
]
});
My attempt to configure selection on every column (of every row) except the first:
//locationTable.select.selector(':not(tr>td:nth-child(1))');
locationTable.select.selector('tr>td:nth-child(2)');
demo
Solution: Add a CSS rule for each column you wish to enable select capability. In the example below, I wish to have select capability on all columns except the first.
select: {
style: 'single',
selector: 'tr>td:nth-child(2), tr>td:nth-child(3), tr>td:nth-child(4), tr>td:nth-child(5), tr>td:nth-child(6), tr>td:nth-child(7), tr>td:nth-child(8), tr>td:nth-child(9)'
}
I have a GridPanel whose columns have 'items' property set to an Ext.form.field.Trigger. I use the trigger field to work like a filter. I have a button in toolbar which should show/hide the Triggers. For this I need to get the 'items' configuration of the Column. Any ideas?
Code
{
xtype: 'gridcolumn',
dataIndex: 'title',
minWidth:100,
flex: 3,
text: 'Title',
layout: 'hbox',
items:[{
xtype: 'trigger',
autoSearch: false,
anyMatch : true
}]
}
I guess u should use ID or itemid in ur controls to get their value where ever u want.
Additionally to create filters you can execute createFilters on the filter feature if u r not getting desired output.
I have found a solution for it. Although not the best but gets the job done
Code
var columns = grid.columns;
if(grid.columns!=undefined){
for(var i =1; i<columns.length; i++){
var column = columns[i];
if(column!=undefined){
var colItems = column.items;
if(colItems!=undefined){
var colItem = colItems.items[0];
if(colItem!=undefined){colItem.setVisible(true);}
}
}
}
}
I am trying to check a year value from drop down and depending on that I am setting my itemtpl. However I would like to know if this is possible . dropdownyearvalue is my drop down value which I am inserting in store and Year is a value inserted before in the same store.
{
xtype: 'container',
itemId: 'Oct',
// style: 'border-color: blue; border-style: solid;'
tpl: new Ext.XTemplate('<tpl for="month"><tpl if="status == 1 && month==1 && Year=='{dropdownyearvalue}'"><div class="planned"></div><tpl elseif="status == 2 && month==1"><div class="target"></div><tpl else><div id="nothing"></div></tpl></tpl>')
}
This is possible, you can push any data to your template using data property, just like in example.
config:{
baseCls: 'hexagonList',
records: null,
tpl: new Ext.XTemplate('<tpl for="items"><div class="item" ref="{data.urlId}"><div class="hex"></div><div class="text">{data.label}</div></div></tpl>')
},
updateRecords: function(newRecords){
this.setData({
items: newRecords.items
});
}