Grid filtering with custom toolbar template and textbox

[Mika]

Hi,

I'm having trouble creating a custom filter textbox. I'm trying to add the filter with javascript syntax, but in the controller I'm seeing that request.Filters is null for some reason. Here's my code:

@(Html.Kendo().Grid<ToolWarehouseGUI.Models.ToolRowModel>()

.Name("KendoGridTest")

.Columns(columns =>

  {

  columns.Bound(p => p.Name).Title("Nimike");

  columns.Bound(p => p.Description).Title("Kuvaus");

  columns.Bound(p => p.AmountAvailable).Title("Varastossa");

  columns.Bound(p => p.AmountBooked).Title("Lainassa");

  columns.Template(@<text>

        <a class="link-button" href="@Url.Action("Edit", new {toolid=item.ToolId})">

            <span class="add-item">Muokkaa</span>

        </a>  

        <a class="link-button" href="@Url.Action("Details", new {toolid=item.ToolId})">

            <span class="add-item">Lisätiedot</span>

        </a>                                                      

    </text>)

  .ClientTemplate("<a class=\"link-button\" href=\"" + Url.Action("Edit", "Warehouse") + "?toolId=#=ToolId#" + "\">" +

                  "<span class=\"add-item\">Muokkaa</span>" +

                  "</a>" +

                  "<a class=\"link-button\" href=\"" + Url.Action("Details", "Warehouse") + "?toolId=#=ToolId#" + "\">" +

                  "<span class=\"add-item\">Lisätiedot</span>" +

                  "</a>")

  .Title("Toiminnot");

  })

.DataSource(dataSource => dataSource

    .Ajax()

    .Read(read => read.Action("GetTools", "Warehouse")

    .Type(HttpVerbs.Post)

    )

)

.Filterable(filtering => filtering

   .Enabled(true)

   )

.ToolBar(factory => factory

  .Template(@<text>

         <div>

             Hakusana: @Html.TextBox("SearchText")

             <button id="searchBtn" class="ui-state-default ui-corner-all" type="submit">Hae</button>

         </div>

     </text>)))

 

<script>

    function refreshGrid() {

        $filter = new Array();

        $filter.push({ field: "Name", operator: "contains", value: $('#SearchText').val() });

        var grid = $("#KendoGridTest").data("kendoGrid");

        grid.dataSource.filter($filter);

        grid.dataSource.read();

    }

 

    $('#searchText').on("keypress", function(e) {

        var code = (e.keyCode ? e.keyCode : e.which);

        if (code == 13) {

            refreshGrid();

            return false;

        }

    });

 

    $('#searchBtn').on("submit", function(e) {

        refreshGrid();

        return false;

    });

</script>  

[Daniel]

Hello Mika, 

The dataSource.read method will not be needed because the filter method will trigger a request on its own. The filter will not be parsed by the DataSourceRequestAttribute if the kendo.aspnetmvc is not included because the filters will not be sent in the needed format. Are the filters received correctly when using the Grid filter menu?

Kind regards,
Daniel
the Telerik team

[Mika]

Hi Daniel,

Thank you for replying. I have the following bundle configurations

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

        "~/Scripts/kendo.all.*",

        "~/Scripts/kendo.aspnetmvc.*"));

And I can see that the following scripts are loaded : jquery-1.7.1.js, kendo.all.min.js, kendo.aspnetmvc.min.js.

I tried the Grid filter menu, and couldn't get the filter values in the controller method. So it seems that something prevents the filters from being parsed correctly?

Here's the controller method

public ActionResult GetTools(DataSourceRequest request)

{

    WarehouseModel model = new WarehouseModel();

    model.ToolRows = new List<ToolRowModel>();

    model.ToolRows.Add(...);

 

    var tools = model.ToolRows;

 

    DataSourceResult result = tools.ToDataSourceResult(request);

 

    return Json(result);

}

Btw, browser seems to send filter data : "filter: Name~eq~~'asdf'"

[Daniel]

Hi Mika,

The files seems to be correctly included and the filter format is correct. In order to get the filters, you should also use the DataSourceRequestAttribute which will parse them e.g.

public ActionResult GetTools([DataSourceRequest]DataSourceRequest request)

The Ajax binding documentation provides more detailed information on this topic. Regards,
Daniel
the Telerik team

[Mika]

Thank you very much, that attribute was what I was missing!