?
Solved

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

Posted on 2015-01-22
10
Medium Priority
?
194 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 12

Accepted Solution

by:
Radek Baranowski earned 2000 total points
ID: 40564400
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
ID: 40564554
Will Double check and update asap.
0
 

Author Comment

by:tmaususer
ID: 40564737
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
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.

 

Author Comment

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

Expert Comment

by:Radek Baranowski
ID: 40565877
everything is int ht github source, including examples.css

https://github.com/mleibman/SlickGrid/tree/gh-pages/examples
0
 
LVL 12

Expert Comment

by:Radek Baranowski
ID: 40565880
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
ID: 40566093
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 12

Expert Comment

by:Radek Baranowski
ID: 40566102
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
ID: 40566124
I would have no idea being a novice how to acomplish this.
0
 
LVL 12

Expert Comment

by:Radek Baranowski
ID: 40566131
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

Hire Technology Freelancers with Gigs

Work with 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month15 days, 20 hours left to enroll

850 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