I am trying to insert row selection at the first position of grid but it always ends up among hidden columns. I did the same thing with delete button column and it worked just fine.
protected getColumns(): Slick.Column[] {
var cols = super.getColumns();
cols.unshift({
field: 'Delete Row',
name: '',
format: ctx => '<a class="inline-action delete-row" title="delete">' +
'<i class="fa fa-trash-o text-red"></i></a>',
width: 24,
minWidth: 24,
maxWidth: 24,
visible: true
});
cols.unshift(Serenity.GridRowSelectionMixin.createSelectColumn(() => this.rowSelection));
return cols;
The problem is not incorrect implementation of selection row. I know that because I tried it with different columns with same results. I also tried to set "visible" to true
Any ideas? Thanks
This code will make your selection column stay at first position
protected getPersistedSettings() {
let setting = super.getPersistedSettings();
let idCol = Q.tryFirst(setting.columns, x => x.id == "__select__");
if (idCol) {
setting.columns.splice(setting.columns.indexOf(idCol), 1);
setting.columns.splice(0, 0, idCol);
}
return setting;
}
But make sure that the selection is not in hidden list
The problem was that persistence of data was turned on with this function
protected getPersistanceStorage(): Serenity.SettingStorage {
return new Common.UserPreferenceStorage();
}
Related
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
When creating a gridx, I use the following column definition to insert an Edit button in to the last cell of each row:
var editColumn = { field : 'Edit', name : '', widgetsInCell: true,
onCellWidgetCreated: function(cellWidget, column){
var btn = new Button({
label : "Edit",
onClick : function() {
console.log('Do stuff here');
});
btn.placeAt(cellWidget.domNode);
}
};
columns.push(editColumn);
var grid = new Grid({
cacheClass : Cache,
store : store,
structure : columns,
modules: ["gridx/modules/CellWidget"]
}, 'gridNode');
grid.body.onAfterRow = function(row){
...do stuff on the row here
};
Whne I include the onAfterRow function the row processing happens but the OnCellWidgetCreated does not. Each function seems wo work in absence of the other. Any suggestions on how I can: (1) format the rows according to row data AND (2) insert the button widgets in the last cell of each row?
Ok, solved it. Rather than assign the grid.body.onAfterRow, the way that worked for me was:
aspect.after(grid.body,'onAfterRow',function(row){
key = row.id;
if ('anulada' in row.grid.store.get(key)){
if(row.grid.store.get(key).anulada == true){
row.node().style.color = 'gray';
}
}
},true);
You need to require "dojo/aspect".
I'm using datatables version 1.9.4 and am having a problem with adding a class to certain rows.
I have multiple datatables, all with class 'display'. I'm using jQuery tabs to display each datatable on a separate tab.
All is working well, except I want to add a class to a table row depending on the column values; if column 6 is less than column 14, I want to add myClass.
I've found suggestions to use fnRowCallback, but I'm getting random results, such as sometimes if column 6 is less than column 14, myClass gets added correctly, but other times if column 14 is less than column 6 myClass still gets added!
This doesn't happen for all rows though, so it's pretty random.
Here's the code I'm using
$(document).ready(function() {
$('.display').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bScrollCollapse": true,
"sScrollY": "300px",
"sAjaxSource": "ajax.php",
"sDom": '<"H"lfr>t<"F"ipS>',
"oScroller": {
"loadingIndicator": true
},
"fnRowCallback": function( nRow, aData ) {
var $nRow = $(nRow);
if (aData[6] < aData[14]) {
$nRow.addClass("myClass");
}
return nRow
}
});
});
Is there something wrong with what I've done, or is it because I'm using multiple tables?
I think I have this working, but there is probably a cleaner way, so if anyone knows of a better way of doing this, please let me know!
I'm looping through all the rows for each table once the table has been drawn.....
"fnDrawCallback": function( oSettings ) {
for (var i = 0, row; row = oSettings.nTable.rows[i]; i++) {
price = Number(row.cells[4].innerHTML.replace(/[^0-9\.]+/g,""));
average = Number(row.cells[6].innerHTML.replace(/[^0-9\.]+/g,""));
if (price < average) {
row.className = row.className + " myClass";
}
}
}
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 want to have client side paging.
But for some reason, I only seem to get back the first page? Even though I know I have two pages worth of data (IE... I step through my code, and I definitely have two...)... What is more baffling is that my links to navigate through the pages never seem to be correct... For instance I would expect the following screen to say 1 of 2...
Also I would expect the bottom right hand side to say View 1-15 of 21?
My feeling is that I am doing something wrong in my data layer to give this pager it's info.
So It only returns the first page.
public static string JsonifyEnc(IEnumerable<TemplateModel> model, int popId, int page, int rows) {
TemplateModel variable = model.ToArray()[0];
ArrayList al = new ArrayList();
//foreach (PatientACOModel patMod in variable.Template) {
int i = 1;
int rowstart = (page * rows + 1) - rows;
int rowend = page * rows;
//Here is where I create the rows... nothing special here
var griddata = new {
total = variable.Template.Count % rows > 0 ? (variable.Template.Count / rows) + 1 : (variable.Template.Count / rows),
page = page,
records = al.Count,
rows = al.ToArray()
};
When I quick wath the total variable it says two?
This would be the first part of my json string that is returned...
{"total":2,"page":1,"records":15,"rows":
So it's there. Also, this is how I am building up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '/Encounters/GetAjaxPagedGridData/', //'Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//
postData: { popId: '#TempData["POPULATIONID"]'},
pager: '#pager',
jsonReader: {repeatitems: false},
loadonce: true,
height: 'auto',
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
If you use loadonce: true on the client side you should change the server code so that it ignores page and rows options and returns all data. You should just sort the data corresponds to sidx and sord parameter (see sortname and sortorder in jqGrid). You don't need to fill total, page and records parts in the response.
If you use loadonce: true jqGrid load the data and save it in internal data and _index parameters. After that jqGrid change datatype option of jqGrid to "local". So all later sorting, filtering (searching) and paging of data will be done locally.