Filter grid with 2 elements, autocomplete & combobox

5 posts, 0 answers
  1. Stefan
    Stefan avatar
    15 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

    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({});
            }
    }


  2. kashyapa
    kashyapa avatar
    7 posts
    Member since:
    Jan 2011

    Posted 16 Oct 2012 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Sameer
    Sameer avatar
    14 posts
    Member since:
    Mar 2012

    Posted 01 Nov 2012 Link to this post

    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.
  5. kashyapa
    kashyapa avatar
    7 posts
    Member since:
    Jan 2011

    Posted 01 Nov 2012 Link to this post

    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.
  6. Sameer
    Sameer avatar
    14 posts
    Member since:
    Mar 2012

    Posted 01 Nov 2012 Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready