Solved

Filtering Grid data based on dropdown selection using Angularjs

Posted on 2014-02-25
7
7,229 Views
Last Modified: 2014-03-01
Hi Experts,

I have a dropdown list with the values "Any State","New York","New Jersey","California" etc and have a grid with columns(Product Name, Available,Entry Date,Features
etc) with following entries


Product Name      Available                   Entry Date           Feature          


Product1               All States


Product2               New york,Richmond


Product3                Michigan,California


Product4                All States


Product5                All States


Initially the current logon user state should be selected in the dropdown and this was already achieved here.But there is a change in the requriment and now I have a new value in the dropdonw ie."Any State" .User will change dropdown selection to "Any State" or "New York","New Jersey" etc and should display Products that are available in that state.

For example :If current logon user belongs to "New York" then in the dropdown "New york" should be selected and should display all the records that are available in
New york state. The result grid would be (Product1,Product2,product4,product5).That means I need to  filter the data in the Grid based on dropdown selection with "Available" column data. In the above Grid "Available" column data we will have either "All States" or individual State names.

so my logic should be something like this


USER  STATE / Dropdown Selection  
      Available (column)

New York                                             -> Should display records [All States + New York]     =                                                          Product1,Product2,Product4 and Product5


California                                            ->Should display records  [All States +     California]=Product1,Product3,Product4 and Product5


Any State                                           ->Shoud display all records [All states +Individual  states(New   york,Richmond,Michigan,california etc) ]
=Product1,Product2,Product3,Product4 and Product5 (basically all the records in the Grid)

Any sample code would be highly appreciated
0
Comment
Question by:ksd123
  • 3
  • 3
7 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 200 total points
ID: 39885302
Hi,
angular js is nothing but script.

I am not much expert in angular JS
but this below link will help you to filter your table records...
I have used simple jquery functions like .each
.

http://jsfiddle.net/bGNVm/

hope this helps you.
0
 

Author Comment

by:ksd123
ID: 39885353
Thank you.Could you please explain the logic on FileterRecords function ?
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 300 total points
ID: 39885421
Test page : http://jsfiddle.net/s2Ff9/4/

We added a filter to the list :
<tr ng-repeat="product in products | filter:productFilter">

Open in new window


And the corresponding filter :
        $scope.productFilter = function(data) {
            var isAllState = data.availcode == "";
            var isSelectedState = data.availcode == $scope.selectedState.abbreviation;
            if(isAllState || isSelectedState) {
                return true;
            }
            // else :
            return false;
        }

Open in new window

0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:ksd123
ID: 39885459
Thank you.Actually  I have  custom directive with watch functions for the Grid.All the column definitions for the Grid are defined in the directive.

1)In my case where should I add the "Product filter" ?

2) var isSelectedState = data.availcode == $scope.selectedState.abbreviation; //briefly explain about this statement
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39885493
1) I dunno, I hate to imagine code where you just need to post it. Check where I put the filter, try on your side, let me see it, maybe I will be able to help

2) Imagine :
- each row (data) is like this : {name:"XXXX", avail:"XXX", availcode:"XX"}
- each selected option (selectedState) is like this : {"name":"Alabama","abbreviation":"AL"}

the following return true or false : data.availcode == $scope.selectedState.abbreviation;
we put the result (true or false) in :  isSelectedState
0
 

Author Comment

by:ksd123
ID: 39888426
Hi Leakim971,

I have noticed an issue with your code, I selected "Michigan" state in the dropdown
and it shows following output which is wrong.It should also show "Product3" as this is
available in "California" and "Michigan". This is because the availcode for this is "CA"
and will only show correct records if we select "California" state in the dropdown.

Product1      All States
Product4      All States
Product5      All States

I have another concern, the availabilty of product's in the states changes frequently in the database.For example if I have a Product10 which is available in Michigan state and we put some static availcode for this and later they have added two more states to the product10 then the above logic will fail. Can you correct me if I am wrong ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39888656
So I see you understood how it work, great. From the filter you can do more, for example split the << avail >> by "," and loop over all this new array (example ["California", Michigan"] if it's correspond to the selectedState.name

Concerning the availability, I don't understand, the data should not static... or yes it's static in my test page but it should come from a service...
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

774 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question