locked
Filtering a winjs.ui.listview based on values from a drop down list box.

    Question

  • Hi,

    I am looking how to filter a listview based on the values in a drop down list box.

    I found this function createFiltered but not sure how to make it work. I understand that this is the technique to make it work.

    1. Copy the contents of the listview to a itemdataSource.

    2. Apply the filter on this itemdataSource and create a new Binding.List() out of this.

    3. Bind the list view to this new binding list.

    My code is below.

    document.getElementById("cmbFilter").onchange = function navTo3() {
                    var dynGrid = document.getElementById('SummaryGrid');
    
                    var dynGridDataSource = dynGrid.itemDataSource;
    
                    var list = new WinJS.Binding.List().createFiltered(
                       function (item) {
                          return item.Priority = document.getElementById('cmbFilter').value;
                       }
                 );
                    dynGrid.winControl.itemDataSource = list.dataSource;
                };

    Please let me know what is wrong with this and how to make it work. And assuming that I want to remove the filter and revert back to the original list view, how should I do it without populating the list view again from the original data Source.

    Will the list view filter even if a single argument is passed to the filter function. the list view displays 4 elements.

    Thanks,

    Rajesh.

    Wednesday, December 4, 2013 10:51 AM

Answers

  • Seems to me you need to use createGrouped() before createFiltered.

    Also, I'm not sure the createFiltered implementation is correct. This seems better:

                            if (item.Priority == document.getElementById('cmbFilter').value) {
                                return item;
                            };

    If changing createFiltered() won't work in your app, I would try using createGrouped() first. The code below worked for me to show group info in the ListView... You would also need some item template markup, I think.

                var filter = document.getElementById("cmbFilter");

                var opt1 = document.createElement("OPTION");
                opt1.text = "one";
                opt1.key = "1";
                var opt2 = document.createElement("OPTION");
                opt2.text = "two";
                opt2.key = "2";
                var opt3 = document.createElement("OPTION");
                opt3.text = "three";
                opt2.key = "3";

                var data = new Map();
                data.set(opt1.key, opt1);
                data.set(opt2.key, opt2);
                data.set(opt3.key, opt3);

                filter.add(opt1);
                filter.add(opt2);
                filter.add(opt3);

                var list = new WinJS.Binding.List();

                var groupedItems = list.createGrouped(
                        function groupKeySelector(item) { return item.group.key; },
                        function groupDataSelector(item) { return item.group; }
                );

                data.forEach(function(item, mKey, mapObj) {
                    list.push({
                        group: "all", key: mKey, title: item.text,
                        Priority: item.text
                    });         
                });

                var dynGrid = document.getElementById('SummaryGrid');

                document.getElementById("cmbFilter").onchange = function navTo3() {
                    var dynGrid = document.getElementById('SummaryGrid');

                    var filteredList = list.createFiltered(
                        function (item) {
                            if (item.Priority == document.getElementById('cmbFilter').value) {
                                return item;
                            };
                        });

                    dynGrid.winControl.itemDataSource = filteredList.dataSource;
                };

    • Marked as answer by Anne Jing Thursday, December 12, 2013 5:42 AM
    Friday, December 6, 2013 11:38 PM

All replies

  • Hi, Rajesh

    You should change your codes below:

    document.getElementById("cmbFilter").onchange = function navTo3() {
                    var dynGrid = document.getElementById('SummaryGrid');
    
                    var dynGridDataSource = dynGrid.itemDataSource;
    
                    var list = dynGridDataSource.createFiltered(
                       function (item) {
                          return item.Priority==document.getElementById('cmbFilter').value;
                       }
                 );
                    dynGrid.winControl.itemDataSource = list;
                };

    You can refer to the link to know how to use createFiltered to fliter item in list:

    http://msdn.microsoft.com/en-us/magazine/jj651576.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, December 5, 2013 3:50 AM
  • Hello,

    I used this code as given by you and I am getting this run time error

    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'createFiltered'

    Then I modified this code to convert the dataSource to a Binding.List and then use this as the filtering source.

    document.getElementById("cmbFilter").onchange = function navTo3() {
                    var dynGrid = document.getElementById('SummaryGrid');
    
                    //var dynGridDataSource = dynGrid.itemDataSource;
    
                    var dynGridDataSource = new WinJS.Binding.List(dynGrid.itemDataSource);
    
                    var list = dynGridDataSource.createFiltered(
                       function (item) {
                           return item.Priority == document.getElementById('cmbFilter').value;
                       }
                 );
    
                    dynGrid.winControl.itemDataSource = list.dataSource;
                };

    And it returns a blank grid and nothing is shown.

    Thanks,

    Rajesh.

    Thursday, December 5, 2013 5:58 AM
  • Seems to me you need to use createGrouped() before createFiltered.

    Also, I'm not sure the createFiltered implementation is correct. This seems better:

                            if (item.Priority == document.getElementById('cmbFilter').value) {
                                return item;
                            };

    If changing createFiltered() won't work in your app, I would try using createGrouped() first. The code below worked for me to show group info in the ListView... You would also need some item template markup, I think.

                var filter = document.getElementById("cmbFilter");

                var opt1 = document.createElement("OPTION");
                opt1.text = "one";
                opt1.key = "1";
                var opt2 = document.createElement("OPTION");
                opt2.text = "two";
                opt2.key = "2";
                var opt3 = document.createElement("OPTION");
                opt3.text = "three";
                opt2.key = "3";

                var data = new Map();
                data.set(opt1.key, opt1);
                data.set(opt2.key, opt2);
                data.set(opt3.key, opt3);

                filter.add(opt1);
                filter.add(opt2);
                filter.add(opt3);

                var list = new WinJS.Binding.List();

                var groupedItems = list.createGrouped(
                        function groupKeySelector(item) { return item.group.key; },
                        function groupDataSelector(item) { return item.group; }
                );

                data.forEach(function(item, mKey, mapObj) {
                    list.push({
                        group: "all", key: mKey, title: item.text,
                        Priority: item.text
                    });         
                });

                var dynGrid = document.getElementById('SummaryGrid');

                document.getElementById("cmbFilter").onchange = function navTo3() {
                    var dynGrid = document.getElementById('SummaryGrid');

                    var filteredList = list.createFiltered(
                        function (item) {
                            if (item.Priority == document.getElementById('cmbFilter').value) {
                                return item;
                            };
                        });

                    dynGrid.winControl.itemDataSource = filteredList.dataSource;
                };

    • Marked as answer by Anne Jing Thursday, December 12, 2013 5:42 AM
    Friday, December 6, 2013 11:38 PM