Kendo UI模板刷新

Question

我用Kendo UI設置了一個分層網格，我需要一種按名稱排序的方法。

我有設置字母表的按鈕來過濾名稱，其中第一個字母等於您單擊的按鈕的字母，但不會正確過濾它。

它加載正常，所有數據可用。當我點擊一個字母時，第一行展開的內容沒有任何變化，並且過濾器開始處理在第一行之後展開的行，即使該變量已設置。請參閱底部的圖片以獲取有關該問題的說明。

模板

<script type="text/x-kendo-template" id="client-report-detail-template"> 
    # var active, inactive; $.each(data.clients, function(key, client) { # 

     #if(client.status == 20) { active = 1; } else { active = 0; } # 
     #if(client.status != 20) { inactive = 1; } else { inactive = 0 } # 

     #if(sortBy.length > 0 && sortBy == client.administration_name[0]) { # 
      <div class="client-report-detail-container"> 
       <div class="client-report-detail-pane">#= client.administration_name #</p></div> 
       <div class="client-report-detail-pane">#= client.is_new #</p></div> 
       <div class="client-report-detail-pane">#= active #</p></div> 
       <div class="client-report-detail-pane">#= inactive #</p></div> 
      </div> 
     # } # 

     #if(sortBy.length == 0) { # 
      <div class="client-report-detail-container"> 
       <div class="client-report-detail-pane">#= client.administration_name #</p></div> 
       <div class="client-report-detail-pane">#= client.is_new #</p></div> 
       <div class="client-report-detail-pane">#= active #</p></div> 
       <div class="client-report-detail-pane">#= inactive #</p></div> 
      </div> 
     # } # 
    # }); # 
</script> 

按鈕（使用Laravel之刃）

@foreach(range('A', 'Z') as $letter) 
    <button data-type="name" data-value="{{ $letter }}" class="k-button bizme-button-round filter-text fcl">{{ $letter }}</button> 
@endforeach 

我走到這一步，當你點擊一個按鈕出現這種情況

$(".fcl").on('click tap', function() { 
    sortByLetter = $(this).data().value; 

    $("#client-report-grid-container").data("kendoGrid").refresh(); 
}); 

的網格設置和細節初始化

$("#client-report-grid-container").kendoGrid({ 
    dataSource: { 
     data: gridData, 
     pageSize: 15 
    }, 
    detailTemplate: kendo.template($("#client-report-detail-template").html()), 
    detailInit: detailInit, 
    columns: [ 
     { 
      field: "date", 
      title: "{{ trans('form.month') }}" 
     }, 
     { 
      field: "new" 
     }, 
     { 
      field: "active" 
     }, 
     { 
      field: "inactive" 
     } 
    ] 
}); 

function detailInit(){ 
    $.each(this.dataSource.data(), function(key, data) { 
     data.sortBy = sortByLetter; 
    }); 
}; 

任何人都知道如何解決這個問題？

Answer 1

會發生什麼事是，detailInit前detailTemplate運行時，詳細的事件之前呈現。因此在模板中sortBy尚未設置。然後事件運行並設置它。這就是爲什麼它在第二次運作。要檢查，請在detailInit事件內的第一行中添加一個console.log("detailInit")，並在模板內添加一個# console.log("template"); #，然後檢查控制檯。

我的建議，以解決這個問題是要設置排序值網格的dataBound事件中，而不是detailInit事件：

dataBound: function() 
{ 
    $.each(this.dataSource.data(), function(key, data) { 
     data.sortBy = sortByLetter; 
    }); 
} 

就這樣。 dataBound被稱爲任何時候網格的refresh()方法運行，因此sortBy值在呈現細節之前設置，因此該模板可以讀取正確的sortBy值。

Working demo。