CODEWITHSUNDEEP
asp.net-mvckendo-ui
Nawroz Salehi
Nawroz Salehi

Reputation: 79

Searching/Filtering on All Columns in KendoUI Grid using DropdownlistFor

I am trying to Filter/Search kendoUI grid using my custom Dropdownlist. I have been able to get a result on singe column filtering but if i try to add new dropdownlist for filtering the Grid i can't get the required result. my problem is with logic operator and it's different values. is it the correct way ? or any other suggestions?

I add here the images for more description and hope you to help me please. thanks

HTML dropdowns :

<html>
    <div class="form-group col-md-2" style="margin-bottom:0px;">
                @Html.Label("Media", htmlAttributes: (new { @class = "col-sm-4 control-label" }))
                <div class="col-sm-8" style="float:none;">
                      @Html.DropDownListFor(model => model.MediaTypeID, (ViewData["media"] as SelectList), "select media", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select media", style = "border-bottom:none;border-radius:0px;" })
             @*   @Html.ValidationMessageFor(model => model.MediaTypeID, "", new { @class = "text-danger" })*@
        </div>
    </div>

    <div class="form-group col-md-2" style="margin-bottom:0px;">
        @Html.Label("Outlet", htmlAttributes: (new { @class = "col-sm-4 control-label" }))
        <div class="col-sm-8" style="float:none;">

            @Html.DropDownListFor(model => model.channel, (ViewData["company"] as SelectList), "select channel", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select channel", style = "border-bottom:none;border-radius:0px;" })
            @Html.ValidationMessageFor(model => model.channel, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group col-md-2" style="margin-bottom:0px;">
        @Html.Label("Start Date", htmlAttributes: (new { @class = "col-sm-6 control-label" }))
        <div class="col-sm-6" style="float:none;">
            @Html.DropDownListFor(model => model.EntryDate, (ViewData["entryDate"] as SelectList), "select date", new { @class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select date", style = "border-bottom:none;border-radius:0px;", id = "startDate" })
            @Html.ValidationMessageFor(model => model.EntryDate, "", new { @class = "text-danger" })
        </div>
    </div>
</html>

Javascript Function and filltering:

<script type="text/javascript">
    function changes_dropdown(fieldID)
    {
        var fieldValue = document.getElementById(fieldID).value;


            $("#grid").data("kendoGrid").dataSource.filter({

                logic: "and",

                filters: [
                    {
                        field: fieldID,
                        operator: "contains",
                        value: fieldValue
                    }
                ]
            });
    }
</script>

Upvotes: 1

Views: 887

Answers (1)

suvroc
suvroc

Reputation: 3062

At first you don't need to pass id of current field to changes_dropdown function. Instead you can use onchange = "changes_dropdown() and inside this function use var fieldValue = this.value

Also when you define single filter you don't need to specify logic between predicates (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-filter):

$("#grid").data("kendoGrid").dataSource.filter({
  filters: [
    {
      field: fieldID,
      operator: "contains",
      value: fieldValue
    }
  ]
});

Upvotes: 1

Related Questions