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

Filter grid with 2 elements, autocomplete & combobox

4 Answers 274 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 2
Stefan asked on 13 Sep 2012, 02:23 PM
Hi! 

I have 2 different elements that i want to work together with filtering a grid.
1 Autocomplete (Works as a search function) and 1 ComboBox

When i select a filter in the comboBox i want it to filter the the grid and include the filter in the combobox.

Here is my code now for filtering separate:

    function autoComplete_selected(arg) {
        var value = this.value();
        var grid = $("#GridField").data('kendoGrid');
 
        if (value) {
            grid.dataSource.filter({ field: "SalonName", operator: "contains", value: value });
        }
        else {
            grid.dataSource.filter({});
        }
}

    //
    // Filter by ComboBox
 
    function selectFilterComboBox(arg) {
            var grid = $("#GridField").data('kendoGrid');
            var dataItem = this.dataItem(arg.item.index());
            if (dataItem.Value != null) {
            grid.dataSource.filter({ field: "StatusId", operator: "eq", value: parseInt(dataItem.Value) });
        }
        else {
        grid.dataSource.filter({});
        }
}


4 Answers, 1 is accepted

Sort by
0
kashyapa
Top achievements
Rank 1
answered on 17 Oct 2012, 04:30 AM
Take a look at the following fiddle:

http://jsfiddle.net/kashyapa/haWZ7/

If i understood correctly:
- You want to place a AutoComplete and autocomplete will be bind to some data
- You want to place a combobox and it will be bind to some data
- You want to place a grid and it will be bind to some data
- When user selects anything from the autocomplete - you want the grid to be filtered by autocomplete selection
- When user selects anything from the combobox - you want the grid to be filtered by combo box selection

In the example, i just made a country data source and bound it to auto complete. I made a fabrics data source and bound it to combobox. I made a people data source which contains - Name, Country & Fabric column. When you change something in autocomplete it will filter the grid based on value selected in autocomplete. Similarly, when you change something in the comobox, the selected value will be used to filter the grid. They key is to listen for change event on autocomplete and combobox.

Hope this helps
0
Sameer
Top achievements
Rank 1
answered on 01 Nov 2012, 06:21 AM
Hi,

I am having an issue with autocomplete which is similar to the given example.
The problem is based on the selected comb box value the data which is shown in the autocomplete box should be changed.

when i select the value in combo box the text entered in autocomplete box should be updated like that in the grid.
Is it possible??

regards,
sam.
0
kashyapa
Top achievements
Rank 1
answered on 01 Nov 2012, 06:31 AM
sameer,

try the following code:
var ac = $("#input1").data("kendoAutoComplete");
ac.value("Bulgaria");

As you can see, i am getting the auto complete first and then setting a value on the autocomplete using its value() method.
0
Sameer
Top achievements
Rank 1
answered on 01 Nov 2012, 08:01 AM
Hi,

To assign the single value to auto complete it is fine, but if my data has more items then they should be displayed as autocomplete values which i should select any one of them.
In my code I am using dropdownlist and auto complete to search data from database. First when I am filtering data in autocomplete the data is working as seen in img1 which I have attached for your reference. But the problem is if I try to get the data related to the dropdown list selected item then autocomplete is not working. I need the results as attached in images img2 and img3(the data shown is fetched from DB and they are available in Dept1 and Dept2) based on the dropdownlist selection.

Hope you have understood my problem.

Thank you.
sam.

Tags
AutoComplete
Asked by
Stefan
Top achievements
Rank 2
Answers by
kashyapa
Top achievements
Rank 1
Sameer
Top achievements
Rank 1
Share this question
or