Solved

Gridview using bootstrap and Html5

Posted on 2014-02-11
4
6,983 Views
Last Modified: 2014-02-12
Hi Experts,

I want a Grid similar to attached screenshot  using Html5 ,bootstrap and angularjs .Basically the Grid contains readonly data and need sorting by column.  

How can I achieve grid using bootstrap and html5 and what bootstrap classes do I need to use ? If possible any sample working code would be highly appreciated.

Thanks in Advance
Gridview.JPG
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
  • 2
  • 2
4 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39849557
What you are showing is a table and not a css grid.  Bootstrap  has a css grid made up of 12 columns http://getbootstrap.com/css/#grid.   What may be confusing the matter is some projects like wijmo http://wijmo.com/widgets/wijmo-complete/grid/  call that a grid as does kendo http://demos.telerik.com/kendo-ui/web/grid/index.html.

You will pay $400 to $1000 for those projects.  There is an open source project called datatables http://datatables.net/release-datatables/examples/basic_init/zero_config.html that will do the very same thing.  You can use jquery ui themes to make them look a little nicer https://datatables.net/release-datatables/extras/ColReorder/theme.html

Those are basically well formed tables with javascript for things like ajax and sorting.
0
 

Author Comment

by:ksd123
ID: 39849877
Thank you. We are migrating ASP.net  web application to HTML5.In the Asp.net web app we

are using telerik controls .For html app ,so far we are not any using third party controls .

Can you suggest me best way to implement Gridview similar to screenshot in HTMLS App?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39850481
>Can you suggest me best way to implement Gridview similar to screenshot

I thought that is what this answer was http:#a39849557
0
 

Author Closing Comment

by:ksd123
ID: 39852723
Thank you
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

695 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