i want to Bind a kendogrid, with large datasource (json array), that includes the display of detail temeplates too in 3-4 tabs. But it doesn't display the grid. (for 1500 rows) Could there be anything dynamic to display page by page? No search criteria required for solution.
Please advise.
Thanks Yogesh
function bindgridsimple()
{
var element = $("#grid").kendoGrid({
dataSource: {
transport: {
read: url
},
pageSize: 25
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: true,
sortable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function () {
},
columns: [
{
field: "FirstName",
width: "8%",
title: "Candidate Name",
template: "<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'> <span>#=FirstName#</span> <span>#=LastName#</span></a>"
},
{
field: "Mobile",
width: "8%",
title: "Mobile"
},
{
field: "ResumeTitle",
width: "10%",
title: "Resume Title"
},
{
field: "CreatedByUser",
width: "10%",
title: "Created by"
},
{
field: "ExpectedSalary",
width: "15%",
title: "Expected Salary",
template: "<span># if(ExpectedSalary == null) { # 0.00 # } else { #<span>#=ExpectedSalary#</span># }#</span> / <span>#=ExpectedSalaryperiod#</span>"
}, {
field: "MarketingRate",
width: "10%",
title: "Mktg Rate",
template: "<span># if(MarketingRate == null) { # 0.00 # } else { #<span>#=MarketingRate#</span># }#</span> / <span>#=MarketingRateperiod#</span>"
},
{
field: "CreatedDate",
width: "15%",
title: "Resume Received Date",
template: '#if(Resume == null || Resume == "") { } else { # <span> #=parseFullDate(CreatedDate)# </span> # } #'
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "Req. Provided"
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "View",
template: "# if(ExistMappedCandidate==true){ #<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'>View Requirement</a> #} else {# <a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#' class='No-candidates' onclick='return false' title='No requirements are mapped with this candidate.'>View Requirement</a> #}#"
}
],
pageable: {
pageSizes: [25, 50, 75]
}
});
}
function detailInit(e) {
var sharableDataSource = new kendo.data.DataSource({ data: e.data.Experience });
var sharableDataSourceAttachment = new kendo.data.DataSource({ data: e.data.Attachments });
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".prevExperience").kendoGrid({
dataSource: { data: e.data.Experience,
pageSize: 10
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: false,
sortable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "Company", title: "Company Name", width: "100px" },
{ field: "Designation", title: "Designation", width: "100px" },
{ field: "FromDate", title: "From", width: "100px", template: '#=parsemyDate(FromDate)#' },
{ field: "ToDate", title: "To", width: "100px", template: '#=parsemyDate(ToDate)#' },
{ field: "LastSalary", title: "Last CTC", width: "65px", template: '#=LastSalary# / Yr' }
]
});
detailRow.find(".attachments").kendoGrid({
//dataSource: sharableDataSourceAttachment,
dataSource: { data: e.data.Attachments,
pageSize: 10
},
columnMenu:true,
scrollable: false,
sortable: true,
filterable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "AttachmentName", sortable: true, filterable: true, title: "File Icon", width: "100px", template: '#= AttachmentTitle #'
},
// { field: "AttachmentTitle", title: "Type", width: "100px" },
// { field: "AttachmentName", title: "Subject", width: "100px", template: 'Resume' },
{field: "CreatedbyUser", sortable: true, filterable: true, title: "Attached By", width: "100px" },
{ field: "Createddate", title: "Date", sortable: true, filterable: true, width: "65px", template: '#=parseFullDate(Createddate)#' }
]
});
}
Related
I have an EJ2 grid that is grouped. Before the grid is rendered, the data from the business class is sorted by sequence number which is the requirement. When the grid renders the data, the grouping is changing the initial sort order to alphabetical. I have not been able to change the order back to by Sequence number. Any help would be greatly appreciated. Below is the grid definition.
var grid = new ej.grids.Grid({
dataSource: gridDS,
allowExcelExport: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport', "Search"],
allowGrouping: true,
dataBound: bound,
allowSorting: true,
allowMultiSorting: true,
groupSettings: { captionTemplate: '#captiontemplate', showDropArea: false, columns: ['DistrictTypeName', 'DistrictName'] },
sortSettings: {
columns:
[{ field: 'DistrictTypeSequence', direction: 'Ascending' },
{ field: 'DistrictSequence', direction: 'Ascending' },
{ field: 'RaceSequence', direction: 'Ascending' }]
},
columns: [
{ field: "DistrictTypeId", visible: false },
{ field: "DistrictId", visible: false},
{ field: "RaceId", visible: false },
{ field: "DistrictTypeName", headerText: "District Type", width: 90},
{ field: "DistrictName", headerText: "District", width: 90},
{ field: "RaceName", headerText: "", width: 90 },
{ field: "DistrictTypeSequence", visible: false },
{ field: "DistrictSequence", visible: false },
{ field: "RaceSequence", visible: false },
{
headerText: "",
template: "#viewTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});
How to build its shape "Create" editing_popup? To add the field Upload File.
qwe.floorPlanGrid = $("#divCreateFloorPlanWindowGrid").kendoGrid({
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "NAMEKZ", title: "Қазақша аталуы" },
{ field: "NAMERU", title: "Наименование на русском", format: "{0:c}", width: "120px" },
{ field: "STOREDFILENAME_INFO", title: "Имя схемы", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
}).getKendoGrid();
I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this:
Example :
" Wrong list:
asdasdasd
asdasdasdas"
Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"
What i must to do with my js?
This is the grid i have:
This is the code :
var chat_grid = Ext.create('Ext.grid.Panel', {
id: 'chatGrid',
store: SuratPesananChatDetailStore,
height: 350,
title: 'Comment Grid',
viewConfig: {
emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
getRowClass: function (record, rowIndex, rp, store) {
return 'rowgridspdetailnonstd-height';
}
},
plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
frame: true,
loadMask: true,
stripeRows: true,
autoScroll: true,
selModel: GridChatSelectionModel,
cls: 'rowgridspdetailnonstd-height',
tbar:
[
{
id: "IdAddCommentLookUp",
text: "Add Comment",
iconCls: "icon-grid-add",
listeners:
{
'click': function () {
AddCommentListener();
}
}
},
{
id: "IdDeleteChat",
text: "Delete Comment",
iconCls: "icon-cancel",
disabled: true,
listeners:
{
'click': function () {
DeleteChatListener();
}
}
},
{
id: "IdInviteUser",
text: "Invite User",
iconCls: "icon-grid-add",
hidden: true,
listeners:
{
'click': function () {
InviteUserLookUp();
}
}
}
],
columns:
[
{
header: 'Date',
dataIndex: 'CreatedOn',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Comment',
dataIndex: 'Comment',
editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
hidden: false,
width: 370,
sortable: false,
sortableColumn: false
},
{
header: 'Created By',
dataIndex: 'CreatedBy',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Department',
dataIndex: 'Department',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Document Name',
dataIndex: 'FileName',
width: 150,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Upload Document',
dataIndex: 'Panel',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false,
renderer: function (v, m, r, row) {
if (r.data.Panel == 'Download') {
var fileName = r.data.FilePath;
return "" + v + "";
}
else if (r.data.Panel == 'Upload') {
return "" + v + "";
}
else {
return v;
}
}
}
]
});
I have try all the way in google but i can't solve this case.
Enable keyevents of your comment editor, and stopEvent() in Enter key
Sample config:
editor: {
xtype: 'textareafield',
allowblank: false,
maxLength: 165,
enforceMaxLength: true,
height: 100,
grow: true,
completeOnEnter: false,
enableKeyEvents: true, //Listen to keyevents
listeners: {
keydown: function(field, e) {
if (e.getKey() == e.ENTER) {
e.stopEvent(); // Stop event propagation
}
}
}
}
Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter
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>
I am struggling to get the functionality of CRUD using the Kendo UI? My create and Update options dont seem to work but my read does, any help? I have been through plenty of tutorials but simply just cant get this to work.Thanks in advance.
Here is my code, this is my Index.php file:
<!DOCTYPE html>
<html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
batch: true,
transport: {
read: "data/ussd.php"
},
update: {
url: "data/ussd.php",
type: "POST"
},
create: {
url: "data/create.php",
type: "PUT"
},
parameterMap: function(options, operation){
if(operation !== "read" && option.models){
return{models : kendo.string(options.models)}
}
},
pageSize: 20,
schema: {
data: "data",
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
msisdn: {editable: true, type: "number"},
company: {editable: true},
description: {editable: true},
ussd: {editable: true},
updated: {editable: true, type: "date"},
added: {editable: true, type: "date"}
}
}
},
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
sortable: true,
height: 500,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: "45px" },
{ field: "msisdn", title: "MSISDN", width: "75px" },
{ field: "company", title: "Company", width: "100px" },
{ field: "description", title:"Description", width: "100px" },
{ field: "ussd", title: "USSD", width: "100px" },
{ field: "updated", title: "Updated", width: "100px" },
{ field: "added", title: "Added", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "140px" }],
schema: {
model: { id: "id" }
},
editable: "inline",
navigable: true
});
});
</script>
</div>
</body>
</html>
This is what i changed, basically URL and type was incorrect and not following the correct path
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: "data/whitelist.php?type=read",
update: {url:"data/whitelist.php?type=update", type:"POST"},
create: {url:"data/whitelist.php?=create",type:"POST"},
destroy: {url:"data/whitelist.php?type=destroy",type:"POST"}
},
batch: false,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
msisdn: {editable: true, type: "number"},
company: {editable: true},
description: {editable: true},
ussd: {editable: true},
updated: {editable: true, type: "date"},
added: {editable: true, type: "date"}
}
}
},
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
sortable: true,
height: 430,
toolbar: [{name: "create", text: "Add New"}, "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: "26px" },
{ field: "msisdn", title: "MSISDN", width: "50px" },
{ field: "company", title: "Company", width: "65px" },
{ field: "description", title:"Description", width: "65px" },
{ field: "ussd", title: "USSD", width: "50px" },
{ field: "updated", title: "Updated", width: "70px" },
{ field: "added", title: "Added", width: "70px" },
{ command: [{text:"Edit", name:"edit"}, {text:"Delete",name:"destroy"}], title: " ", width: "80px" }],
editable: "inline",
navigable: true
});
});
{ read: "data/ussd.php"
},
update: {
url: "data/ussd.php",
type: "POST"
},
create: {
url: "data/create.php",
type: "PUT"
}
Your Read and update both are using same php file.
and what is type PUT in create?
Just change the update url to other php file and get the posted values to run the query in the database.
and change the type of create also to POST as u are using POST for others too..
Under the Update section change this
url: "data/ussd.php",
in to
url: "data/update.php",
and try to get the posted values as i said before. see if works for you.