AngularJS Ideas with HTML : Order Reshuffling Popup

Subbu G
Subbu G used Ask the Experts™
on
Experts,  Is it possible to achieve something like this angularJS. If yes I need some ideas.

I would like to have a popup which takes data from a entity table and loads up the data like this in the picture.  I need to have a up and down arrow controls that will re-arrange the order and saves it in the database.

 I am using C#, entity framework, angular JS, Web API and SQL Server 2008.

Order-Reshuffling-Popup.JPG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
@JulianH

can you throw some ideas?
Commented:
Hi,
Two projects that can help are Bootstrap UI Modal and Grid. Pass the data needed to be rendered into the Modal as a dependency and render in the grid.

Author

Commented:
@gregg_s

Thanks for your response.

I am a beginner with Angular so UI Grid looks very complex to me. Bootstrap UI popup is okay with me. is there any sample codes that you can refer me to?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
If the grid contains too much overhead, I think an HTML table generated by an ng-repeat would be fine. This link contains a variety of tutorials for the Grid. Personally, I would avoid the grid and design this using HTML tables. Hopefully this gets you started and we can resolve issues you encounter as you make progress.

Author

Commented:
Thanks gregg. I will give it a shot
Manager / Solutions Architect
Commented:
You're asking several things here; mainly how to handle popups and do that reshuffling feature,in AngularJS.

For the reshuffling you should use the orderBy filter along with the ngRepeat.
https://docs.angularjs.org/api/ng/filter/orderBy
You just need to order by a property of your items and change it according to the move up and down arrows; the ngRepeat will take care of reflecting the changes on screen.

I'm on the phone so I can't give you a working example.

For the popup, AngularUI has a good one.
http://angular-ui.github.io/bootstrap/#/modal

Author

Commented:
thanks @AlexCode

I will come back with all your inputs and reach an interesting point before I can come with further questions.. appreciated.

Author

Commented:
Thanks guys. Appreciated

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial