Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Filtering Grid data based on dropdown selection using Angularjs

Posted on 2014-02-25
7
Medium Priority
?
7,752 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 22

Accepted Solution

by:
Mrunal earned 800 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 1200 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 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