I have table using w2ui javascript with the data json in the record. I can't search by date using operator between, this code it's not working. But it's working when I using operator is and with one parameter. I don't know what wrong with this code. What I miss?
$(function() {
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true },
{ field: 'fname', caption: 'First Name', size: '30%', sortable: true },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px', render:'date', type: 'date' }],
records: [{
recid: 1,
fname: 'John',
lname: 'doe',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 2,
fname: 'Stuart',
lname: 'Motzart',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 3,
fname: 'Jin',
lname: 'Franson',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 4,
fname: 'Susan',
lname: 'Ottie',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 5,
fname: 'Kelly',
lname: 'Silver',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 6,
fname: 'Francis',
lname: 'Gatos',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 7,
fname: 'Mark',
lname: 'Welldo',
email: 'jdoe#gmail.com',
sdate: '4/3/2012'
}, {
recid: 8,
fname: 'Thomas',
lname: 'Bahh',
email: 'jdoe#gmail.com',
sdate: '4/7/2012'
}, {
recid: 9,
fname: 'Sergei',
lname: 'Rachmaninov',
email: 'jdoe#gmail.com',
sdate: '4/6/2012'
}, {
recid: 10,
fname: 'Jill',
lname: 'Doe',
email: 'jdoe#gmail.com',
sdate: '4/5/2012'
}]
});
});
function search1() {
w2ui['grid'].search([{ field: 'sdate', value: ['4/5/2012', '4/7/2012'], type: 'date', operator: 'between'}]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.3.min.js"></script>
<link href="http://w2ui.com/src/w2ui-1.3.min.css" rel="stylesheet"/>
<div id="grid" style="width: 100%; height: 350px;"></div>
<br />
Date: <input type="text" name="sDate"> <input type="text" name="eDate">
<input type="submit" value="Submit" onclick="search1()">
Search property has to be defined by type for each columns
eg.
searches: [
{ field: 'recid', caption: 'ID ', type: 'int' },
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'list', options: { items:[ 'jim#gmail.com', 'jdoe#gmail.com']} },
{ field: 'sdate', caption: 'Start Date', type: 'date' }
],
Related
I'm still finding my way around Extjs, I'm currently displaying text data to a UI like so:
reference: 'agentLogGrid',
store: {
xclass: 'Ext.data.ChainedStore',
source: 'LogViewSource',
},
itemConfig: {
viewModel: true,
},
columns: [{
text: 'Timestamp',
xtype: 'templatecolumn',
tpl: '{timestamp}',
flex: 1,
}, {
text: 'Data',
xtype: 'templatecolumn',
tpl: '{data}',
flex: 1,
}],...
But the texts are not highlightable, that means I can't highlight them and copy, or select and copy. When I mouse over, the pointer sees it as a link, but I can't highlight or select. How do I make just the {data} highlightable?
In classic toolkit you can use enableTextSelection property. Something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
department: "Management"
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
department: "Sales"
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
department: "Sales"
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
department: "Accounting"
}, {
firstname: "Angela",
lastname: "Martin",
seniority: 5,
department: "Accounting"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
xtype: 'templatecolumn',
tpl: '{firstname} {lastname}',
flex: 1
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{department} ({seniority})'
}],
// USE viewConfig enableTextSelection property
viewConfig: {
enableTextSelection: true
},
height: 200,
width: 300,
renderTo: Ext.getBody()
});
}
});
Not sure what I'm doing wrong here, I'm trying the data grid from material, copy pasted the example code from their website:
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 90 },
{
field: 'firstName',
headerName: 'First name',
width: 150,
editable: true,
},
{
field: 'lastName',
headerName: 'Last name',
width: 150,
editable: true,
},
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 110,
editable: true,
}
];
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];
const NFTSalesGrid: FunctionalComponent = () => {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={10}
rowsPerPageOptions={[5]}
/>
</div>
)
}
export default NFTSalesGrid;
And I'm receiving this error:
An unexpected error occurred. Error: No row with id #undefined found. Error: No row with id #undefined found
I have created a form elements using JSON schema in reactJs. I am unable to focus the control on drop-down filed, instead it skips to the next field.
export default {
title: 'Create User',
schema: {
type: 'object',
required: [
'FirstName',
'MobileCode',
'Status',
],
properties: {
FirstName: {
title: 'First Name',
type: 'string',
minLength: 3,
maxLength: 30,
},
LastName: {
title: 'Last Name',
type: 'string',
minLength: 1,
maxLength: 30,
},
LoginID: {
title: 'Login ID',
type: 'string',
minLength: 3,
maxLength: 50,
},
MobileCode: {
title: 'Code',
type: 'number',
enum: [91, 1, 33, 49],
enumNames: ['+ 91', '+ 1', '+ 33', '+ 49'],
},
MobileNumber: {
title: 'Mobile Number',
type: 'number',
minLength: 6,
maxLength: 16,
},
EmailID: {
title: 'Email ID',
type: 'string',
minLength: 5,
maxLength: 50,
},
},
},
formData: {
Products: [],
},
uiSchema: {
'ui:order': [
'FirstName',
'LastName',
'LoginID',
'MobileCode',
'MobileNumber',
'EmailID',
'*',
],
FirstName: {
'ui:widget': 'CustomTextWidget',
classNames: 'customwidth_23',
'ui:options': {
type: 'text',
placeholder: 'First Name',
},
},
LastName: {
'ui:widget': 'CustomTextWidget',
classNames: 'customwidth_23',
'ui:options': {
type: 'text',
placeholder: 'Last Name',
},
},
LoginID: {
'ui:widget': 'CustomTextWidget',
'ui:options': {
type: 'text',
placeholder: 'e.g. test#test',
},
},
MobileNumber: {
'ui:widget': 'CustomTextWidget',
classNames: 'customwidth_33',
'ui:options': {
type: 'number',
placeholder: 'Mobile number',
},
},
MobileCode: {
'ui:widget': 'CustomDropdownWidget',
classNames: 'customwidth_13',
'ui:options': {
type: 'number',
placeholder: 'Mobile number',
},
},
I need to focus on each field on keypress of tab. It is skipping the drop-down field.
I tried tab-index which is not displaying the option list.
Thank you in advanced.
Can I add a new unique property to gridcolumn in Ext JS? I want to use that property in some other place
{
xtype: 'gridcolumn',
dataIndex: 'startupPercent',
sortable: true,
'property': 'value', // so that i can access it later
text: 'StartUp%'
}
Can I add a new unique property to gridcolumn
Yes you can and you use that property other place.
In this FIDDLE, I have created a demo provide a custom config and get on header click. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.grid.Panel', {
title: 'Demo',
store: {
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name',
isName: true
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody(),
listeners: {
headerclick: function (ct, column, e, t, eOpts) {
if (column.isName) {
console.log(column.isName);
}
}
}
});
}
});
The code I have tried is
form: {
header: 'Edit Record',
name: 'form',
fields: [
{ name: 'recid', type: 'text', html: { caption: 'ID', attr: 'size="10" readonly' } },
{ name: 'fname', type: 'text', required: true, html: { caption: 'First Name', attr: 'size="40" maxlength="40"' } },
{ name: 'lname', type: 'text', required: true, html: { caption: 'Last Name', attr: 'size="40" maxlength="40"' } },
{ name: 'email', type: 'email', html: { caption: 'Email', attr: 'size="30"' } },
{ name: 'sdate', type: 'date', html: { caption: 'Date', attr: 'size="10"' } }
],
actions: {
Reset: function () {
this.clear();
},
Save: function () {
var errors = this.validate();
if (errors.length > 0) return;
if (this.recid == 0) {
w2ui.grid.add($.extend(true, { recid: w2ui.grid.records.length + 1 }, this.record));
w2ui.grid.selectNone();
this.clear();
} else {
w2ui.grid.set(this.recid, this.record);
w2ui.grid.selectNone();
this.clear();
}
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: grid-13</title>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
</head>
<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
$('#grid').w2grid({
name: 'grid',
searches: [
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'text' },
],
show: { footer: true },
sortData: [ { field: 'recid', direction: 'asc' } ],
columnGroups: [
{ caption: '', sortable: false, resizable: true },
{ caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
{ caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
{ caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
{ caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
{ caption: '<input type="text" style="width:100%;"/>', sortable: false, resizable: true },
{ caption: '<input type="checkbox"/>', sortable: false, resizable: true }
],
columns: [
{ field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center', resizable: true },
{ field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
{ field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
{ field: 'email', caption: 'Email', size: '40%', sortable: true, resizable: true },
{ field: 'sdate', caption: 'Start', size: '90px', sortable: true, resizable: true },
{ field: 'edate', caption: 'End', size: '90px', sortable: true, resizable: true },
{ field: 'udate', caption: 'Update', size: '90px', sortable: true, resizable: true },
],
records: [
{ recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '12/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '11/3/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'peter#gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'frank#gmail.com', sdate: '9/3/2012', edate: '10/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe#gmail.com', sdate: '6/3/2012', edate: '4/24/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe#gmail.com', sdate: '2/3/2012', edate: '6/3/2012' },
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'susan#gmail.com', sdate: '4/3/2012', edate: '6/23/2012' },
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'david#gmail.com', sdate: '9/3/2012', edate: '4/16/2012' },
{ recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'magi#gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
{ recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
{ recid: 21, fname: 'Frank', lname: 'Motzart', email: 'peterson#gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
{ recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '8/3/2012' },
{ recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'magi#gmail.com', sdate: '6/3/2012', edate: '4/19/2012' },
{ recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '8/5/2012' },
{ recid: 25, fname: 'Ben', lname: 'Gatos', email: 'peter#gmail.com', sdate: '9/3/2012', edate: '4/3/2012' },
{ recid: 26, fname: 'Doer', lname: 'Welldo', email: 'magi#gmail.com', sdate: '4/3/2012', edate: '4/7/2012' },
{ recid: 27, fname: 'Shashi', lname: 'Bahh', email: 'jdoe#gmail.com', sdate: '4/3/2012', edate: '4/3/2012' },
{ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'joe#gmail.com', sdate: '9/3/2012', edate: '12/6/2012' }
]
});
});
</script>
</body>