I wrote JQuery to grab columns' text in the ColumnChooser pop-up dialog, in order to get colModel's Name (or Index) then I learned it doesn't work that way and I have to somehow use colName against colModel instead.
Problem..
colNames: [ 'Id', 'Stock Number', 'VIN', 'Year' ],
colModel: [
{ name: 'Id', index: 'Id' },
{ name: 'StockNumber', index: 'StockNumber' },
{ name: 'VIN', index: 'VIN' },
{ name: 'Year', index: 'Year' }
As you can see my problem is "Stock Number" is not the same as "StockNumber" when using $ColumnChooserSelectedList against the $jqgridColumnModelSetting. Also, I cannot tell if columns are in proper order (between colName & colModel) as I don't know how it works behind the scene.
var $ColumnChooserSelectedList = $("#colchooser_test ul.selected li");
var $ColumnModelSetting = $("#test").jqGrid('getGridParam', 'colModel');
var returnValue = "";
$.each($ColumnChooserSelectedList, function (i,o) {
if (o.title.length > 0) {
if (returnValue.length > 0) { returnValue += "|"; }
returnValue += o.title; //This o.title need to be changed to match colModel's Name (or Index)...
}
});
Thanks...
Updated - Solution found
Came up with this nice solution but I cannot be sure if it works 100% of the time.
var $ColumnChooserSelectedList = $("#colchooser_test ul.selected li");
var $ColumnModelSetting = $("#test").jqGrid('getGridParam', 'colModel');
var $ColumnNameSetting = $("#test").jqGrid('getGridParam', 'colNames');
var returnValue = "";
$.each($ColumnChooserSelectedList, function (i1,o1) {
if (o1.title.length > 0) {
$.each($ColumnNameSetting, function (i2, o2) {
if ($ColumnNameSetting[i2] == o1.title) {
if (returnValue.length > 0) { returnValue += "|"; }
returnValue += $ColumnModelSetting[i2].name;
return false; //This break the foreach loop...
}
});
}
});
Updated - Solution found
Came up with this nice solution but I cannot be sure if it works 100% of the time.
var $ColumnChooserSelectedList = $("#colchooser_test ul.selected li");
var $ColumnModelSetting = $("#test").jqGrid('getGridParam', 'colModel');
var $ColumnNameSetting = $("#test").jqGrid('getGridParam', 'colNames');
var returnValue = "";
$.each($ColumnChooserSelectedList, function (i1,o1) {
if (o1.title.length > 0) {
$.each($ColumnNameSetting, function (i2, o2) {
if ($ColumnNameSetting[i2] == o1.title) {
if (returnValue.length > 0) { returnValue += "|"; }
returnValue += $ColumnModelSetting[i2].name;
return false; //This break the foreach loop...
}
});
}
});
Related
I have a Kendo grid that I am using to display a typescript structure that looks like this.
{
companyId: string,
name: string,
inceptionDate: Date,
tags: string[]
}
I would like to be able to filter on the tags column, but I am unsure as to how this should actually work. I can quite easily filter on the name column, either with the built in grid filtering functionality or via code:
baseFilter.filters.push({ field: "name", operator: "contains", value: "myValue" });
But I don't see a way to do this against an array object. I would prefer to be able to select a tag from the a list in the grid filter option, but if that's not possible I'd be quite happy to use a multiselect and set the filter manually.
Is this something that is built in or that is relatively easy (or even just not insanely hard) to implement?
As long as you're doing the client side filtering, you can use a function for the operator field.
a simple example (in js):
baseFilter.filters.push({
field: "tags",
operator: function (tags, value) {
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
if (tag === value)
return true;
}
return false;
}});
TerminalSamurai's answer did the trick for me !
Here is my full code (with checking if there is already a filter existing)
var grid = $("#GridListeModelesDocumentPatient_#Model.PatientId").data("kendoGrid");
if (grid != null) {
var filterHandler = grid.dataSource.filter();
if (dataItem.Nom == "Tous") {
if (filterHandler != null) {
var existingFilters = filterHandler.filters;
for (var i = existingFilters.length - 1; i >= 0; i--) {
if (existingFilters[i].field == "ModelesMotifs") {
existingFilters.splice(i, 1);
}
}
grid.dataSource.filter(existingFilters);
} else {
grid.dataSource.filter({});
}
} else {
if (filterHandler != null) {
var existingFilters = filterHandler.filters;
for (var i = existingFilters.length - 1; i >= 0; i--) {
if (existingFilters[i].field == "ModelesMotifs") {
existingFilters.splice(i, 1);
}
}
var new_filter = {
field: "ModelesMotifs",
operator: function (modelesMotifs, value) {
for (var i = 0; i < modelesMotifs.length; i++) {
var modeleMotif = modelesMotifs[i];
if (modeleMotif.MotifId === value)
return true;
}
return false;
},
value: dataItem.MotifId
};
existingFilters.push(new_filter);
grid.dataSource.filter(existingFilters);
} else {
grid.dataSource.filter({
field: "ModelesMotifs",
operator: function (modelesMotifs, value) {
for (var i = 0; i < modelesMotifs.length; i++) {
var modeleMotif = modelesMotifs[i];
if (modeleMotif.MotifId === value)
return true;
}
return false;
},
value: dataItem.MotifId
});
}
}
}
I am using ag-grid with angular 4.
I am using infinite scrolling as the rowModelType. But since my data is huge, we want to first call just 100 records in the first ajax call and when the scroll reaches the end, the next ajax call needs to be made with the next 100 records? How can i do this using ag-grid in angular 4.
This is my current code
table-component.ts
export class AssaysTableComponent implements OnInit{
//private rowData;
private gridApi;
private gridColumnApi;
private columnDefs;
private rowModelType;
private paginationPageSize;
private components;
private rowData: any[];
private cacheBlockSize;
private infiniteInitialRowCount;
allTableData : any[];
constructor(private http:HttpClient, private appServices:AppServices) {
this.columnDefs = [
{
headerName: "Date/Time",
field: "createdDate",
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
width: 250,
cellRenderer: "loadingRenderer"
},
{headerName: 'Assay Name', field: 'assayName', width: 200},
{headerName: 'Samples', field: 'sampleCount', width: 100}
];
this.components = {
loadingRenderer: function(params) {
if (params.value !== undefined) {
return params.value;
} else {
return '<img src="../images/loading.gif">';
}
}
};
this.rowModelType = "infinite";
//this.paginationPageSize = 10;
this.cacheBlockSize = 10;
this.infiniteInitialRowCount = 1;
//this.rowData = this.appServices.assayData;
}
ngOnInit(){
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
//const allTableData:string[] = [];
//const apiCount = 0;
//apiCount++;
console.log("assayApiCall>>",this.appServices.assayApiCall);
const assaysObj = new Assays();
assaysObj.sortBy = 'CREATED_DATE';
assaysObj.sortOder = 'desc';
assaysObj.count = "50";
if(this.appServices.assayApiCall>0){
console.log("this.allTableData >> ",this.allTableData);
assaysObj.startEvalulationKey = {
}
}
this.appServices.downloadAssayFiles(assaysObj).subscribe(
(response) => {
if (response.length > 0) {
var dataSource = {
rowCount: null,
getRows: function (params) {
console.log("asking for " + params.startRow + " to " + params.endRow);
setTimeout(function () {
console.log("response>>",response);
if(this.allTableData == undefined){
this.allTableData = response;
}
else{
this.allTableData = this.allTableData.concat(response);
}
var rowsThisPage = response.slice(params.startRow, params.endRow);
var lastRow = -1;
if (response.length <= params.endRow) {
lastRow = response.length;
}
params.successCallback(rowsThisPage, lastRow);
}, 500);
}
}
params.api.setDatasource(dataSource);
this.appServices.setIsAssaysAvailable(true);
this.appServices.assayApiCall +=1;
}
else{
this.appServices.setIsAssaysAvailable(false)
}
}
)
}
}
I will need to call this.appServices.downloadAssayFiles(assaysObj) at the end of 100 rows again to get the next set of 100 rows.
Please suggest a method of doing this.
Edit 1:
private getRowData(startRow: number, endRow: number): Observable<any[]> {
var rowData =[];
const assaysObj = new Assays();
assaysObj.sortBy = 'CREATED_DATE';
assaysObj.sortOder = 'desc';
assaysObj.count = "10";
this.appServices.downloadAssayFiles(assaysObj).subscribe(
(response) => {
if (response.length > 0) {
console.log("response>>",response);
if(this.allTableData == undefined){
this.allTableData = response;
}
else{
rowData = response;
this.allTableData = this.allTableData.concat(response);
}
this.appServices.setIsAssaysAvailable(true);
}
else{
this.appServices.setIsAssaysAvailable(false)
}
console.log("rowdata>>",rowData);
});
return Observable.of(rowData);
}
onGridReady(params: any) {
console.log("onGridReady");
var dataSource = {
getRows: (params: IGetRowsParams) => {
this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;
console.log(this.info);
this.getRowData(params.startRow, params.endRow)
.subscribe(data => params.successCallback(data));
}
};
params.api.setDatasource(dataSource);
}
Result 1 : The table is not loaded with the data. Also for some reason the service call this.appServices.downloadAssayFiles is being made thrice . Is there something wrong with my logic here.
There's an example of doing exactly this on the ag-grid site: https://www.ag-grid.com/javascript-grid-infinite-scrolling/.
How does your code currently act? It looks like you're modeling yours from the ag-grid docs page, but that you're getting all the data at once instead of getting only the chunks that you need.
Here's a stackblitz that I think does what you need. https://stackblitz.com/edit/ag-grid-infinite-scroll-example?file=src/app/app.component.ts
In general you want to make sure you have a service method that can retrieve just the correct chunk of your data. You seem to be setting the correct range of data to the grid in your code, but the issue is that you've already spent the effort of getting all of it.
Here's the relevant code from that stackblitz. getRowData is the service call that returns an observable of the records that the grid asks for. Then in your subscribe method for that observable, you supply that data to the grid.
private getRowData(startRow: number, endRow: number): Observable<any[]> {
// This is acting as a service call that will return just the
// data range that you're asking for. In your case, you'd probably
// call your http-based service which would also return an observable
// of your data.
var rowdata = [];
for (var i = startRow; i <= endRow; i++) {
rowdata.push({ one: "hello", two: "world", three: "Item " + i });
}
return Observable.of(rowdata);
}
onGridReady(params: any) {
console.log("onGridReady");
var datasource = {
getRows: (params: IGetRowsParams) => {
this.getRowData(params.startRow, params.endRow)
.subscribe(data => params.successCallback(data));
}
};
params.api.setDatasource(datasource);
}
var data = [{"Id":40072,"Id2":40071,"SmDetails":{"Id1":40071,"Id2":40072}}]
I want to display SmDetails.Id1 in a column. How is this possible? I tried:
var columns = [{name:'Personnel',field:SmDetails.id1,id:'detailId'}];
Please help me
Please help me
**My latest code**
var data = [{"Id":40072,"Id2":40071,"allocationDetails":{"Id1":40071,"allocationDetails":{"accommodationId":4007}}}]
var grid;
var columns = [ {name:"Personnel",field:"allocationDetails",fieldIdx:'accommodationId', id:"accommodationId"}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
dataItemColumnValueExtractor:
function getValue(item, column) {
var values = item[column.field];
if (column.fieldIdx !== undefined) {
return values && values[column.fieldIdx];
} else {
return values;
}}};
var gridData=$scope.Vo;//This return as json format
grid = new Slick.Grid("#testGrid",gridData, columns);
This is the code tried recently.
You'll need to provide a custom value extractor to tell the grid how to read your object.
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
dataItemColumnValueExtractor:
// Get the item column value using a custom 'fieldIdx' column param
function getValue(item, column) {
var values = item[column.field];
if (column.fieldIdx !== undefined) {
return values && values[column.fieldIdx];
} else {
return values;
}
}
};
The column definitions would look like:
{
id: "field1",
name: "Id1",
field: "SmDetails",
fieldIdx: 'Id1'
}, {
id: "field2",
name: "Id2",
field: "SmDetails",
fieldIdx: 'Id2'
} //... etc
Check out this fiddle for a working example.
try this to convert your data into object of single length values ...
newData = {};
for(key in data[0]){
parentKey = key;
if(typeof(data[0][key]) == "object"){
childData = data[0][key];
for(key in childData){
childKey = key;
newKey = parentKey+childKey;
newData[newKey] = childData[childKey];
}
} else {
newData[key] = data[0][key];
}
}
This will convert your data object like this
newData = {Id: 40072, Id2: 40071, SmDetailsId1: 40071, SmDetailsId2: 40072};
Now use this newData to map your data items in grid
I find this works well for nested properties, eg:
var columns = [
{ id: "someId", name: "Col Name", field: "myRowData.myObj.myProp", width: 40}
..
];
var options {
...
dataItemColumnValueExtractor: function getItemColumnValue(item, column) {
var val = undefined;
try {
val = eval("item." + column.field);
} catch(e) {
// ignore
}
return val;
}
};
I have a grid in ext with some custom columns, and I want to be able to sort this column - I want to sort it by what is displayed inside of it, but really I just cannot figure out how to define a sorter for a column that will not be based on the dataIndex - I tried using a custom model, but I could not get that to work.
{
text: 'Parent',
dataIndex: 'Parent',
renderer: function(value, meta, record) {
var ret = record.raw.Parent;
if (ret) {
return ret.Name;
} else {
meta.tdCls = 'invisible';
return record.data.Name;
}
},
sortable: true
},
You should be able to override the doSort method of the column. Here's the gist of it. I also created a working fiddle (http://jsfiddle.net/cfarmerga/LG5uA/). The fiddle uses the string length of a field as the property to sort on, but of course you could apply your own custom sort logic.
var grid = Ext.create('Ext.grid.Panel',{
//...
columns: [
{ text: 'name', dataIndex: 'name', sortable: true },
{
text: 'Custom',
sortable : true,
dataIndex: 'customsort',
doSort: function(state) {
var ds = this.up('grid').getStore();
var field = this.getSortParam();
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2){
v1 = v1.get(field);
v2 = v2.get(field);
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
}
});
}
}
]
//....
});
For Ext JS version 5, it looks like doSort was taken out, so I couldn't override that. Instead, I went the route of listening to the sortchange event, and from there, I used the Ext.data.Store.setSorters method. The code is a bit custom, and overly complex because of the data that I'm using, so keep that in mind (Fiddle here):
// grid class
initComponent: function() {
...
this.on('sortchange', this.onSortChange, this);
},
onSortChange: function(container, column, direction, eOpts) {
// check for dayColumnIndex
if (column && column.dayColumnIndex !== undefined) {
this.sortColumnByIndex(column.dayColumnIndex, direction);
}
},
sortColumnByIndex: function(columnIndex, direction) {
var store = this.getStore();
if (store) {
var sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
var val1 = day1.get('value');
var val2 = day2.get('value');
sortValue = val1 > val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
if (direction !== 'ASC') {
sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
var val1 = day1.get('value');
var val2 = day2.get('value');
sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);
}
}
There is a convert method on the Ext.data.Model class that allows you to convert the data before it's being used. Then you can just specify this 'dataIndex' in your column and do a normal sort. The column will be sorted by that converted value. Here is the a sample model with just one field (Parent) and with it's corresponding conversion:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Parent', type: 'string', convert: sortParent},
// other fields...
],
sortParent: function(value, record) {
var ret = record.raw.Parent;
if (ret) {
return ret.Name;
} else {
meta.tdCls = 'invisible';
return record.data.Name;
}
}
});
I have am trying to implement something along the lines of
Slickgrid, column with a drop down select list?
my code is;
slick.editors.js ;
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Editors": {
"Text": TextEditor,
"Integer": IntegerEditor,
"Date": DateEditor,
"YesNoSelect": YesNoSelectEditor,
"Checkbox": CheckboxEditor,
"PercentComplete": PercentCompleteEditor,
"LongText": LongTextEditor,
"SelectOption": SelectCellEditor
}
}
});
with the function defined futher down,
function SelectCellEditor(args) {
var $select;
var defaultValue;
var scope = this;
this.init = function () {
if (args.column.options) {
opt_values = args.column.options.split(',');
} else {
opt_values = "yes,no".split(',');
}
option_str = ""
for (i in opt_values) {
v = opt_values[i];
option_str += "<OPTION value='" + v + "'>" + v + "</OPTION>";
}
$select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.destroy = function () {
$select.remove();
};
this.focus = function () {
$select.focus();
};
this.loadValue = function (item) {
defaultValue = item[args.column.field];
$select.val(defaultValue);
};
this.serializeValue = function () {
if (args.column.options) {
return $select.val();
} else {
return ($select.val() == "yes");
}
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return ($select.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
Then in my CSHTML
var columns = [
{ id: "color", name: "Color", field: "color", options: "Red,Green,Blue,Black,White", editor: Slick.Editors.SelectOption },
{ id: "lock", name: "Lock", field: "lock", options: "Locked,Unlocked", editor: Slick.Editors.SelectOption },
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data[i] = {
color: "Red",
lock: "Locked"
};
}
the grid shows and the colour is shown as if its a regular text in a cell, but no dropdown?.
The drop-down will appear only when you are editing that cell. Adding editable: true to your grid options should work I think.