javascript - 绑定 kendogrid，具有大型数据源（json 数组），需要任何动态

Question

我想绑定一个带有大型数据源（json 数组）的 kendogrid，其中也包括在 3-4 个选项卡中显示详细模板。但它不显示网格。（对于 1500 行）是否有任何动态的内容可以逐页显示？解决方案不需要搜索条件。

请指教。

谢谢 Yogesh

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)#' }
                    ]
        });
    }