i want bind kendogrid, large datasource (json array), includes display of detail temeplates in 3-4 tabs. doesn't display grid. (for 1500 rows) there dynamic display page page? no search criteria required 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 mapped 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: '<a href="attachments/#=attachmentname#">#= attachmenttitle #</a>' }, // { 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)#' } ] }); } 
Comments
Post a Comment