綁定kendogrid，使用大型數據源（json數組），任何動態需要

Question

我想綁定一個kendogrid，包含大型數據源（json數組），其中包含3-4個選項卡中的詳細temeplates顯示。但它不顯示網格。 （對於1500行）可以有任何動態顯示一頁接一頁嗎？解決方案不需要搜索條件。

請指教。

感謝約傑什

Answer 1

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>&nbsp;<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>&nbsp;/&nbsp;<span>#=ExpectedSalaryperiod#</span>" 
    },     { 
    field: "MarketingRate", 
    width: "10%", 
    title: "Mktg Rate", 
    template: "<span># if(MarketingRate == null) { # 0.00 # } else { #<span>#=MarketingRate#</span># }#</span>&nbsp;/&nbsp;<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: '<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)#' } 
        ] 
     }); 
    }