具有隱藏列和聚合的Kendo UI網格

如果我創建一個隱藏列，在這種情況下爲BirthDateMonth並從數據集創建它，如果我還在另一個字段上添加組聚合，那麼它將打破JS錯誤「sum not定義爲「。具有隱藏列和聚合的Kendo UI網格

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
     data: createRandomData(10), 
     schema: { 
      model: { 
       fields: { 
        FirstName: { type: "string" }, 
        LastName: { type: "string" }, 
        City: { type: "string" }, 
        Title: { type: "string" }, 
        BirthDate: { type: "date" }, 
        //BirthDateMonth: { type: "date" }, 
        Age: { type: "number" } 
       }, 
      }, 
      parse: function (data) { 
       $.each(data, function (idx, item) { 
        if (item.BirthDate) 
        { 
         item.BirthDateMonth = new Date(item.BirthDate.getTime()); 
         item.BirthDateMonth.setDate(1); 
        }       
       }); 
       return data; 
      }     
     }, 
     pageSize: 10, 
     aggregate: [   
       {field: "Age", aggregate: "sum"} 
     ] 
    }, 
    height: 500, 
    scrollable: true, 
    groupable: true, 
    columns: [ 
     { 
      field: "FirstName", 
      title: "First Name" 
     }, 
     { 
      field: "LastName", 
      title: "Last Name" 
     }, 
     { 
      field: "City", 
     }, 
     { 
      field: "Title" 
     }, 
     { 
      field: "BirthDate", 
      title: "Birth Date", 
      template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' 
     }, 
     { 
      field: "BirthDateMonth", 
      title: "Birth Month", 
      template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #', 
      hidden: true 
     }, 
     { 
      field: "Age", 
      aggregates: ["sum"], 
      footerTemplate: "Sum: #=sum#", 
      groupFooterTemplate: "Sum: #=sum#"    

     } 
    ] 
}).data("kendoGrid"); 

grid.dataSource.group([{field: "BirthDateMonth"}]);

JSFiddle，任何想法讚賞。我試圖向模式添加隱藏列字段，但沒有效果。

來源

2015-12-09 Stuart

請嘗試使用下面的代碼片段。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> 
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="grid"></div> 
    <script> 
     var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"], 
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"], 
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"], 
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer", 
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"], 
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")]; 

     function createRandomData(count) { 
      var data = [], 
       now = new Date(); 
      for (var i = 0; i < count; i++) { 
       var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], 
        lastName = lastNames[Math.floor(Math.random() * lastNames.length)], 
        city = cities[Math.floor(Math.random() * cities.length)], 
        title = titles[Math.floor(Math.random() * titles.length)], 
        birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], 
        age = now.getFullYear() - birthDate.getFullYear(); 

       data.push({ 
        Id: i + 1, 
        FirstName: firstName, 
        LastName: lastName, 
        City: city, 
        Title: title, 
        BirthDate: birthDate, 
        Age: age 
       }); 
      } 
      return data; 
     } 

     $(document).ready(function() { 
      var grid = $("#grid").kendoGrid({ 
       dataSource: { 
        data: createRandomData(10), 
        schema: { 
         model: { 
          fields: { 
           FirstName: { type: "string" }, 
           LastName: { type: "string" }, 
           City: { type: "string" }, 
           Title: { type: "string" }, 
           BirthDate: { type: "date" }, 
           //BirthDateMonth: { type: "date" }, 
           Age: { type: "number" } 
          }, 
         }, 
         parse: function (data) { 
          $.each(data, function (idx, item) { 
           if (item.BirthDate) { 
            item.BirthDateMonth = new Date(item.BirthDate.getTime()); 
            item.BirthDateMonth.setDate(1); 
           } 
          }); 
          return data; 
         } 
        }, 
        pageSize: 10, 
        aggregate: [ 
          { field: "Age", aggregate: "sum" }, 
          { field: "BirthDateMonth", aggregate: "sum" } 
        ] 
       }, 
       height: 500, 
       scrollable: true, 
       groupable: true, 
       columns: [ 
        { 
         field: "FirstName", 
         title: "First Name" 
        }, 
        { 
         field: "LastName", 
         title: "Last Name" 
        }, 
        { 
         field: "City", 
        }, 
        { 
         field: "Title" 
        }, 
        { 
         field: "BirthDate", 
         title: "Birth Date", 
         template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' 
        }, 
        { 
         field: "BirthDateMonth", 
         title: "Birth Month", 
         template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #', 
         hidden: true 
        }, 
        { 
         field: "Age", 
         aggregates: ["sum"], 
         footerTemplate: "Sum: #=sum#", 
         groupFooterTemplate: "Sum: #=sum#" 

        } 
       ] 
      }).data("kendoGrid"); 
      grid.dataSource.group({ 
       field: "BirthDateMonth", 
       aggregates: [ 
        { field: "Age", aggregate: "sum" }] 
      }) 
     }); 
    </script> 
</body> 
</html>

讓我知道是否有任何問題。

來源

2015-12-10 06:57:40

是的，謝謝。 – Stuart

Jayesh的解決方案是正確的，謝謝。

你認爲這裏有什麼值得報告的，或者是這種預期的行爲？其他

一點我發現，如果我補充一下：

groupHeaderTemplate: "Birth Month: #= value # (Count: #= count#)"

到列：

{ 
    field: "BirthDateMonth", 
    title: "Birth Month", 
    template: '#= kendo.toString(BirthDateMonth,"MM/yyyy") #', 
    hidden: true 
},

拿到小組數，則該組功能需要包括總的計數相同的字段：

grid.dataSource.group({ 
      field: "BirthDateMonth", 
      aggregates: [ 
       { field: "Age", aggregate: "sum" }, 
       { field: "BirthDateMonth", aggregate: "count" } 
      ] 
     })

來源

2015-12-10 09:58:35 Stuart

具有隱藏列和聚合的Kendo UI網格

回答

相關問題