Comparable functionality to Asp.Net AJAX Filter Control?

[Landon]

I'm currently converting an App from Telerik ASP.NET AJAX to the newest Kendo UI. The App heavily uses the "Filter" control which is attached to a Grid to sort through data. These filter configurations can then be saved to the database to allow Users to save/load Custom Grid Views.

I do not see a Filter control within the Kendo UI controls, is there an alternative to this functionality I could use to filter/sort the Kendo UI Grid?

Regards,
Landon

[Jayesh Goyani]

Hello,

1. In-build filter

VIEW

<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);
        })
        .Filterable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()

            .Read(read => read.Action("Grid_Read", "Home"))
             .Model(model => { model.Id(p => p.ID); })
        )
    )
</div>

CONTROLLER

public class HomeController : Controller
    {
 public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
        {
            List<TestModels> models = new List<TestModels>();

            for (int i = 1; i < 6; i++)
            {
                TestModels model = new TestModels();
                model.ID = i;
                model.Name = "Name" + i;
                models.Add(model);
            }

            return Json(models.ToDataSourceResult(request));
        }
}

MODEL

public class TestModels
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public int FID { get; set; }
    }

1. Manually filter

VIEW

<div>
    <input type="text" id="SearchText" value="1" />
    <input type="button" id="btnSearch" onclick="SearchGrid();" value="Search" />
</div>
<div>
    @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID);
            columns.Bound(p => p.Name);
        })
        .Filterable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()

                    .Read(read => read.Action("Grid_Read", "Home").Data("GetData"))
             .Model(model => { model.Id(p => p.ID); })
        )
    )
</div>
<script type="text/javascript">
    function SearchGrid() {
        $("#Grid").data("kendoGrid").dataSource.read();
        $("#Grid").data("kendoGrid").refresh();
    }
    function GetData() {

        return {
            ID: $("#SearchText").val()
        };
    }
</script>

CONTROLLER

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request,int ID)
       {
           List<TestModels> models = new List<TestModels>();

           for (int i = 1; i < 6; i++)
           {
               if (ID == i)
               {
                   TestModels model = new TestModels();
                   model.ID = i;
                   model.Name = "Name" + i;
                   models.Add(model);
               }
           }

           return Json(models.ToDataSourceResult(request));
       }

MODEL

public class TestModels
   {
       public int ID { get; set; }
       public string Name { get; set; }
       public bool IsActive { get; set; }
       public int FID { get; set; }
   }

Thanks,
Jayesh Goyani

[Landon]

Thanks Jayesh - The manual way looks like it should work for basic searching. However, I would require more advanced search features, including multiple parameters and the possibility for AND/OR statements that were provided with the Rad Filter control.

Is there a simple way of implementing this, or will I have to build a custom filtering form which will utilize the .Data element on the Kendo grid?