Hi i want to add a column on slickgrid at particular index.
I am trying to do columns.push({ id: "", name: "", field: "" }).
Its trying to add at last but i want this column in the middle of slickgrid. Is there any way to do this
var newColumn = { id: '', name: '', field: '' };
// create a copy of the columns
var newColumns = grid.getColumns().slice(0);
// insert the new column in the middle somewhere
newColumns.splice(indexForNewColumn, 0, newColumn);
// set the grid's columns as the new columns
grid.setColumns(newColumns);
Related
I like to change the Type field drop down option depending on the inputs of Year and Level fields.
I am able to trigger an event when Level is change.
But how do I get the value of the Year field?
Portion of the code are as follows
colModel:[
{name:'Year',index:'Year', width:70,sortable:false,editable:true,align:'center',editoptions:{size:15, maxlength:4}, formoptions:{ rowpos:1, label: "Year (*)"},editrules:{required:true}},
{name:'Level',index:'Level', width:70,sortable:false,editable:true,align:'center',edittype: "select", editoptions: { value: '1:1;2:2;3:3;4:4;5:5;6:6', defaultValue:'1', dataEvents : [
{
'type' : 'change',
'fn' : function ( el ) {
// get the newly selected value from the user
var levelz = $(el.target).val(), yearz ;
var row = $(el.target).closest('tr.jqgrow');
var rowid = row.attr('id');
//yearz = ??
if (parseInt(levelz)==5 || parseInt(levelz)==6)
{
if (parseInt(yearz)>2017)
{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:Sem 1;4:Sem 2;6:EY;9:OVR', defaultValue:'Sem 1'}} );
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '', defaultValue:''}} );
}
}else{
$("#gridmain").jqGrid('setColProp','Term', {editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}} );
}
}
}]}, formoptions:{ rowpos:2, label: "Level (*)"},editrules:{required:true}},
{name:'Term',index:'Term', width:70, sortable:false,editable: true,align:'center',edittype: "select", editoptions: { value: '1:TA1/CT1;2:TA2-before 2013;3:MY/TA2/CT2;4:TA3/CT3;5:TA4-before 2013;6:EY/TA4/CT4;9:OVR;D:CW1;E:CW2;F:CW3;G:CW4', defaultValue:'TA1'}, editrules: { required: true }, formoptions:{ rowpos:3, label: "Type"}},
The codes are from piecing together what I read from google search...
I face 2 issues:
1) I don't know how to get the Year value
2) The drop down option list doesn't seems to change. - hmm it seems that if I close the edit form and open again, the Type field drop down option changes. What I need is to change the option on the fly - wonder how this can be done...
After much googling, managed to get the ans from Oleg's post as shown here
Also from his example, I derive the year value:
var yearz = $("#Year.FormElement", form[0]).val();
I need help using a custom column filter for handling JS objects.
I have a slickgrid table where the values in one column are JS object:
[
{ id: "1234", text: "Batman"},
{ id: "2345", text: "Robin"}
]
I use a custom formatter to smash the object into a string:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext: any) =>
value ? value.map(o => o.text).join(', ') : '';
Which displays in slickgrid as
Batman, Robin
my slickgrid options use gridmenu and enables column filtering:
this.gridOptions = {
enableGridMenu: true,
enableFiltering: true,
enableAutoResize: true,
enableColumnReorder: true
};
My columnDef enables filtering for this column:
{
id: 'owners',
name: 'Owners',
field: 'owners',
sortable: false,
formatter: optionFormatter,
filterable: true
}
Everything works if the value in the cell is a string, but the filter doesn't work if the cell is an object. I assume the filter is searching the pre-formatted value.
Is there a way to provide the column with a custom filter function that knows how to search the JS object for the query string? For example if I could just search the JSON.stringify(value), that would be good enough.
Alternatively, this answer describes how I could use the formatter to store the formatted text as a different string property in dataContext. If I do that, how do I specify which property to filter, seeing as it is a different property than the column field?
I found a workaround.
preprocess my data, calling JSON.stringify on all values that are objects:
flattenFeature(f: Feature): any{
var res = {};
for (var prop in f) {
res[prop] = (typeof f[prop] === 'object') ? JSON.stringify(f[prop]) : f[prop];
}
return res;
}
Then in my formatter, I parse the json, before formatting:
// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext) =>
value ? JSON.parse(value).map(o => o.text).join(', ') : '';
This allows the standard string filter to search the stringify'd JSON
I'm developing in SAPui5 one table, and have 1 column with 2 data in one cell (product name & company).
I use the multiLables option for show the title, but I need for each title one sort function.
Is that possible?
This is my code:
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table('table1',{
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
navigationMode: sap.ui.table.NavigationMode.Paginator,
editable: false,
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column('colkag', {
visible: false,
label: new sap.ui.commons.Label({text: "kag"}),
template: "kag",
sortProperty: "kag",
filterProperty: "kag",
}));
oTable2.addColumn(new sap.ui.table.Column('colname', {
multiLabels: [
new sap.ui.commons.Label({text: "Fondsname"}),
new sap.ui.commons.Label({text: "Verwaltungsgesellschaft"}) ],
template: new sap.m.ObjectIdentifier({title:"{name}", text:"{kag}"}),
sortProperty: "name",
filterProperty: "name",
width: "400px"
}));
And this is the result:
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},
Modifying an element using set of a KendoUI grid removes the selection.
If a have a KendoUI DataSource defined as:
var dataSource = new kendo.data.DataSource({
data : [
{ "id": 1, "item": "item1", "value": "foo" },
{ "id": 2, "item": "item2", "value": "foo" },
{ "id": 3, "item": "item3", "value": "foo" },
{ "id": 4, "item": "item4", "value": "foo" }
],
pageSize: 5
});
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns : [
{ field: "item", title: "Item" },
{ field: "value", title: "Value" }
],
selectable: "row"
}).data("kendoGrid");
If I click in a row (select it) and then update the model using the following code:
dataSource.data()[0].set("value", "bar");
The selection gets lost.
Sample code in JSFiddle here
Instructions:
Select any row.
Click the button for changing the value of the first row.
Is there any way of preserving selection when updating a local DataSource?
This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:
dataSource.data()[0].value = "bar";
However this will not trigger the change event and the Grid wont be updated either.
To preserve the selection of the Grid between 'refreshes' you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.
Regards
I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.
The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.
var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
dataItem.set("value", dataItem.get("value") - 1);
if (next.length)
grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}
You can try it here.