Solved

HTML Page with grid and column help results on page are jumbled

Posted on 2015-01-22
10
172 Views
Last Modified: 2015-01-23
To say I am a novice at this is best so the simpler the better. I am trying to create an html page with some javascript for a project type of tracking page. I found a site that gives me exactly what I need and I am trying to duplicate it on my local machine. Locally on my machine I setup some folders and sub folders that you will see that references the js for now. The problem I am having is everything on my page is jumbled as you can see from my attachment. The page I am looking to duplicate is at: http://mleibman.github.io/SlickGrid/examples/example-multi-column-sort.html

Can someone please tell me what I could be missing. I also provided my code in my attachment.
example.docx
0
Comment
Question by:tmaususer
  • 5
  • 5
10 Comments
 
LVL 11

Accepted Solution

by:
Radek Baranowski earned 500 total points
Comment Utility
are you sure you import:

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

and

  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>

?
0
 

Author Comment

by:tmaususer
Comment Utility
Will Double check and update asap.
0
 

Author Comment

by:tmaususer
Comment Utility
It looks like I did not have the slick.grid.css and examples.css. I now have the slick grid css but cannot find the examples css. I am close. My screen now looks like the following (see new attachment)
ScreenShot2.docx
0
 

Author Comment

by:tmaususer
Comment Utility
Also one other question about the data populating the page. Where is this coming from and how do I modify?
0
 
LVL 11

Expert Comment

by:Radek Baranowski
Comment Utility
everything is int ht github source, including examples.css

https://github.com/mleibman/SlickGrid/tree/gh-pages/examples
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 11

Expert Comment

by:Radek Baranowski
Comment Utility
data is generated here, but it's just for testing purposes:

 $(function () {
    var MS_PER_DAY = 24 * 60 * 60 * 1000;
    var data = [];
    for (var i = 0; i < 500; i++) {
      var startDate = new Date(new Date("1/1/1980").getTime() + Math.round(Math.random() * 365 * 25) * MS_PER_DAY);
      var endDate = new Date(startDate.getTime() + Math.round(Math.random() * 365) * MS_PER_DAY);
      data[i] = {
        title: "Task " + i,
        duration: Math.round(Math.random() * 30) + 2,
        percentComplete: Math.round(Math.random() * 100),
        start: startDate,
        finish: endDate,
        effortDriven: (i % 5 == 0)
      };
    }

Open in new window

0
 

Author Comment

by:tmaususer
Comment Utility
I saw that but did not respond. So what do I get rid of without removing the grid and how do I put in my own data?
0
 
LVL 11

Expert Comment

by:Radek Baranowski
Comment Utility
the above function produces 500 rows of some random data, organizing it into desired structure, records (rows) of 6 items (columns)

just put in place any other data import or data generator, up to your preference. you probably need to create a function to load data from db/other page/api service
0
 

Author Comment

by:tmaususer
Comment Utility
I would have no idea being a novice how to acomplish this.
0
 
LVL 11

Expert Comment

by:Radek Baranowski
Comment Utility
I mean, if you are doing such page, you surely have *some* data you want to show, right ? so you need to figure out how to put your data into javascript objects. there are a plenty of tutorials and how-to's around. if you make some attempts, certainly me or other experts will eagerly help you. But well, you need to know something at least. Good Luck!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now