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)'
}
Related
This is the table i am trying to make. First two columns are filled from get api. The last column, i fetch from another api get call. How do i fill the last column with data.
defineGrid() {
this.columnDefinitions = [
{ id: "SerialNumber", name: "Serial Number", field: "SerialNumber", sortable: true, filterable: true, minWidth: 100 },
.......
.......
.......
{ id: "Owner", name: "Owner", field: "Owner", sortable: true, filterable: true, minWidth: 100 },
];
Is there a way in aurelia-slickgrid to update an individual column with values (from a promise let’s say)?
I want to update the Owner column from a separate function that gets the data from backend system. I mean not the way how rest of the data is updated using dataset.bind=“dataset”.
I am having trouble sorting a data table on entry. My code:
$('#CommentsOnAuthors').DataTable({
ajax: {
url: '/authors_comments',
data: {
author_id: "#{author_id}",
book_id: "#{book_id}"
}
},
columns: [
{title: 'Date', data: 'created_at', type: 'date'},
{title: 'Book', data: 'book'},
{title: 'Author', data: 'author'},
{title: 'Comment', data: 'comment'}
],
order: [[1, 'desc']]
});
However, when the page loads, the second column (Book) is sorted in ascending order (and the down arrow for that column is bolded), not the first. If I click on the arrow of the first column (Date), it sorts it properly. I believe I am following the documentation. I would like the table to load, sorted by Date, in descending order. Any ideas?
The columns are zero-based, like arrays. So if you want to sort by the date you need to do
order: [[0, 'desc']]
I have a simple table using a left join:
Editor::inst( $db, 'enqitem', 'enqitemid')
->fields(
Field::inst( 'salstkitem.salsubid' ),
Field::inst( 'salstkitem.condition1' ),
Field::inst( 'enqitem.cost' )
)
->leftJoin('salstkitem', 'salstkitem.salsubid', '=', 'enqitem.itemid')
->where('enqitem.enqnr',141316)
->debug( true )
->process( $_POST )
->json();
In the editor, I have hidden the primary key of the non-host table:
editor = new $.fn.dataTable.Editor( {
ajax: "datatables.php",
table: "#example",
fields: [{
name: "salstkitem.salsubid",
type: "hidden"
},{
label: "Condition:",
name: "salstkitem.condition1"
},{
label: "Cost:",
name: "enqitem.cost"
}
]
});
I've set it to be editable inline:
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
onBlur: 'submit'
} );
});
When I edit inline, the cost updates successfully, as it's a member of the host table. However condition1 will not update.
If I select the EDIT button, both fields update successfully.
This issue is purely for inline editing.
Does anyone have any idea why?
The debug suggests it isn't trying to update at all. It is purely a SELECT query.
Allan, the creator of datatables got back to me:
If you are writing to a joined table rather than just the master table you need to have Editor submit the joined table's primary key as well (enqitem.enqitemid in this case I guess). When you are inline editing, by default it will only submit the edited field, but you can use the form-options object to change that:
editor.inline( this, {
onBlur: 'submit',
submit: 'allIfChanged'
} );
Regards,
Allan
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
While setting data into List grid. Some extra space is coming after last record.
isc.CustomListGrid.create({
dataSource: "DeviceDiscoveryDataSource",
ID:"deviceDiscoveryListGrid",
autoDraw: false,
//showAllRecords: true,
paddingAsLayoutMargin:false,
autoFitMaxRecords:2000,
showFilterEditor:true,
filterOnKeypress:true,
filterLocalData: true,
alternateRecordStyles:true,
autoFetchData:true,
showRecordComponents: true,
showRecordComponentsByCell: true,
cellHeight:35,
emptyCellValue:"-",
canSort:false,
canGroupBy:false,
canPickFields:true,
bodyProperties: { canSelectText:true },
fields: [{
name: "deviceName",
type: "text",
title: "Device Name",
align: "center",
width:200
}]
});
Where I am wrong I am not getting. Please Help me.
Try to set virtualScrolling property to false in the ListGrid. When rendering components in each row, SmartClient does not exactly know how much space it will need, hence the blank space after the last record.
More about this: http://www.smartclient.com/docs/10.0/a/b/c/go.html#attr..ListGrid.virtualScrolling