Telerik Kendo MVC Grid - 如何設置onload /初始過濾器等於True複選框列？

我已經被控將我公司當前的webforms網站頁面更改爲MVC。我們使用Telerik工具包，我正在尋找一種方法來在我的網格上設置初始過濾器，以便在加載頁面時，網格默認僅顯示已檢查的記錄（true）。我發現了幾個與此類似的問題，但到目前爲止，我在這些實例中找到的答案都沒有涉及複選框。Telerik Kendo MVC Grid - 如何設置onload /初始過濾器等於True複選框列？

下面的代碼是我的「活動？」 = MVC網格中的True/False列。我正在檢查每個記錄的刪除日期，如果存在刪除日期，則將其視爲「停用」。我的用戶啓動的過濾在網格上效果很好，但我無法弄清楚如何將此列上的初始過濾器值設置爲TRUE，同時還允許用戶清除過濾器，然後查看停用的記錄以及活動記錄。

我很感激您可以提供的任何幫助。如果我正在實現這個完全錯誤的，請隨時讓我知道，但也請包括一個正確的方式來完成此功能的例子。

columns.Bound("DeleteDateUTC") 
    .ClientTemplate("<input type='checkbox' #= kendo.parseDate(DeleteDateUTC) ? '' : checked='checked' # disabled='disabled' />") 
    .Title("Active?") 
    .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to"))) 
    .Width(100);

謝謝！

EDIT 1：

<div id="gridArea" class="k-virtual-scrollable-wrap"> 
@(Html.Kendo().Grid<dynamic>() 
    .Name("OperatorsGrid") 
    .Mobile(MobileMode.Auto) 
    .Pageable(pager => pager.PageSizes(new int[] { 50, 100, 250 }) 
            .Refresh(true)) 
    .Sortable() 
    .Resizable(resize => resize.Columns(true)) 
    .HtmlAttributes(new { style = "height: 800px;" }) 
    .Scrollable() 
    .ColumnMenu() 
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) 
    .Events(e => e.DataBound("onDataBound").Cancel("onCancel")) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Model(model => 
     { 
      model.Id("ID"); 
     }) 
     .PageSize(100) 
     .Read(read => read.Action("Operators_Read", "TableMx")) 
    ) 
    .Columns(columns => 
    { 
     columns.Command(cmd => cmd.Custom("Operators_Edit").Text(" ").Click("edit")) 
      .Title("Edit") 
      .Width(75); 
     columns.Command(cmd => cmd.Custom("Operators_Deactivate").Text(" ").Click("deactivate")) 
      .Title("Deactivate") 
      .Width(100); 
     columns.Bound("DeleteDateUTC") 
      .ClientTemplate("<input type='checkbox' #= kendo.parseDate(DeleteDateUTC) ? '' : checked='checked' # disabled='disabled' />") 
      .Title("Active?") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to"))) 
      .Width(100); 
     columns.Bound("Name") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Title("Name") 
      .Width(350); 
     columns.Bound("Address") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Title("Address") 
      .Width(250); 
     columns.Bound("City") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Title("City") 
      .Width(150); 
     columns.Bound("StateAbbrev") 
      .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))) 
      .Title("State") 
      .Width(100); 
     columns.Bound("Zip") 
      .Filterable(false) 
      .Title("Zip") 
      .Width(70); 
     columns.Bound("ContactName") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Title("Contact Name") 
      .Width(175); 
     columns.Bound("ContactEmail") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Title("Email") 
      .Width(175); 
     columns.Bound("ContactPhone") 
      .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))) 
      .Title("Phone") 
      .Width(150); 
     columns.Bound("CreateDateUTC") 
      .ClientTemplate("#= kendo.parseDate(CreateDateUTC) ? (kendo.toString(kendo.parseDate(CreateDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #") 
      .Title("Create Date UTC") 
      .Width(250); 
     columns.Bound("CreatedByUser") 
      .Title("Created By") 
      .Width(150); 
     columns.Bound("LastChangeDateUTC") 
      .ClientTemplate("#= kendo.parseDate(LastChangeDateUTC) ? (kendo.toString(kendo.parseDate(LastChangeDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #") 
      .Title("Last Update Date UTC") 
      .Width(250); 
     columns.Bound("LastChangedByUser") 
      .Title("Last Updated By") 
      .Width(150); 
     columns.Bound("DeleteDateUTC") 
      .ClientTemplate("#= kendo.parseDate(DeleteDateUTC) ? (kendo.toString(kendo.parseDate(DeleteDateUTC), 'MM/dd/yyyy h:mm tt')) : '' #") 
      .Title("Deleted Date UTC") 
      .Width(250); 
     columns.Bound("DeletedByUser") 
      .Title("Deleted By") 
      .Width(150); 
    })     
)

編輯2：添加腳本部分下方的網格。我不確定是否需要這樣才能幫助我，但看到發生的一切並不會讓人傷心。

