asp.net-mvc - kendo - telerik asp net mvc grid

Telerik Kendo MVC Grid-¿Cómo configuro onload/initial filter igual a True con columnas checkbox?

Question

Me han encargado que cambie las páginas del sitio de formularios web actuales de mi empresa a MVC. Usamos el paquete de herramientas de Telerik y estoy buscando una manera de establecer un filtro inicial en mi grilla para que cuando la página se cargue, la cuadrícula muestre de manera predeterminada solo los registros que estén marcados (verdaderos). He encontrado varias preguntas similares a esta, pero hasta ahora ninguna de las respuestas que he encontrado en esas instancias se ha tratado con casillas de verificación.

El código a continuación es mi "¿Activo?" = Columna True / False en la grilla MVC. Estoy comprobando la fecha de eliminación de cada registro, que se trata como "desactivado" cuando existe una fecha de eliminación. Mi filtrado iniciado por el usuario funciona muy bien en la grilla, pero tengo problemas para averiguar cómo establecer el valor del filtro inicial en esta columna en VERDADERO y, al mismo tiempo, permitir que el usuario borre el filtro para ver los registros desactivados junto con los registros activos.

Agradezco cualquier ayuda que puedas ofrecer. Si estoy implementando esto completamente incorrecto, no dude en hacérmelo saber, pero incluya también un ejemplo de la forma correcta de lograr esta funcionalidad.

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);

¡Gracias!

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);
    })                
)

EDIT 2: Añadiendo la sección del script debajo de la grilla. No estoy seguro de si esto es necesario para ayudarme, pero no puede doler ver todo lo que está sucediendo.

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

Answer 1

En lugar de utilizar un modelo dynamic , cree un modelo de vista como este:

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; }
}

Como puede ver, también agregué una propiedad IsActive al modelo de vista. DeleteDateUTC a DeleteDateUTC esta propiedad en su Controlador, dependiendo de si hay un DeleteDateUTC o no.

Entonces, su cuadrícula será similar ( .Filter el .Filter que agregué a su fuente de datos):

@(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);
        //...
        //...

Asegúrese de que su acción Operators_Read devuelva un JSON de IEnumerable<OperatorViewModel> .