I want to add filter in dojox.grid.EnhancedGrid and my grid is created declaratively. I added filter in data-dojo-props attribute.
My code :
<div id="myGrid"
data-dojo-type="dojox.grid.EnhancedGrid"
data-dojo-props="plugins:{indirectSelection: true,nestedSorting: true,
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "songs"
} },
store: mystore,
structure: [{
defaultCell: { width: 8, editable: false, type: dojox.grid.cells._Widget, styles: 'text-align: left;' },
rows: [
{ field: 'RN', name: '${RN}', width: '32%',formatter : function(val, rowIdx, cell){
cell.customClasses.push('anchorLookAlike');
return val;
}
},
{ field: 'DC', name: '${DC}', width: '10%' },
{ field: 'PN', name: '${PN}', width: '10%' },
{ field: 'MD', name: '${MD}', width: '10%' },
{ field: 'RD', name: '${RD}', width: '10%' },
{ field: 'UR', name: '${UR}', width: '10%' },
{ field: 'DL', name: '${DL}', width: '10%',formatter: function(datum){
if(datum){
return dojo.date.locale.format(new Date(datum), {selector: 'date', formatLength: 'long'});
}
return '...';
}
},
{field: 'RP', name: '', hidden: true}
]
}]"></div>
When I try to run this code am facing this error,
dojo/parser::parse() error
Error: SyntaxError: syntax error in data-dojo-props='plugins:{indirectSelection: true,nestedSorting: true, filter: { closeFilterbarButton: true, ruleCount: 5, itemsName:
how to add filter correctly? can any help me
You need to wrap songs in single quotes, not double quotes. You are already nested within double quotes as part of data-dojo-props.
Related
Help Me please !! What happened to this error? I changed the class name of the table, but I cannot change it and this error occurs?
new gridjs.Grid({
columns: [{ name: 'ID', width: '60px' },
{ name: 'Name', width: '200px' },
{ name: 'Position', width: '300px' },
{ name: 'Email', width: '200px' },
{ name: 'Tel', width: '100px' },
{ name: '', width: '40px', sort: false }],
sort: true,
search: true,
pagination: {
limit: 5,
},
className: {
table: 'table',
thead: 'thead-dark'
},
language: {
'search': {
'placeholder': ' Search...'
},
},
server: {
url: 'http://localhost:55289/ManageUser/GetUserList',
then: data => data.map(user => [user.id,
user.first_name + '\xa0\xa0\xa0' + user.last_name,
user.position, user.email,
user.tel_mobile,
gridjs.html(`<a id="button-delete" href="/ManageUser/Delete/${user.id}"><button class="btn btn-danger"><i class="fa fa-close"></i></button></a>`)])
}
}).render(document.getElementById("user-table"));
As Tammy mentioned, you need to define a custom id for your column:
const grid = new Grid({
columns: [{
id: 'name',
name: 'Name'
}, {
id: 'email',
name: 'Email'
}, {
id: 'phoneNumber',
name: 'Phone Number'
}],
data: [
{ name: 'John', email: 'john#example.com', phoneNumber: '(353) 01 222 3333' },
{ name: 'Mark', email: 'mark#gmail.com', phoneNumber: '(01) 22 888 4444' },
]
});
Demo: https://gridjs.io/docs/examples/import-json
I had the same issue:
Could not find a valid ID for one of the columns.
Make sure a valid "id" is set for all columns
And the fix was what Tammy mentions, I had an empty named column.
I have a react table with group fields and resize-able columns.The columns are like below:
export const columns = [
{ title: 'Year Week',
dataIndex: 'year_week',
editable: false,
width: 60,
},
{
title: 'Actual Bank Amount',
dataIndex: 'actual_bank_amount',
width: 60,
editable: true
},
{
title: 'External Incomings',
key: 'external_incomings',
dataIndex: 'external_incomings',
className: "ext-in",
editable: true,
children: [
{ title: 'Rental Income/Leasing Income', width: 60, dataIndex: "ext_in_rental_income", key: "ext_in_rental_income", editable: true },
{ title: "Tax Refund", width: 60, dataIndex: "ext_in_tax_refund", key: "ext_in_tax_refund", editable: true },
{ title: "Dividends Income", width: 60, dataIndex: "ext_in_dividends_income", key: "ext_in_dividends_income", editable: true },
{ title: "Licence Income", width: 60, dataIndex: "ext_in_licence_income", key: "ext_in_licence_income", editable: true },
{ title: "Other Income", width: 60, dataIndex: "ext_in_other_income", key: "ext_in_other_income", editable: true },
]
}]
I am resizing the width in my reducer as below, but I am sure, we can do it in a far better way. Can someone please suggest a better way to do this. Below is my reducer code.
I simple words I want to set the width property dynamically in a function, where I have access to the dynamic "width" and the "dataIndex".
case 'SET_COLUMN_WIDTH':
const newColmuns = state.columns
Object.keys(newColmuns).map((key) => {
if (newColmuns[key].children) {
let Datakey = newColmuns[key].children.findIndex(item => item.dataIndex === action.payload.dataIndex)
if (Datakey > 0) {
newColmuns[key].children[Datakey].width = action.payload.size.width;
return
}
}
})
return {
...state,
columns: newColmuns
}
for(var col of columns)
{
if(col.children)
{
for(var child of col.children)
{
child.width = 123;
}
}
}
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
i am not sure how can i pass dynamic columns along with the default paramters e.g. rp, sortname, sortorder in jquery flexigrid. i have read articles but that only suggest to pass the dynamic column on onSubmit event. i am confused how can i embed this onsubmit event and pass the additional fields to server side. see my page code. i am using asp.net mvc4 so i am using c# controller to handle server side.
$('#CustomerList').flexigrid({
url: '#Url.Action("CustomerList", "Customer")',
dataType: 'json',
colModel: [
{
display: 'Number',
name: 'Id',
width: 40,
sortable: true,
align: 'left'
},
{
display: 'First Name',
name: 'FirstName',
width: 80,
sortable: true,
align: 'left'
},
{
display: 'Last Name',
name: 'LastName',
width: 80,
sortable: true,
align: 'left'
},
],
buttons: [
{
name: 'Edit',
bclass: 'edit',
onpress: test
}, {
name: 'Delete',
bclass: 'delete',
onpress: test
}, {
separator: true
}],
searchitems: [
{
display: 'First Name',
name: 'FirstName'
},
{
display: 'Last Name',
name: 'LastName'
},
{
display: 'Email',
name: 'Email'
},
{
display: 'Age',
name: 'Age'
},
{
display: 'Sex',
name: 'Sex'
},
{
display: 'Membership Type',
name: 'MembershipType'
}
],
sortname: "LastName",
sortorder: "asc",
usepager: true,
title: 'Customer',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 930,
height: 500,
singleSelect: true
});
Following aritcles suggest to create another form and pass the parameters in Onsubmit event. i am stuck how to pass it
<form id="fmFilter">
<select id="cmbfilter">
<option>All</option>
<option>Family</option>
</select>
</form>
<script>
$('#grid01').flexigrid($.extend({}, myFlex, {
onSubmit : function(){
$('#grid01').flexOptions({
params: [{name:'callId', value:'grid01'}].concat($('#fmFilter').serializeArray())
});
return true;
}
})); // ')' was missing
</script>
Controller
public ActionResult CustomerList(int page, int rp, string sortname, string sortorder, string qtype, string query){}
Essence:
how to call the CustomerList controller method on the onchange event of "cmbfilter" and send its value along with default flexigrid default parameters e.g. rp, sortorder, sortname?
I have a problem with Kendo UI using Typescript in my project. I have a grid which filtering mode doesn't work on some column types, like integer. I tried to add the type in the columns directly, but it's not working at all.
And it's not filtering on links either.
[EDIT] Here's my function code that create the grid :
private _createInfoGridOptions(): kendo.ui.GridOptions {
return {
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 15,
},
resizable: true,
selectable: 'row',
filterable: true,
columnMenu: true,
sortable: true,
scrollable: {
virtual: true
},
groupable: true,
height: 450,
columns: [
{ field: 'subTaskId', type: "number", title: 'Subtask Id', width: '80px' },
{ field: 'reportDate', type:"date", title: 'Report Date', width: '100px', template: '#= moment.utc(reportDate).local().format("yyyy/mm/dd") #' },
{ field: 'prog', type: "string", title: 'prog', width: '60px', template: "#=prog#" },
{ field: 'state', type:"string", title: 'status', width: '130px' },
{ field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }
]
};
}
I have this error on Chrome:
Uncaught TypeError: (d.prog || "").toLowerCase is not a function
and this one on Firefox:
TypeError: "".toLowerCase is not a function.
I did a plunker to test my code translated in javascript, but the type property works.
$("#grid").kendoGrid({
dataSource:
{
data : [
{id: 36308,reportDate:"2015-02-01",prog: 58,state: "Waiting",maxTemps: 0},
{id: 36309,reportDate:"2015-02-01",prog: 34,state: "Complete",maxTemps: 86400},
{id: 36310,reportDate:"2015-02-01",prog: 116,state: "Complete",maxTemps: 86400},
{id: 36311,reportDate:"2015-02-02",prog: 58,state: "Complete",maxTemps: 86400}
],
serverPaging: true,
serverSorting: true,
pageSize: 15
},
filterable: true,
columnMenu: true,
columns: [
{ field: 'id', type:'number', title: 'Id', width: '80px' },
{ field: 'reportDate', title: 'Report Date', width: '100px' },
{ field: 'prog', type:'number', title: 'Prog', width: '60px' },
{ field: 'state', title: 'Status', width: '130px' },
{ field: 'maxTemps', type:'number', title: 'Max Temps', width: '100px' }
]
});
So it's working in Javascript but not in Typescript, I'm using AngularJS with Kendo UI.
Any ideas why it's not woking ?
Thanks !
Ginwu
So it's working in Javascript but not in Typescript
The typescript you have shared is not the same as the JavaScript that you have shared. Specifially dataSource is vastly different. I would make the TS similar to the JS and that should fix the error.
Try this solution Plunker,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function() {
var data = [{
id: 36308,
reportDate: new Date("2015/02/01"),
prog: 58,
state: "Waiting",
maxTemps: 0
}, {
id: 36309,
reportDate: new Date("2015/02/01"),
prog: 34,
state: "Complete",
maxTemps: 86400
}, {
id: 36310,
reportDate: new Date("2015/02/01"),
prog: 116,
state: "Complete",
maxTemps: 86400
}, {
id: 36311,
reportDate: new Date("2015/02/02"),
prog: 58,
state: "Complete",
maxTemps: 86400
}];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
prog: {
type: "number"
},
reportDate: {
type: "date"
}
}
}
}
},
scrollable: true,
columnMenu: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [{
field: 'id',
type: 'number',
title: 'Id',
width: '80px'
}, {
field: 'reportDate',
title: 'Report Date',
width: '100px',
format: "{0:yyyy/MM/dd}",
filterable: {
ui: "datepicker"
}
}, {
field: 'prog',
title: 'Prog',
width: '60px',
template: '#= prog #'
}, {
field: 'state',
title: 'Status',
width: '130px'
}, {
field: 'maxTemps',
type: 'number',
title: 'Max Temps',
width: '100px'
}]
});
});
</script>
</body>
</html>