<script> 
$(function() { 
    var grid = $("#OperatorsGrid").data("kendoGrid"); 

    //Save personalized settings for this grid (columns shown, etc.) 
    $("#save").click(function (e) { 
     e.preventDefault(); 
     localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions()); 
    }); 

    //If the user has saved options, load them. Otherwise, load the default filter for the active column 
    var options = localStorage["kendo-grid-options"]; 
    if (options) { 
     grid.setOptions(JSON.parse(options)); 
    } 
    else { 
     grid.dataSource.filter({ field: "Active?", operator: "eq", value: "checked" }); 
    } 

    //Remove column menu from any columns specified by data-title below: 
    //grid.thead.find("[data-title=columnTitleHere]>.k-header-column-menu").remove(); 
    grid.thead.find("[data-title=\"Active?\"]>.k-header-column-menu").remove(); 
}); 

function deactivate(e) { 
    e.preventDefault(); 
    var id = this.dataItem($(e.currentTarget).closest("tr")).id; 
    var url = "/TableMx/Operators_Deactivate/" + id; 
    $.ajax({ 
     type: "POST", 
     url: url, 
    }) 
    .done(function() { 
     // refresh the grid to remove the just deactivated order 
     refreshGrid(); 
    }) 
    .fail(function() { alert("failure deactivating operator") }) 
} 

function edit(e) {   

} 

function onDataBound(e) {   
    $(".k-grid-Operators_Deactivate span").addClass("k-icon k-delete ob-icon-only"); 
    $(".k-grid-Operators_Edit span").addClass("k-icon k-edit ob-icon-only"); 
} 

function onCancel(e) { 
    e.preventDefault(); 
    e.sender.refresh(); 
} 

function refreshGrid() { 
    if ($(".k-i-refresh").length > 0) { 
     $(".k-i-refresh").trigger('click'); 
    } 
}

來源

2015-12-14 Ben Bloodworth

Telerik是公司的名稱。該產品被稱爲劍道。當您使用Telerik工作時，可能會引起混淆，因爲Telerik也有一些較舊的產品。 – ataravati

發佈您的整個網格，而不是一列。 – ataravati

謝謝ataravati。根據您的指示，我編輯了我的帖子以顯示整個網格。此外，我還添加了視圖的腳本部分以防萬一。 –

而不是使用一個dynamic模型，創建一個視圖模型是這樣的：

public class OperatorViewModel 
{ 
    // I'm not sure if your ID is int or string... 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public string Address { get; set; } 
    public string City { get; set; } 

    // All the other properties here 
    // ... 
    // ... 

    [Display(Name = "Active?")]  
    public bool IsActive { get; set; } 
}

正如你看到的，我還增加了IsActive屬性視圖模型。您將在Controller中填充此屬性，具體取決於是否存在DeleteDateUTC。

然後，網格會像（注意.Filter我添加到您的數據源）：

@(Html.Kendo().Grid<YourApp.ViewModels.OperatorViewModel>() 
    .Name("OperatorsGrid") 
    .Mobile(MobileMode.Auto) 
    .Pageable(pager => pager.PageSizes(new int[] { 50, 100, 250 }) 
            .Refresh(true)) 
    .Sortable() 
    .Resizable(resize => resize.Columns(true)) 
    .HtmlAttributes(new { style = "height: 800px;" }) 
    .Scrollable() 
    .ColumnMenu() 
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) 
    .Events(e => e.DataBound("onDataBound").Cancel("onCancel")) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Model(model => 
     { 
      model.Id("ID"); 
     }) 
     // THIS IS WHERE YOU FILTER THE IsActive FIELD 
     .Filter(f => f.Add(m => m.IsActive.Equals(true))) 
     .PageSize(100) 
     .Read(read => read.Action("Operators_Read", "TableMx")) 
    ) 
    .Columns(columns => 
    { 
     columns.Command(cmd => cmd.Custom("Operators_Edit").Text(" ").Click("edit")) 
      .Title("Edit") 
      .Width(75); 
     columns.Command(cmd => cmd.Custom("Operators_Deactivate").Text(" ").Click("deactivate")) 
      .Title("Deactivate") 
      .Width(100); 
     columns.Bound(c => c.IsActive) 
      .ClientTemplate("<input type='checkbox' #= IsActive ? '' : checked='checked' # disabled='disabled' />") 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to"))) 
      .Width(100); 
     columns.Bound(c => c.Name) 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Width(350); 
     columns.Bound(c => c.Address) 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Width(250); 
     columns.Bound(c => c.City) 
      .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))) 
      .Width(150); 
     //... 
     //...

確保您Operators_Read行動返回IEnumerable<OperatorViewModel>一個JSON。

來源

2015-12-15 17:04:55 ataravati

這更容易使用！感謝您對此的幫助。 –

Telerik Kendo MVC Grid - 如何設置onload /初始過濾器等於True複選框列？

回答

相關問題