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

is it possible to have Grid/ google-like filtering in the MVC Kendo UI?

4 Answers 149 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sang
Top achievements
Rank 1
Sang asked on 02 Aug 2012, 03:59 PM
We want to build a grid having google like filtering, is it possible and what is the best way to wrap the code around the current kendo ui grid to accomplish this?  TIA.
e.g.
ASP.NET Ajax Grid Google Like Filtering

4 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 07 Aug 2012, 06:59 AM
Hi Sang,

Yes such behavior could be achieved with the Kendo Grid. You need to create different ComboBoxes in each of the column header templates and attach Change handlers to the comboboxes.
For example:
columns.Bound("ProductName").Sortable(false).HeaderTemplate(@<text>
                      @(Html.Kendo().ComboBox().Name("cProducts")//you can use ajax binding if you preffer
                          //.DataSource(ds=>ds.Read(rea=>rea.Action("GetProducts","Home")))
                          .BindTo(new List<string>{"Chang","test2"}) //or direct populate on the server
                          .Events(ev=>ev.Change("onComboProductChange"))
                      )
                  </text>);
And the following Change handler:
<script type="text/javascript">
    function onComboProductChange(e) {
        if (this.value()) {
            $('#Grid').data('kendoGrid').dataSource.filter(
             { field: "ProductName", operator: "startswith", value: this.value() }
            );
        } else {
            $('#Grid').data('kendoGrid').dataSource.filter([])
        }
    }
</script>

I hope this helps.

Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sang
Top achievements
Rank 1
answered on 07 Aug 2012, 02:10 PM
Hi Petur,
Thanks for the information.  If we generate our own header, it means that we can no longer use Kendo grid header to handle our sorting correct? 
0
Petur Subev
Telerik team
answered on 08 Aug 2012, 05:15 AM
Hello Sang,

Yes I intentionally disabled the sorting of the column because the other way the ComboBox is unable to open.

Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tito
Top achievements
Rank 1
answered on 28 Aug 2012, 03:48 PM
Hi Petur,

there is a small problem with this implementation, it doesn't consider the other filters, so if I select the productName filter it give me the filter only by the productName, disconsidering the other columns. I am trying to consider the other columns as well, do you have any idea?

Best Regards.
Tito Morais
Tags
Grid
Asked by
Sang
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Sang
Top achievements
Rank 1
Tito
Top achievements
Rank 1
Share this question
or