Chlodny series Day 7: Setup Client–CSS/jQuery UI Grid View

Posted on April 6, 2012 by chadit

Now that our database, Entity Framework, and Web Api are all setup lets give it a gui to play with.  At a later data we will go over cross domain utilizing JSON with Passing or JSONP and Cross-Origin Resource Sharing or CORS.  For now we are going to demo a HTML and jQuery application on the same domain.  The next few  days we will spend time playing with the new alpha grid that the jQuery UI team is working on.  The code is located here.

  • Add the following files to the project ChlodnyWebApi
  • HTML page and name it jQueryUILocal.htm (to the main folder)
  • JavaScript file and name is jQueryUIExampleLocal.js (to the scripts folder)

Since we are using the jQuery UI Grid (alpha build) we need to use the jQuery UI files from that project, the released version do not contain the references to the grid scripts.

First lets build out the content folder for our CSS files

  • Create a new folder under Content and name it jqueryGrid
  • In jqueryGrid create a folder named themes
  • In jqueryGrid create a new css file named jQueryUICssLocal.css
  • In the themes folder add another folder with the name base
  • Under base add the following CSS files from the alpha build
    • jquery.ui.accordion.css
    • jquery.ui.all.css
    • jquery.ui.autocomplete.css
    • jquery.ui.base.css
    • jquery.ui.button.css
    • jquery.ui.core.css
    • jquery.ui.datapicker.css
    • jquery.ui.dialog.css
    • jquery.ui.grid.css
    • jquery.ui.menu.css
    • jquery.ui.progressbar.css
    • jquery.ui.resizable.css
    • jquery.ui.selectable.css
    • jquery.ui.slider.css
    • jquery.ui.spinner.css
    • jquery.ui.tabs.css
    • jquery.ui.theme.css
    • jquery.ui.tooltip.css

In the Scripts folder create a folder named jqueryGrid.
In that folder create another folder named ui. 
Copy the following files from the project copied from link above to the ui folder

  • jquery.ui.button.js
  • jquery.ui.core.js
  • jquery.ui.dataview.js
  • jquery.ui.dataviewlocal.js
  • jquery.ui.dialog.js
  • jquery.ui.grid.js
  • jquery.ui.menu.js
  • jquery.ui.mouse.js
  • jquery.ui.observable.js
  • jquery.ui.position.js
  • jquery.ui.selectable.js
  • jquery.ui.spinner.js
  • jquery.ui.tooltip.js
  • jquery.ui.widget.js

Copy the following files to the jqueryGrid folder

  • dataview-odata.js
  • globalize.js
  • grid-filter.js
  • grid-sort.js
  • grid.selectable.js
  • helpers.js
  • jquery.mousewheel-3.0.4.js
  • jquery.tmpl.js
  • localstore.js
  • navigator.js
  • pager.js

Open the jqueryUILocal.htm we need to add our CSS and JS files to the file.  (before I get hate mail… please note that this is for demo purposes only, I know that some of these ways go against web standards and there are better/proper ways of doing things.)

You can either type in all the files needed or from solution explorer drag and drop them into the htm page.  Add CSS and jquery first.  After completed it should look similar to the following:

<head>
    <title>jQuery BABY (Local) !!!!</title>
    <link href="Content/jqueryGrid/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="Content/jqueryGrid/jQueryUICssLocal.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/globalize.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/jquery.mousewheel-3.0.4.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.button.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.spinner.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.tooltip.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.menu.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.observable.js" type="text/javascript"></script>    
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataview.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/ui/jquery.ui.dataviewlocal.js" type="text/javascript"></script> 
    <script src="Scripts/jqueryGrid/ui/jquery.ui.grid.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/dataview-odata.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/pager.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-filter.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid-sort.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/grid.selectable.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/navigator.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/localstore.js" type="text/javascript"></script>
    <script src="Scripts/jqueryGrid/helpers.js" type="text/javascript"></script>
    <script src="Scripts/jQueryUIExampleLocal.js" type="text/javascript"></script>
</head>
Advertisement
This entry was posted in MVC, Web and tagged , , , . Bookmark the permalink.