I have a kendo template in which I am binding a kendo DropDownList. I am having trouble getting HTML to show in the text of the dropdown.
$(function() {
var field = {
DisplayValue : "Blue",
OptionListDetails : [
{ Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
{ Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
{ Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
]};
var fieldObservable = kendo.observable(field);
var controlTemplate = kendo.template($("#dropdownTemplate").html());
var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
view.render($("#renderPlace"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script type="text/x-kendo-template" id="dropdownTemplate">
<select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" >
</select>
</script>
<div id="renderPlace">
Is there some sort of binding I can pass to get the HTML to work?
Well I was right that the solution involved additional bindings. I had to create another template and bind the data-template and data-value-template properties of the DropDownList.
$(function() {
var field = {
DisplayValue : "Blue",
OptionListDetails : [
{ Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
{ Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
{ Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
]};
var fieldObservable = kendo.observable(field);
var controlTemplate = kendo.template($("#dropdownTemplate").html());
var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
view.render($("#renderPlace"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script id="template" type="text/x-kendo-tmpl"> #=Text# </script>
<script type="text/x-kendo-template" id="dropdownTemplate">
<select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-value-primitive="true" data-template="template" data-value-template="template" >
</select>
</script>
<div id="renderPlace">
Related
I have Vue.js application where I have 2 inputs for a job title one in English and one in Arabic.
Is there a method to allow user type only with usage of Arabic characters on Arabic job title field ?
Try to watch the field and check if the characters are in Arabic else reset the field :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
jobTitle: ''
}
},
watch: {
jobTitle(newVal, oldVal) {
if (!this.isArabicChars(newVal) && newVal !== oldVal) {
this.jobTitle = "" //reset the field if the char is not arabic
}
}
},
methods: {
isArabicChars(text) {
var arregex = /[\u0600-\u06FF]/;
return arregex.test(text);
},
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<input type="text" dir="rtl" v-model="jobTitle" />
</div>
I have a select dropdown,and divs coming from loop.Here when I change the drop down option to city,my div id should change to one,two three which comes from details column from json.Again when I change the drop down option to state,my div id should change to title1,title2 title3 which comes from title column from json.Here it is working fine but I am creating new divs for each condition,can it possible to make in a single div with multiple condition.Here is the code below.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-if="id=='city'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.details}}" >hello</div>
</div>
<div ng-if="id=='state'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.title}}" >hello</div>
</div>
<div ng-if="id=='country'">
<div ng-repeat="emp in groups" ng-attr-id="{{emp.name}}" >hello</div>
</div>
script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [
{
title: 'title1',
name:'name1',
details:'one'
},
{
title: 'title2',
name:'name2',
details:'two'
},
{
title: 'title3',
name:'name2',
details:'three'
}
]
$scope.update = function() {
if($scope.x == 'city'){
$scope.id='city';
}
if($scope.x == 'state'){
$scope.id='state';
}
if($scope.x == 'country'){
$scope.id='country';
}
}
});
To achieve the desired result, try to:
create an attr for each value - city, state and country, like so:
if($scope.x == 'city'){
$scope.id='city';
$scope.attr = 'details';
}
Use {{emp[attr]}} to display values based on the dropdown selection:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'one'
},
{
title: 'title2',
name: 'name2',
details: 'two'
},
{
title: 'title3',
name: 'name2',
details: 'three'
}
]
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" ng-attr-id="{{emp[attr]}}">{{emp[attr]}}</div>
</div>
</div>
codepen - https://codepen.io/nagasai/pen/wRQWRM
To this in a singal element you can use a nested ternary operator. For your case it will look like that:
<div ng-repeat="emp in groups" ng-attr-id="{{id=='city' ? emp.details : id=='state' ? emp.title : emp.name}}" >hello</div>
I didn't implement this on angular 1 but it works on angular 2. Angular built in directive (ngif, ngfor ngclass etc) works almost same for both versions.
My Code:
HTML:
<select ng-model="selectedItem" ng-options="item.result as item.name for item in items"></select>
JS:
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
I want to display Yes and No in the select box whereas I have to send true and false to the server when Yes or No is selected respectively.
I have another div where I have to display the option text (ie Yes or No (selected one) ). I used {{selectedItem.label}} but it is not working. Please help.
Used Sajeetharan's answer and updated it to meet your requirement.
Following is the code:
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
<h1> Selected one is : {{currentSelected? "Yes": (currentSelected == null)? "":"No"}} </h1>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
}
]);
</script>
</body>
</html>
Demo
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
<h1> Selected one is : {{currentSelected}} </h1>
</div>
</body>
</html>
Use directive to get the desired result of displaying the selected item name value but send the result value to backend.
var app = angular.module('app', []);
app.controller("myctrl", ["$scope",
function($scope) {
$scope.items = [{
'name': 'Yes',
'result': true
}, {
'name': 'No',
'result': false
}];
}
]);
app.filter('getvalue', function() {
return function(value, array) {
if (value !== undefined && value !== null) {
var selectedOption = array.filter(function(l) {
if (l.result == value) {
return l;
}
})[0];
return selectedOption["name"];
} else {
return "";
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="myctrl">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
Displayed Text : {{currentSelected | getvalue:items}}
</div>
<div>
Value which will be send : {{currentSelected}}
</div>
</body>
I'm having trouble figuring out how to specify my Longitude and latitude for use in a timemap. This is my JSON:
[{"lon":"106.78185","title":"ZAKI","start":"2016-05-25","description":"OPERATION","Id":1,"lat":-6.2206087,"timeStart":"18:00:00"}]
And below is the HTML file I'm working with.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TESTER</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKey&sensor=false"></script> <script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script> <script type="text/javascript" src="lib/timeline-2.3.0.js"></script> <script type="text/javascript" src="lib/timeline-1.2.js"></script> <script type="text/javascript" src="src/timemap.js"></script> <script type="text/javascript" src="timemap_full.pack.js"></script> <script type="text/javascript" src="src/loaders/json.js"></script> <script type="text/javascript" src="src/loaders/progressive.js" ></script>
<script type="text/javascript">
var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["rows"]
}
loader.transform = function(data) {
return {
"title" : data.title,
"start" : data.date,
"options" : {
"description" : data.description
},
"point": {
"lat" : data.Lat,
"lon" : data.Lon
}
};
};
return loader;
};
// <!--start loading data-->
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
title: "Tacking OPS",
type: "json",
options: {
// json file
method:'GET',
url: "getDataTracking",
error: errFn
}
}
],
bandIntervals: [
// Timeline.DateTime.DAY,
// Timeline.DateTime.WEEK
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
]
});
});
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="help">
<h1>TIME MAPS CSA</h1>
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TESTER</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKey&sensor=false"></script>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script> <script type="text/javascript" src="lib/timeline-2.3.0.js"></script> <script type="text/javascript" src="lib/timeline-1.2.js"></script>
<script type="text/javascript" src="src/timemap.js"></script>
<script type="text/javascript" src="timemap_full.pack.js"></script> <script type="text/javascript" src="src/loaders/json.js"></script>
<script type="text/javascript" src="src/loaders/progressive.js" ></script>
<script type="text/javascript">
var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["rows"]
}
loader.transform = function(data) {
return {
"title" : data.title,
"start" : data.date,
"options" : {
"description" : data.description
},
"point": {
"lat" : data.Lat,
"lon" : data.Lon
}
};
};
return loader;
};
// <!--start loading data-->
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
title: "Tacking OPS",
type: "json",
options: {
// json file
method:'GET',
url: "getDataTracking",
error: errFn
}
}
],
bandIntervals: [
// Timeline.DateTime.DAY,
// Timeline.DateTime.WEEK
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
]
});
});
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="help">
<h1>TIME MAPS CSA</h1>
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body> </html>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body> </html>
this my servlet code
for (int i = 0; i < listDataTracking.size(); i++) {
org.json.simple.JSONObject obj = new org.json.simple.JSONObject();
EntityTracking dataTracking = listDataTracking.get(i);
if (dataTracking.getIdTracking() == null) {
obj.put("Id", "");
} else {
obj.put("Id", dataTracking.getIdTracking());
// writer.print(dataTracking.getIdTracking());
}
if (dataTracking.getTglSend() == null) {
obj.put("start", "");//tanggal
} else {
obj.put("start", sdf.format(dataTracking.getTglSend()));
// writer.print(sdf.format(dataTracking.getTglSend()));
}
if (dataTracking.getJamSend() == null) {
obj.put("jamstart", "");
} else {
obj.put("jamstart", dataTracking.getJamSend());
// writer.print(dataTracking.getJamSend());
}
if (dataTracking.getUser_name().getUserName() == null) {
obj.put("title", "");
} else {
obj.put("title", dataTracking.getUser_name().getUserName().toUpperCase());
// writer.print(dataTracking.getUser_name().getUserName());
}
if (dataTracking.getUser_name().getRoleName() == null) {
obj.put("description", "");
} else {
obj.put("description", dataTracking.getUser_name().getRoleName().toUpperCase());
// writer.print(dataTracking.getUser_name().getUserName());
}
if (dataTracking.getGetLatitude() == null) {
obj.put("lat", "");
} else {
//
obj.put("lat", dataTracking.getGetLatitude());
}
if (dataTracking.getGetLongitude() == null) {
obj.put("lon", "");
} else {
//
obj.put("lon", dataTracking.getGetLongitude());
}
arrayObj.add(obj);
}
My new HTML file
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>-->
<title>~:. TimeMaps .:~</title>
<link rel="shortcut icon" href="images/csalogo.ico" type="image/x-icon"/>
<!--
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
-->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBTquZF3N7wt_qze9l02cX8MSAkUEvBpuE&sensor=false"></script>-->
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>-->
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-->
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script>
<script type="text/javascript" src="lib/timeline-1.2.js"></script>
<script src="src/timemap.js" type="text/javascript"></script>
<script src="src/timemap.js" type="text/javascript"></script>
<script src="src/loaders/json.js" type="text/javascript"></script>
<script src="src/loaders/progressive.js" type="text/javascript"></script>
<!-- <script src="src/ext/circle_icons.js" type="text/javascript"></script>-->
<!-- source
http://www.vermontelectric.coop/custom/timemap/docs/symbols/TimeMap.loaders.json.html
http://www.ibiblio.org/tamil/maps/docs/symbols/TimeMap.loaders.jsonp.html#constructor
http://stackoverflow.com/questions/26683375/loading-json-into-timemap
https://groups.google.com/forum/#!topic/timemap-development/MNjFbvMY42w
http://www.gps-coordinates.net/
http://en.marnoto.com/2014/04/converter-coordenadas-gps.html
https://developers.google.com/maps/documentation/javascript/examples/#basics
http://geekswithblogs.net/bosuch/archive/2011/10/05/converting-decimal-degrees-to-degreesminutesseconds-astronomy-with-your-personal-computer.aspx
http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each
http://jsfiddle.net/5pjha/
-->
<script type="text/javascript">
var tm;
var isi_url ="getDataTrackingServlet";
var isi_jon, lon,lat,title,start,jamstart,description,theme;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
// $(function() {
$(function() {
$.getJSON(isi_url, function (json) {
$.each(json.results, function(i, item) {
lat = item.lat;
lon = item.lon;
title = item.title;
start = item.start;
description = item.description;
jamstart = item.jamstart;
theme = item.theme;
// })
console.log('Latitude : ',i, lat);
console.log('Longitude : ',i, lon);
console.log('title : ',i, title);
console.log('start : ',i, start);
console.log('description : ',i, description);
console.log('jamstart : ',i, jamstart);
console.log('theme : ',i, theme);
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
mapType: "physical",
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
// id:"trackingOPs",
title: "Tacking OPS",
//type:"basic","json"
type: "basic",
options: {
// method:'GET',
// url: isi_url,
// "theme": "Red",
// error: errFn,
items: [
{
"start" : item.start,
"end" : item.jamstart,
"point" : {
"lat" : item.lat,
"lon" : item.lon
},
"title" : item.title,
"options" : {
// set the full HTML for the info window
"infoHtml": "<div class='custominfostyle'><b>"+item.title+"<br/>"+"Divisi :"+" "+item.description+"<br/>"+"Postition :"+item.lat+","+item.lon+
"</b></div>",
"theme": item.theme
}
}],events: {
click: function(marker, event, context){
markerSelected(context.id);
}
// items: [
// {
// "start" :"2016-05-27",
// "end" : "2016-05-27",
// "point" : {
// "lat" : -6.2206089,
// "lon" : 106.7810652
// },
// "title" : "ZAKI",
// "options" : {
// // set the full HTML for the info window
// "infoHtml": "<div class='custominfostyle'><b>Domenico Ghirlandaio</b> was a visual artist of some sort.</div>"
// }
// }]
}
}
}
],
// bandIntervals: [
// // Timeline.DateTime.DAY,
// // Timeline.DateTime.WEEK
// Timeline.DateTime.DAY,
// Timeline.DateTime.MONTH
// ]
// bandInfo: [
// {
// width: "85%",
// intervalUnit: Timeline.DateTime.DAY,
// intervalPixels: 210
// },
// {
// width: "15%",
// intervalUnit: Timeline.DateTime.MONTH,
// intervalPixels: 150,
// showEventText: false,
// trackHeight: 0.2,
// trackGap: 0.2
// }
// ]
bandIntervals: "wk"
});
// filter function for tags
var hasSelectedTag = function(item) {
console.log(item.opts.tags.indexOf(window.selectedTag));
// if no tag was selected, everything passes
return !window.selectedTag || (
// item has tags?
item.opts.tags &&
// tag found? (note - will work in IE; Timemap extends the Array prototype if necessary)
item.opts.tags.indexOf(window.selectedTag) >= 0
);
};
// add our new function to the map and timeline filters
tm.addFilter("map", hasSelectedTag); // hide map markers on fail
tm.addFilter("timeline", hasSelectedTag); // hide timeline events on fail
// onChange handler for pulldown menu
$('#tag_select').change(function() {
window.selectedTag = $(this).val();
// run filters
tm.filter('map');
tm.filter('timeline');
});
});
});
});
//<!--end loading data-->
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 310px; }
div#mapcontainer{ height: 300px; }
</style>
</head>
<body>
<div id="help">
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body>
</html>
new My json Data
{
"results":[
{
"lon":"106.7810652",
"title":"ZAKI",
"start":"2016-06-01",
"description":"OPERASIONAL",
"theme":"red",
"Id":1,
"lat":"-6.2206089",
"jamstart":"18:00:00"
},
{
"lon":"106.7822585",
"title":"ARDYAN",
"start":"2016-06-01",
"description":"OPERASIONAL",
"theme":"orange",
"Id":2,
"lat":"-6.2216851",
"jamstart":"18:00:00"
}
]
}
new output Image
console.log
TimeMaps
Does anyone have suggestions? Thanks,
this is how official demo looks:
this is mine:
the button at top of the grid is not verticaly centered,the paging bar at bottom of my gird also looks ugly.
my code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" />
<style type="text/css">
body{font-size:11px}
.omnigrid div.fbutton .add {
background:transparent url(images/add.png) no-repeat scroll left center;
}
</style>
<script type="text/javascript" src="mootools-1.2.1.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
<script type="text/javascript" src="omnigrid.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div style="border:1px solid #cde;padding:25px 25px 25px 25px">
<div id="mygrid"></div>
</div>
</body>
my code javascript :
function onGridSelect(evt) {
var str = 'row: ' + evt.row + ' indices: ' + evt.indices;
str += ' id: ' + evt.target.getDataByRow(evt.row).id;
alert(str);
}
function gridButtonClick(button, grid) {
alert(button);
}
var cmu = [ {
header : "ID",
dataIndex : 'help_category_id',
dataType : 'number'
}, {
header : "Parent ID",
dataIndex : 'parent_category_id',
dataType : 'number',
width : 50
}, {
header : "Name",
dataIndex : 'name',
dataType : 'string',
width : 200
} ];
window.addEvent("load", function() {
datagrid = new omniGrid('mygrid', {
columnModel : cmu,
buttons : [ {
name : 'Add',
bclass : 'add',
onclick : gridButtonClick
}, {
name : 'Delete',
bclass : 'delete',
onclick : gridButtonClick
}, {
separator : true
}, {
name : 'Duplicate',
bclass : 'duplicate',
onclick : gridButtonClick
} ],
url : "data.jsp?" + Math.random(),
perPageOptions : [ 10, 20, 50, 100, 200 ],
perPage : 10,
page : 1,
pagination : true,
serverSort : true,
showHeader : true,
alternaterows : true,
sortHeader : false,
resizeColumns : true,
multipleSelection : true,
// uncomment this if you want accordion behavior for every row
/*
accordion:true,
accordionRenderer:accordionFunction,
autoSectionToggle:false,
*/
width : 600,
height : 220
});
datagrid.addEvent('click', onGridSelect);
$$(".omnigrid .pDiv").each(e,function (){
e.setStyle('font-size','11px');
});
});
It look like a css line-height problem. Use Chrome's Web Inspector (View > Developer > Web inspector), click on the magnifying glass and select the table header. Check the line-height property. Is it any different from the omnigrid demo?
For a quick dirty fix add:
.omnigrid {
line-height: 120% !important;
}
sorry guys, the problem is caused by myself, I zoomed out the page in google chrome