Has anyone tried this grid yet? I would like to use it but I'm not sure where to start. I read this article but I have some questions. Maybe some of the experts here can help.
First big question is "how can I get a copy of the code". The article points to a source but it's on some MVC trunk and I don't know how I can download the example.
Next big question. The article points so scripts:
<link href="#Url.Content("~/Content/site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/grid-datamodel.css")" rel="stylesheet" type="text/css" />
...
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tmpl.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/datamodel/dataitem.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/datamodel/datasource.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/datamodel/extractor-datasource.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/datamodel/datastore.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/datamodel/grid.js")" type="text/javascript"></script>
Where can I get these from?
It appears that all of the scripts being referenced can be found in the github branch link he includes.
You can download a zip file by clicking the Download Now link on the right side of the page.
you can also browse the source code (the live branch (within 10 min), and tags), and easily download multiple files:
http://view.jqueryui.com
specifically, you can view the grid, and demos:
http://view.jqueryui.com/grid/
http://view.jqueryui.com/grid/grid-spf/
Related
I can't figure out why Download CSV and Download XLS are repeated in my Highstock chart. Here are my links:
<script src="/Scripts/HighStock/highstock.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/highcharts-more.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/no-data-to-display.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/boost.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/exporting.js" type="text/javascript"></script>
<script src="/Scripts/HighStock/modules/export-csv.js" type="text/javascript"></script>
Any help is appreciated.
I found my problem. I had a duplicate link to csport-csv.js in my html. It was hiding somewhere I didn't think to look. Once it was removed the chart displayed the expected choices.
I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:
I have inserted the recommended code into my application header:
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>
and
<script type="text/javascript">
$(document).ready(function() {
$.material.init();
});
</script>
However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.
Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.
Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section
<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421
I am trying to separate all the things that I could reuse in sections, so it would be easier for me to maintain.
However I got this exception:
The file "~/Views/Position/Edit.cshtml" cannot be requested directly because it calls the "RenderSection" method
I created a file called sections.cshtml with the following content:
#section scripts{
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
And in the _layout.cshtml file I changed it to:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#RenderSection("scripts", required:false)
#*<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>*#
</head>
When I go to the view in the browser and check the source code it shows only:
<head>
<meta charset="utf-8" />
<title>Edit</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
RenderSection can only exist in Layout files (i.e. master pages)... its purpose is to allow the pages you can request directly to target various sections of a Layout (layout being a file common to all pages which choose to use it) and supply content for these different sections.
If you want to separate this section out as something which is resuable on many pages you should put it in a partial and replace the rendersection call to something like
#Html.Partial("Scripts")
Alternatively you could use helper to separate code you use more often. Especially if you cannot use sections because of the constraint Martin-Booth mentioned.
#helper Scripts(){
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
and the usage is just:
<somehtml />
#Scripts()
<somehtml />
Same one as my previous question, but this time another problem - the search box doesnt appear when the search icon is clicked... it worked yesterday, but not any more!
http://sysport.co.uk/admin/grid/TEST.php
Should work the same as:
trirand.com/blog/jqgrid/jqgrid.html
Left hand side click new in 3.7 -> Multiple Search...
Really baffled me! It uses jquery-ui
It seems to me that you should change the list of the JavaScript files loaded from
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
to
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
or
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>
<script src="src/grid.loader.js" type="text/javascript"></script>
The file i18n/grid.locale-en.js must be loaded before jquery.jqGrid.min.js. The file src/grid.loader.js on the other side contain the same files which are already included in the jquery.jqGrid.min.js plus i18n/grid.locale-en.js (see developer version of jqGrid). Including two versions of jqGrid can follow to unpredictable results.