I can't display custom icons on the actions tab from ng2-smart-table. I have installed Eva Icons from Akevo Team and I want to use them. I have changed the edit button to show some custom icons but the problem is that nothing appears. On the left side of delete, a brush icon had to appear.
Here is an image with the problem:
Here is the code:
settings = {
edit: {
editButtonContent: '<nb-icon icon="brush"></nb-icon>',
saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
},
columns: {
device: {
title: 'Device',
sortDirection: 'asc'
},
type: {
title: 'Type',
sort: false,
filter: false
},
serialNumber: {
title: 'Serial Number'
},
status: {
title: 'Status'
}
}
};
Try this :
settings = {
hideSubHeader: true,
actions: {
custom: [
{
name: 'edit',
title: '<nb-icon icon="brush"></nb-icon>'
},
{
name: 'save',
title: '<nb-icon icon="checkmark"></nb-icon>'
},
{
name: 'cancel',
title: '<nb-icon icon="close-circle"></nb-icon>'
}
],
add: false,
edit: false,
delete: false
}
...
};
hope this works for you!
Also you can use other icons sets like material icons, just add it to your project and then change your settings like:
settings = {
edit: {
editButtonContent: '<span class="material-icons">mode_edit</span>',
saveButtonContent: '<span class="material-icons">check_circle</span>',
cancelButtonContent: '<span class="material-icons">cancel</span>'
},
/* ... */
}
settings = {
hideSubHeader: true,
sort: true,
actions: {
position: 'left',
add: false,
edit: false,
delete: false,
select: false,
custom: [
{
name: 'viewRecord',
type: 'html',
title: '<i class="far fa-file-alt" title="View Record"></i>',
},
{
name: 'editRecord',
type: 'html',
title: '<i class="far fa-edit" title="Edit Record"></i>',
},
],
},
columns: {
column1: {
title: 'Column 1',
type: 'string',
width: '35%',
},
column2: {
title: 'Column 2',
type: 'string',
},
column3: {
title: 'Column 3',
type: 'string',
},
},
};
I found this thread:
https://github.com/akveo/ng2-smart-table/issues/1034
And so as mentioned in the last comment:
temporarily use the old nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons
I downloaded the required icon's SVG and added them as:
settings = {
edit: {
editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
. . .
}
. . .
}
Works well enough.
let newSettings = {
mode: "external",
actions: {
add: false,
edit: false,
delete: false,
position: 'right'
},
hideSubHeader: true,
add: {
addButtonContent: '<i class="nb-plus"></i>',
},
edit: {
editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
},
delete: {
deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
confirmDelete: true,
},
}
Related
I'm working with UI-GRID and have to add the custom CSS to the header of the grid, so I'm trying to add class to columns.
$scope.columns = [
{
name: 'status',
displayName: 'STATUS',
width: 200,
pinnedLeft: true,
**cellClass : "gridColumnStyle"**
},
{
name: 'serial',
displayName: 'SERIAL#',
width: 200,
cellClass : "gridColumnStyle"
},
{
name: 'product_name',
displayName: 'PRODUCT NAME',
width: 200,
cellClass : "gridColumnStyle"
}
];
But it is not working. Please tell me how to add the class which have some custom style.
Try headerCellClass instead of cellClass.
Like this
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellClass: 'blue' },
{ field: 'company',
headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
if (col.sort.direction === uiGridConstants.ASC) {
return 'red';
}
}
}]};
Also here is an example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass
and in case that ever moves here's a plunker: http://plnkr.co/edit/lmkJvXrxmGfzC342GXrO?p=preview
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
How to specify tags in the value of the textfield in ext js.
my code:
var myText = new Ext.form.TextField({
readOnly: true,
id: "key",
cls:"overflowText",
value: '<span style="color:red">'+name+'</span>',
});
This doesnt apply color to the value.How can i do it?
Use the fieldCls property, you shouldn't need the span.
Fiddle
// Style
<style>
.overflowText {
color: red;
}
</style>
// Code
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
fieldCls: 'overflowText',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
}
});
Maybe it happens because style rule is missing semicolon at the end? So it should be <span style="color:red;">
You can see my code about grid.
Here, Window opens but there is not any value in my grid.
Could you please help?
My php returns JSON encode blow:
{"results":3,"disPath":"","success":"true","rows":[{"id":"1","faz":"Faz1"},{"id":"2","faz":"Faz2"},{"id":"3","faz":"Faz3"}]}
Code
Ext.define('MyDesktop.GridFazlar', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id:'grid-fazlar',
init : function(){
this.launcher = {
text: 'Fazlar',
iconCls:'icon-grid'
};
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-fazlar');
if(!win){
var fazlarGridStore = new Ext.data.JsonStore({
root: 'rows',
autoLoad: true,
totalProperty: 'results',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}),
baseParams:{
depth: '2',
parentId: '2',
proccess: 'callGrid',
},
fields: [{
name :'id'
},{
name :'faz'
},
//{
]
});
win = desktop.createWindow({
id: 'grid-fazlar',
title:'Fazlar',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
listeners:{
beforeshow: function(){
fazlarGridStore.proxy.extraParams = {
depth: '2',
parentId: '2',
proccess: 'callGrid',
};
}
},
items: [
{
border: false,
xtype: 'grid',
listeners: {
celldblclick : function() {
alert('Deneme');
},
},
contextMenu: new Ext.menu.Menu({
items:[
{
id:'grid-fazlar_menu_denemebutton',
text: 'DenemeButonu',
listeners: {
click: function(){
alert('sssss');
}
}
}
]
}),
store:fazlarGridStore,
columns: [
new Ext.grid.RowNumberer(),
{
text: "ID",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'id'
},{
text: "Faz",
//flex: 1,
width: 70,
sortable: true,
dataIndex: 'faz'
},
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Modify options',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
return win;
},
statics: {
getDummyData: function () {
return [
['Faz1','06/06/2011','15/08/2010','19/12/2010'],
['Faz2','01/10/2010','15/11/2010','29/11/2011'],
['Faz3','16/11/2010','16/12/2010','14/02/2011'],
['Faz4','19/03/2011','20/03/2011','18/06/2011'],
['Faz5','21/03/2011','20/05/2011','18/08/2011'],
['Faz6','21/05/2011','05/07/2011','18/09/2011'],
['Faz7','06/07/2011','04/09/2011','06/12/2011'],
['Faz8','30/09/2011','30/10/2011','29/12/2011'],
];
}
}
});
Your Json has a custom root : 'rows'. You must configure your datareader to take this into account:
proxy: {
type: 'ajax',
url: 'phps/gridPhasesLoader.php',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'rows'
}
},
kendo ui grid is not supporting frozen columns. it would be appreciate if someone could help for customized script for kendo grid frozen columns. any suggestions?
columns: [ ]
Kendo UI Grid will support frozen columns in the next official release - Q1 2014. Until then the best suggestion I can give you is to use two grids bound to the same data source.
var dataSource = new kendo.data.DataSource({
/* snip */
});
$("#frozen").kendoGrid({
dataSource: dataSource,
columns: [
"OrderID"
],
height: 200,
sortable: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 200,
columns: [
{ field: "Freight", width: 100 },
{ field: "ShipName", width: 200 },
{ field: "OrderDate", width: 200, format: "{0:d}" },
{ field: "ShipCity", width: 200 }
],
sortable: true
});
This and some CSS magic would simulate the frozen column appearance: http://jsbin.com/uCEQOCi/1/edit
There is a caveat though. Only popup editing mode will work in this scenario.
i think with the new Version, also in 2020.1.219, is there a locked Attribute.
Lock in: Example - locked columns
<div id="grid"></div>
JS:
<script>
$("#grid").kendoGrid({
columns: [
{ locked: true, field: "id", width:200 },
{ field: "name", width:800 }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>
Below code you may get the idea about frozen column
<div id="kendogrid" data-bind="kendoGrid: { data: SearchResults, schema: { model: { fields: { DateOfBirthSortable: { type: 'date' }}}}, pageable:{pageSize: 15} ,selectable:'row',reorderable: true, navigatable:true, sortable: true,resizable: true,filterable: true,groupable: true,columnMenu: true,navigatable: true,
columns: [ { field: 'UniqueID', title : 'Id' , width:50,locked: true,lockable:false,event:{change:DoSearch}},
{ field: 'Salutation', title : '#',width:80,locked: true, template:'<span> #if(Salutation != null) {# <span> #= Salutation #</span> # } #</span>' },
{ field: 'FirstName', title : 'First Name', width:150,locked: true, },
{ field: 'LastName', title : 'Last Name',width:150,locked: true, template:'<span> #if(LastName != null) {# <span> #= LastName #</span> # } #</span>' },
{ field: 'Mobile', title : 'Mobile' ,width:100, template:'<span>#if(Mobile != null) {# <span>#=Mobile #</span> #}# </span>' },
{ field: 'Phone', title : 'Phone',width:100, template:'<span>#if(Phone != null){#<span>#= Phone#</span> #}# </span>' },
{ field: 'Email', title : 'Email',width:200, template:'<span>#if(Email != null){#<span>#= Email#</span> #}# </span>' },
{ field: 'DateOfBirthSortable', title : 'DOB',width:100,format: '{0: MM/dd/yyyy }',filterable:{ui: 'datepicker'} ,template:'<span> #if(DateOfBirth != null) {# <span> #= DateOfBirth #</span> # } #</span>' },
{ field: 'AddressLine1', title : 'AddressLine1', width:150, template: '<span >#if(AddressLine1 != null){#<span>#=AddressLine1 #</span> #} # </span>' },
{ field: 'AddressLine2', title : 'AddressLine2', width:150, template: '<span > #if(AddressLine2 != null){# <span>#=AddressLine2 # </span> #} # </span>' },
{ field: 'City', title : 'City', width:100, template: '<span >#if(City != null){#<span>#=City #</span> #} # </span>' },
{ field: 'State', title : 'State', width:100, template: '<span >#if(State != null){#<span>#=State #</span> #} #</span>' },
{ field: 'Country', title : 'Country', width:100, template: '<span >#if(Country != null){#<span>#=Country #</span> #} #</span>' },
{ field: 'Zip', title : 'Zip', width:100, template: '<span >#if(Zip != null){#<span>#=Zip #</span> #} #</span>' }
],change: onChange}">
</div>
you must include "columnMenu: true and scrollable:true" and then u must define the width for every column .