I am using jqgrid to display data. I am very new to this
I have tried How to change the theme of the jqGrid? but its not working for me.
Can anyone tell me how to change theme of grid?
For the jQWidgets Grid, you should do two things: include the CSS theme file and then set the widget's theme property to the theme's name. Example: Styling and Appearance
jqGrid uses jQuery UI CSS for the grid by default. Thus you have to include some jQuery UI CSS. I'd recommend you to choose one from well-known CSS and use it directly from Internet. There are some common CDNs, which provides servers in different locations of the world and which have long time interval for caching. As the result the CSS will be loaded quickly and the next loading will be made mostly from the local cache. As the results, the loading could be typically more quickly as loading form your private web site.
On jQuery UI blog you can find URLs to jQuery CDN, MaxCDN, Google Ajax Libraries API (CDN), Microsoft Ajax CDN and other.
The list of standard themes is relatively long: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader. You can choose someone and use it. For example
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
In the same way free jqGrid (it's the fork of jqGrid, which I develop) is accessible from two other CDNs too (cdnjs and jsDelivr CDN). See the wiki article for details.
As the result, the typical code, which uses free jqGrid can looks like described here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your page title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<script>
//<![CDATA[
$(function () {
"use strict";
$("#grid").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
});
//]]>
</script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
See JSFiddle demo too.
In other words, you don't need to generate customized jQuery UI theme, but you should just use one from existing.
Related
I have an spring/dojo application. The requirement is to locate an address in a stackcontainer/content-pane, in map. First thought was to have the redirection to google maps and CORS & ACCESS_ORIGIN issues are being thrown.
Can anyone guide us?
Not sure what you mean with "redirection to google maps", and I am not familiar with spring.
Below an example that I built after some googling (among others here), uses the google maps javascript api, and displays a map in a ContentPane (at least in my environment). You'll need to provide your google API key and adapt config to your environment:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google maps demo</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div id='theMap'></div>
<script>var dojoConfig ={
baseUrl: "", isDebug: true, async: true,
packages: [{"name": "dojo", "location": "dojo-release-1.12.2-src/dojo"}, {"name": "dijit", "location": "dojo-release-1.12.2-src/dijit"},
],
};
</script>
<script src="dojo-release-1.12.2-src/dojo/dojo.js"></script>
<script>
require([
'dijit/layout/ContentPane',
'myApp/gmapsLoader!http://maps.google.com/maps/api/js?v3&key=YOUR_GOOGLE_API_KEY'
], function (ContentPane) {
var theMap = new ContentPane({style: {height: '1000px'}}, 'theMap');
var mapOptions = {
center : new google.maps.LatLng(-34.397, 150.644),
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var theMapContent = new google.maps.Map(theMap.domNode, mapOptions);
theMap.startup();
});
</script>
</body>
</html>
It has a dependency upon gmapLoader, which is described here (under the name async.js).
jc
Since I had problems, with a simple test, I went back to the original Telerik page that shows the integration of the kendo components in a polymer application
It looks like ANY example (it's easy, since there is a Dojo link...) doesn't work, at least with the current version of Kendo.
What am I missing???
Andrea
P.S.: the page is this one: http://docs.telerik.com/kendo-ui/third-party/webcomponents
Update:
I can obtain the behavior of the kendo grid, for example, with the following approach:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<script src="../telerik/js/kendo.all.min.js"></script>
<script src="../telerik/js/kendo.webcomponents.js"></script>
<dom-module id="my-view2">
<link rel="import" type="css" href="../telerik/styles/kendo.common.min.css">
<link rel="import" type="css" href="../telerik/styles/kendo.default.min.css">
<link rel="import" type="css" href="../telerik/styles/kendo.default.mobile.min.css">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
...
<div id="grid"></div>
...
ready: function () {
var element = $(this.$.grid).kendoGrid({
dataSource: [
{ Id: 1, Name: 'Pamela Andersson' },
{ Id: 2, Name: 'Naomi Campbell' },
{ Id: 3, Name: 'Monica Bellucci' }
],
sortable: true,
filterable: true,
selectable: true
});
}
But I cannot obtain the styles correctly applied. Even if the official documentation says that it's deprecated, it should still work, including the external stylesheets as you can see in the code (any other 'position' breaks the code...).
So for example sorting works, but I cannot see the correct icon.
When I try to filter, the form appears unstyled, and in the topleft corner of the window...
I reproduced your symptoms following the first steps of the Telerik guide. The console indicates that the Kendo-specific Web Components script is not found on the server:
While the webcomponentsjs polyfill shouldn't be needed for Chrome, there may be modifications in their version of the polyfill that are needed for Kendo UI to function properly.
I recommend submitting a support request with the Kendo team.
I've published webcomponent wrappers for Kendo UI Core at Kendoui-core-components that make Kendo UI (for jQuery) can be initialized through html element attributes, like:
<k-auto-complete id="customers"
data-text-field="ContactName"
data-source='{
type:"odata",
transport:{
read:"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"},
group:{field:"Country"}
}'
heigth="400"
style="width:100%"></k-auto-complete>
You can install the package by 'npm i kendoui-core-components'.
Meanwhile I also authored a VSCode extension called 'vsc-kendo-core-components' which provides autocomplete for editing element attributes.
Hope the two derivatives make Kendo UI for jQuery more intuitive and effective.
I am using jqGrid 4.6.0.
Implemented Column chooser feature using the below code.
I am using
jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css
$.extend($.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 500,
msel_opts: { dividerLocation: 0.5 }
});
$grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 260,
height: 280,
classname: "column-chooser",
msel_opts: { //multiselect options
autoOpen: true,
header: true,
height: "auto",
classes: "column-chooser",
beforeclose: function () { return false; } //keep multiselect drop down open
}
});
}
});
The column chooser popup is showing up without available columns and make all columns visible options..
It just has one option available i.e., select columns..
Can somebody help..
thanks in advance...
It's very suspected where you get jquery.multi-select.js and multi-select.css. I suppose that you get wrong files. jqGrid which you downloads from trirand contains plugins subdirectory with ui.multiselect.js and ui.multiselect.css. So the typical contain of <head> of the page where you use jqGrid with columnChooser could be the following
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
I posted the bug report recently where I described some small steps to make "Remove all" and "Add all" working in case of usage the last versions of jQuery and jQuery UI. The modified versions of ui.multiselect.js and jquery.jqGrid.src.js you can download from here and here.
The demo can be used as prototype for the usage of columnChooser.
I was using a different Multiselect js and css files..
I downloaded the JQGRID 4.6.0 package.. it gave me the ui.multiselect.css and ui.multiselect.js files.. i added them in my project..
now the column chooser popup is showing up with available columns and make all columns visible options.. thank you Oleg.
I have a edit template using a list view and want a drop down list that is populated from a remote source. But the drop down list just shows the loading icon.
Here is the DropDownList DataSource.
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
and here is what I'm putting in the edit template
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
any help would be great.
Your code is basically fine but there a couple of question that you might have missed.
Since you are defining the DataSource saying data-source="dsTitles" as part of the HTML the order on how you define things is pretty important.
The first thing that gets defined is the HTML. Which means that dsTitle should be global.
Then, after the input is processed is when you should call kendo.init.
So, it should be something like this:
<html>
<head>
<meta charset="UTF-8"/>
<title>OnaBai - KendoUI DrowDownList</title>
<!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<!-- Web Page styling -->
<style type="text/css">
</style>
<script type="text/javascript">
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
$(document).ready(function () {
kendo.init("input");
});
</script>
</head>
<body>
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
</body>
</html>
I think the answer might be as simple as using a Kendo DropDownListFor, which will be populated with the given data.
I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:
jqgrid won't load json data
My data is different, but not substantially so:
{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}
I hate to re-open the same issue, but this is very frustrating to me.
EDIT: Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InfoMaker Monitor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<!CDATA[
jQuery(function () {
'use strict';
jQuery("#jsonmap").jqGrid({
url: 'http://localhost:8888/nancy/readasjson'
,datatype: 'json'
,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
// see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
,jsonReader : {
page: "page"
, total: "total"
, records: "records"
, rows: "rows"
,cell: "cell"
,id: "id",
}
,colNames: ['Report','File']
,colModel :[
{name:'Report' ,index:'Report', width:55}
,{name:'File',index:'File', width:55}
]
,rowNum:10
,rowList:[10,20,30]
,viewrecords: true
,loadComplete: function() {
console.log("Load Complete");
//console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
}
,loadError: function(xhr,st,err) {
console.log(xhr.statusText);
//$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
}
,width: '900'
,height: 'auto'//'300'
,caption: 'My first grid'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
});
//]]>
</script>
</head>
<body>
<table id="jsonmap"><tr><td></td></tr></table>
<div id="pjmap"></div>
</body>
</html>
And here is how the data looks now:
{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}
I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.
The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".
The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.