I have a column array object which is bound to columns property of kendo grid. If I add a command in the array, the button appears but the edit event is not firing.
Also in edit mode I need to make the checkboxes in each column as enabled and update it based on the column name.
I am adding the columns using below code and biding to columns property of kendo grid.
var titleDefs = [
"User Name", "Admin", "Print"
];
// Field Definition
var fieldDefs = [
"UserName", "Admin", "Print"
];
var columnDefs = [];
for (var i = 0; i < titleDefs.length; i++) {
if (i == 0)
columnDefs.push({
title: titleDefs[i], field: fieldDefs[i],
});
else
columnDefs.push({
title: titleDefs[i], field: fieldDefs[i], template: '<input id=chk' + fieldDefs[i] + ' name=chk' + fieldDefs[i] + ' type="checkbox" #= ' + fieldDefs[i] + ' ? "checked=checked style=display:block disabled=disabled" : " style=display:none" # ></input>',
});
}
columnDefs.push({ command: "edit", title:"", width:"100px"});
Please help me in this.
While defining the column in the column list, you will be having the property in your datasource based on what you will be making it editable ie YourProperty,using this property you can bind the checked property like below.
columnList = [{ title: "", width: "30px", template: "<input class='chkEmail' id='chk_#= DocumentGUID #' type='checkbox' data-bind='checked: YourProperty' #= YourProperty? checked='checked' : '' #/>", groupable: false}]
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 a FilteringSelect that use an FilteringSelect as store.
I want to ignore the accented characters that users can enter, and to return all the elements with or without accents. But i don't know what event i have to catch.
Here's my code :
var ccppMemory = new dojo.store.FilteringSelect({
data: centrosPoblado,
idProperty: "id"
});
sboMunicipio = new dijit.form.FilteringSelect({
id: "soMunicipioSelect",
hasDownArrow: false,
placeholder: i18n.tools.searches.ordinary.departmentTown,
store: ccppMemory,
searchAttr: "unitario",
intermediateChanges : true,
queryExpr: "*${0}*",
autoComplete: false,
highlightMatch: "all",
style:"margin-right:5px;width:170px;"
}, "soMunicipioSelect");
sboMunicipio.startup();
To explain better, centrosPoblado is an array that i populate as :
centrosPoblado.push({
id: value.attributes.CODIGO_DANE,
label: value.attributes.NOMBRE_CENTRO_POBLADO,
unitario: value.attributes.DEPTO + " / " + value.attributes.NOMBRE_CENTRO_POBLADO
});
In 'unitario' i have store strings like 'Medellín', ' Bogotá', ....
What i want is that when a user enter medellín, the filterselect ignore and returns 'Medellín' . So what i think i have to do it's to substitute medellin for something like m[eé]d[eé]ll[íi]n, but i don't know where.
Thanks
if anyone is interested, here is the answer :
http://dojo-toolkit.33424.n3.nabble.com/FilteringSelect-avoid-Accented-characters-td4004099.html
You have to overwrite the 'queryEngine' of the Memory that its linked to the FilteringSelect
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 'm using Android Titanium Appcelerator.
I had created a search bar for a tableview but it does not sorting the table values, please help:
var search = Titanium.UI.createSearchBar({
showCancel : false,
});
TableView = Ti.UI.createTableView({
search : search,
searchHidden : true,
filterAttribute : 'filter',
});
And I have added filter = contents; inside my rowview.
This is the basic code. I append all the text I want to search on into the filter of the tableRow definition. I then set the filter attribute of my tableROW to the filterAttribute of the tableVIEW.
var tableRow = Ti.UI.createTableViewRow({
height : '70dp',
layout : 'vertical',
filter : filterByThis1 + ' ' + filterByThis2
});
var search = Ti.UI.createSearchBar({});
var tableView = Ti.UI.createTableView({
filterAttribute : 'filter',
search : search
});