This is a migrated thread and some comments may be shown as answers.

Grid filtering with custom toolbar template and textbox

4 Answers 776 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mika
Top achievements
Rank 1
Mika asked on 27 Sep 2012, 05:52 AM
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>  

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 02 Oct 2012, 05:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mika
Top achievements
Rank 1
answered on 02 Oct 2012, 05:50 AM
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'"
0
Accepted
Daniel
Telerik team
answered on 02 Oct 2012, 03:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mika
Top achievements
Rank 1
answered on 03 Oct 2012, 05:43 AM
Thank you very much, that attribute was what I was missing!
Tags
Grid
Asked by
Mika
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Mika
Top achievements
Rank 1
Share this question
or