Adding columns and button to column in Openui5 table dynamically - sapui5

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>OData Date Table Multiple Sorters</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var aColumnData = [{
columnId: "col1"
}, {
columnId: "col2"
}, {
columnId: "col3"
}, {
columnId: "col4"
}, {
columnId: "col5"
}];
var aData = [{
col1: "Row 1 col 1",
col2: "Row 1 col 2",
col3: "Row 1 col 3",
col4: "Row 1 col 4",
col5: "Row 1 col 5"
}, {
col1: "Row 2 col 1",
col2: "Row 2 col 2",
col3: "Row 2 col 3",
col4: "Row 2 col 4",
col5: "Row 2 col 5"
}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumnData,
rows: aData
});
var oTable = new sap.ui.table.Table({
title: "Table column and data binding",
showNoData : true,
columnHeaderHeight : 10,
visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
//alert(sColumnId.);
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
// template: sColumnId,
template: new sap.ui.commons.Button({
text : sColumnId,
icon :
"sap-icon://accept",
enabled: true,
press: function(e) {
}}),
sortProperty: sColumnId,
filterProperty: sColumnId
});
});
oTable.bindRows("/rows");
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="body" role="application">
<div id="content"></div>
</body>
</html>
Instead of column values as Button text I get the column names. But if I change the template value from button to sColumnId as stated below I get the output correct :
template: sColumnId,
Here is the link for jsbin: http://jsbin.com/horozew/edit?html,output


You assign a literal string to the text property of your button.
Instead you have to bind the text property of the button to the model with your sColumnId as binding path:
text: { path: sColumnId }
See jsbin.
If assign a string to the template aggregation of the column, the column creates a TextView and binds its text property with the given string as path in its setter.
Edit: Some more information as requested in comment.
You have bound the columns of your table to the datasource (the data from aColumnData at the model path /columns). In the function that you give bindColumns() as second parameter you create the Column objects for your table. The function is called for each item in aColumnData. With that you create the template - a Button - and bind its value to the model specifying a relative path (relative to /rows).
Then you bind your rows of the table to the datasource (the data from aData at the model path /rows). For each item in aData a row will be created. Each row gets a binding Context that points to the corresponding aData entry and enables relative paths inside the row.
The template of each column you created before will be cloned for each row. At this point you could access the data of a single cell.
A quite simple way to do that is a formatter function:
text: {
path: sColumnId,
formatter: function(value){
return "Hi " + value ;
}
}
Edit: Accessing both the value and the column id
Thanks to javascript closures you can do something like this to access both - the sColumnId and the cell value (jsbin):
template: new sap.ui.commons.Button({
text : {path: sColumnId },
icon : {path: sColumnId, formatter: function(value) { if (sColumnId === "col2" && value > "Row 2") return "sap-icon://accept"; else return "" } },
enabled: true,
press: function(e) {
}}),

Related

SelectedItem BindingContext not found UI5 application

I am trying to find the binding context of the selectedItem. Even after passing modelName to bindingContext, I get undefined. When I do oEvent.getSourcer() and see the oBindingContexts it is blank. Also the oBindingInfos has ocontext undefined. Though it has sPath. The correct sPath. How can I get the array index in this scenario?
oNewField = new sap.m.Select({
enabled: "{order>/" + Type+ "/" + i + "/fieldEnabled}",
forceSelection: false,
width: "90%",
// Add dropdoen Items
items: [
new sap.ui.core.ListItem({
key: " ",
text: " "
}),
new sap.ui.core.ListItem({
key: "{order>/" + Type+ "/" + i + "/DefaultValue}",
text: "{order>/" + Type+ "/" + i + "/DefaultValue}"
})
],
change : function(evt) {
that.onChange(evt);
},
});
var selectedKey = this.getView().getModel('order').getProperty(
"/" + Type+ "/" + i + "/DefaultValue");
oNewField.setSelectedKey(selectedKey);
**On Change Function **
onChange: function(oEvent) {
debugger;
var key = oEvent.getSource().getSelectedItem().getKey();
//need to get BindingContext here.
var oContext =
oEvent.getSource().getSelectedItem().getBindingContext('order')
//gives undefined
},

You are not doing any aggregation binding at all. Therefore there is no context to retrieve. You are hardcoding 2 items in your items aggregation.
Check this snippet. It shows you multinple things you can do. I hope onw of them is what your are looking for.
JSBIN: https://jsbin.com/kumudufaje/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_plus'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Panel id="myPanel">
</Panel>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(oEvent){
//aggregation binding
var oSelect = new sap.m.Select({
items: {
path: 'order>/options',
template: new sap.ui.core.Item({
key: {
path: 'order>key'
},
text: {
path: 'order>value'
}
})
},
change: this.onSelection1Change.bind(this)
});
this.getView().byId("myPanel").addContent(oSelect);
for(var i=0; i<3; i++){
//hardcoded items
var oSelect2 = new sap.m.Select({
items: [
new sap.ui.core.ListItem({
key: '',
text: ''
}),
new sap.ui.core.ListItem({
key: {path:'order>/Type/' + i + '/DefaultValue'},
text: {path:'order>/Type/' + i + '/DefaultValue'}
}),
],
change: this.onSelection2Change.bind(this)
});
this.getView().byId("myPanel").addContent(oSelect2);
}
},
onSelection1Change(oEvent){
var oContext = oEvent.getSource().getSelectedItem().getBindingContext('order')
console.log(oContext); //This prints the binded context
var oModel = oContext.getModel();
console.log(oModel); //This prints the whole model
var oSelectedEntry = oModel.getProperty(oContext.getPath());
console.log(oSelectedEntry); //This prints the data
},
onSelection2Change(oEvent){
var sKey = oEvent.getSource().getSelectedItem().getKey();
console.log(sKey); //This prints the selected item key
var sValue = oEvent.getSource().getSelectedItem().getKey();
console.log(sValue); //This prints the selected item value
var oKeyBinding = oEvent.getSource().getSelectedItem().getBinding('key')
console.log(oKeyBinding); //This prints the binding of the key property, if any
if(oKeyBinding){
var oModel = oKeyBinding.getModel();
console.log(oModel); // This prints the model binded key property, if any
}
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create some dummy JSON data
var data = {
options: [{
key: '1',
value: 'option 1'
},{
key: '2',
value: 'option 2'
},{
key: '3',
value: 'option 3'
}],
Type:[
{DefaultValue: 'Default Value1'},
{DefaultValue: 'Default Value2'},
{DefaultValue: 'Default Value3'}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(data);
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
myView.setModel(oJSONModel, "order");
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>

oEvent.getSource().getSelectedItem().getBindingContext()
You've got it completely right. Note that oEvent.getSource() points to the sap.m.Select. You need another getSelectedItem() to go to the selected sap.ui.core.Item.

Group Kendo ui chart category axis Date label rounding

On my below Kendo UI chart, I always wanted to show exactly 5 category (X) axis labels (which is achieved).
I have 2 questions (refer attached image for more details),
1) These labels have to be properly rounded in near by hour or 30 minute
2) Tooltip has to be formatted in dd.MM.yy HH:tt
Data for this chart is received dynamically. I cannot use the category axis type as 'Date' as I wanted to show all data points on the graph.
My sample code is available below,
var dataSource=[{"precisionIndex":0,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:16:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.6000000000,"data_5":-3.0000000000},{"precisionIndex":800,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:16:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.6000000000,"data_5":-3.0000000000},{"precisionIndex":1,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:24:50.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-7.8000000000,"data_5":-2.9000000000},{"precisionIndex":3,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:36:00.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-7.4000000000,"data_5":-2.8000000000},{"precisionIndex":4,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:41:34.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.9000000000,"data_4":-7.5000000000,"data_5":-3.0000000000},{"precisionIndex":5,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:47:09.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-7.7000000000,"data_5":-3.1000000000},{"precisionIndex":6,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:52:44.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-8.1000000000,"data_5":-3.1000000000},{"precisionIndex":7,"subPrecisionIndex":0,"measurementDate":"2017-06-07T13:58:18.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-8.3000000000,"data_5":-3.3000000000},{"precisionIndex":8,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:03:53.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-9.0000000000,"data_5":-3.3000000000},{"precisionIndex":9,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:09:28.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-9.1000000000,"data_5":-3.5000000000},{"precisionIndex":10,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:15:02.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.8000000000,"data_4":-9.5000000000,"data_5":-3.8000000000},{"precisionIndex":11,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:20:37.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-9.7000000000,"data_5":-3.7000000000},{"precisionIndex":12,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:26:12.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-9.9000000000,"data_5":-3.8000000000},{"precisionIndex":13,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:31:46.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-10.2000000000,"data_5":-3.9000000000},{"precisionIndex":14,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:37:21.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-10.6000000000,"data_5":-4.3000000000},{"precisionIndex":15,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:42:56.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-11.0000000000,"data_5":-4.5000000000},{"precisionIndex":16,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:48:30.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-11.4000000000,"data_5":-4.3000000000},{"precisionIndex":17,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:54:05.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-11.8000000000,"data_5":-4.8000000000},{"precisionIndex":18,"subPrecisionIndex":0,"measurementDate":"2017-06-07T14:59:40.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.1000000000,"data_5":-5.1000000000},{"precisionIndex":24,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:33:07.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.3000000000,"data_5":-5.5000000000},{"precisionIndex":26,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:44:17.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.2000000000,"data_5":-5.7000000000},{"precisionIndex":27,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:49:51.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.6000000000,"data_4":-12.3000000000,"data_5":-5.7000000000},{"precisionIndex":28,"subPrecisionIndex":0,"measurementDate":"2017-06-07T15:55:26.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.7000000000,"data_4":-12.4000000000,"data_5":-5.8000000000},{"precisionIndex":29,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:01:01.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-13.1000000000,"data_5":-5.9000000000},{"precisionIndex":30,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:06:35.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.5000000000,"data_4":-13.4000000000,"data_5":-6.3000000000},{"precisionIndex":31,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:12:10.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-21.9000000000,"data_4":-13.6000000000,"data_5":-6.7000000000},{"precisionIndex":32,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:17:45.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.0000000000,"data_4":-13.9000000000,"data_5":-6.9000000000},{"precisionIndex":33,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:23:19.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.1000000000,"data_4":-13.7000000000,"data_5":-7.4000000000},{"precisionIndex":34,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:28:54.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.1000000000,"data_4":-14.3000000000,"data_5":-7.9000000000},{"precisionIndex":35,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:34:29.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.3000000000,"data_4":-14.3000000000,"data_5":-8.0000000000},{"precisionIndex":36,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:40:03.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.3000000000,"data_4":-14.4000000000,"data_5":-8.4000000000},{"precisionIndex":37,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:45:38.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-14.8000000000,"data_5":-8.4000000000},{"precisionIndex":38,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:51:13.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-15.0000000000,"data_5":-9.0000000000},{"precisionIndex":39,"subPrecisionIndex":0,"measurementDate":"2017-06-07T16:56:47.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.2000000000,"data_4":-15.2000000000,"data_5":-9.3000000000},{"precisionIndex":40,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:02:22.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.4000000000,"data_4":-15.6000000000,"data_5":-9.6000000000},{"precisionIndex":41,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:07:57.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.5000000000,"data_4":-15.7000000000,"data_5":-10.0000000000},{"precisionIndex":42,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:13:31.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.6000000000,"data_4":-16.1000000000,"data_5":-10.6000000000},{"precisionIndex":43,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:19:06.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.5000000000,"data_4":-16.6000000000,"data_5":-11.5000000000},{"precisionIndex":44,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:24:40.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-16.6000000000,"data_5":-11.7000000000},{"precisionIndex":45,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:30:15.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-16.7000000000,"data_5":-11.8000000000},{"precisionIndex":46,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:35:50.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-16.4000000000,"data_5":-12.0000000000},{"precisionIndex":47,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:41:24.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.2000000000,"data_5":-12.5000000000},{"precisionIndex":48,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:46:59.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.9000000000,"data_4":-17.3000000000,"data_5":-12.6000000000},{"precisionIndex":50,"subPrecisionIndex":0,"measurementDate":"2017-06-07T17:58:08.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-17.4000000000,"data_5":-13.0000000000},{"precisionIndex":52,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:09:18.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.4000000000,"data_5":-12.9000000000},{"precisionIndex":53,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:14:52.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.4000000000,"data_5":-13.0000000000},{"precisionIndex":55,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:26:02.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.7000000000,"data_5":-13.1000000000},{"precisionIndex":57,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:37:11.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.8000000000,"data_4":-17.5000000000,"data_5":-13.1000000000},{"precisionIndex":59,"subPrecisionIndex":0,"measurementDate":"2017-06-07T18:48:20.4","data_1":22.0000000000,"data_2":-22.0000000000,"data_3":-22.7000000000,"data_4":-17.6000000000,"data_5":-13.0000000000}];
$("#chart").kendoChart({
dataSource: dataSource,
seriesDefaults: {
type: "line"
},
series: [
{
field: "data_3",
name: "Profit 2"
},
{
field: "data_4",
name: "Profit 1"
}],
categoryAxis: {
field: "measurementDate",
type:"category",
labels: {
template: function(e){
var val =new Date(e.value);
var label = kendo.toString(val, "dd.MM.yy HH:mm");
return label.split(" ").join("\n");
}
}
},
valueAxis: {
axisCrossingValue: Number.MIN_SAFE_INTEGER
},
tooltip: {
visible: true,
shared: true
},
dataBound: function (e) {
var ds = this.dataSource.data();
var maxDateCategories = 4;
var step = Math.round(ds.length / maxDateCategories);
// display only 'n'th categories on xAxis
this.options.categoryAxis.labels.step = step;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>
<body>
<div id="chart"> </div>
</body>
</html>

For the Tooltip you can use the sharedTemplate to format the category as desired:
sharedTemplate: '<div> #= kendo.toString(new Date(category), "dd.MM.yy HH:mm") # </div># for (var i = 0; i < points.length; i++) { # <div>#: points[i].series.name# : #: points[i].value #</div># } #'
For the label template, add your own rounding logic for the timestamp, e.g.:
labels: {
template: function(e){
var val =new Date(e.value);
var mins = val.getMinutes();
if (mins < 15 ) {
val.setMinutes(0);
} else if (mins < 45) {
val.setMinutes(30);
} else {
val.setHours(val.getHours() + 1);
val.setMinutes(0);
}
var label = kendo.toString(val, "dd.MM.yy HH:mm");
return label.split(" ").join("\n");
}
}
DEMO

How to add "select" in dojo tooltipdialog content programmatically?

I want to display dojo select inside a dijit/TooltipDialog. The items of the dojo select are dynamically loaded. So I want to add this select programmaticaly. The content of TooltipDialog can be an object but select needs a domNode to be held. The code is :
<head>
<script>
require([
"dojo/parser",
"dijit/form/Select",
"dijit/TooltipDialog",
"dojo/on",
"dojo/dom",
"dojo/_base/lang",
"dijit/popup",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){
parser.parse();
var t={mySel:null};
var store = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store });
t.mySel = new Select({
store: os
}, "ttt");
var myTooltipDialog = new TooltipDialog({
content: t,
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){
popup.open({
popup: myTooltipDialog,
orient: ["above-centered","above","below"],
around:dom.byId('mmm')
});
t.mySel.startup();
}));
t.mySel.on("change", function(){
console.log("my value: ", this.get("value"))
})
})
</script>
</head>
<body class="claro">
<div id="ttt" > tttt</div><br>
<div id="mmm" > tttt</div><br>
</body>

You are assignign an object t the tooltip content not a domenode
so try to make these change :
var myTooltipDialog = new TooltipDialog({
content: t.mySel.domNode,
onMouseLeave: function() {
popup.close(myTooltipDialog);
}
}

Not able to bind column data when there is space in json

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>OData Date Table Multiple Sorters</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var airsideTableDataOriginal=
//{"genericTableModel":
[
{"columnId":"col1","WS":"WS 1","Status":0},
{"columnId":"col 2","WS":"WS 2","Status":1},
{"columnId":"col3","WS":"WS 3","Status":2},
{"columnId":"col4","WS":"WS 4","Status":3},
{"columnId":"col5","WS":"WS 5","Status":4},
];
var aColumnData = [{
columnId: "col1"
}, {
columnId: "col 2"
}, {
columnId: "col3"
}, {
columnId: "col4"
}, {
columnId: "col5"
}];
var aData = [{
"col 2": "WS 2",
col3: "WS 3",
col4: "WS 4",
col5: "WS 5"
}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumnData,
rows: aData
});
var oTable = new sap.ui.table.Table({
title: "Table column and data binding",
showNoData : true,
columnHeaderHeight : 10,
visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
var tempJson=airsideTableDataOriginal;
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: new sap.ui.commons.Button({
text : {
path: sColumnId,
formatter: function(value){
if(value!=null){
var specificJson= $.grep(tempJson, function( n, i ) {
return n.columnId === sColumnId.toString() && n.WS === value.toString();
});
if(specificJson[0].Status == 1){
this.setIcon("sap-icon://accept");
this.setStyle(sap.ui.commons.ButtonStyle.Accept);
}
}
if(value === "" || value == undefined){
this.setVisible(false);
}
return value ;
}
},
}),
sortProperty: sColumnId,
filterProperty: sColumnId
});
});
oTable.bindRows("/rows");
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="body" role="application">
<div id="content"></div>
</body>
</html>
As per the above code there is space between col 2 which gives error "col 2" is not a valid ID.. Here is the bin. But when I replace col 2 with col2 it works fine. But in real time I get spaces in data so how to fix it so that it would work with spaces also.

I would guess, that the error comes from the invalid ID of the Column object: id : sColumnId, (the first line after return new sap.ui.table.Column({) and not from the binding.
Like Mark said in his comment Element IDs cannot contain spaces. But the ID is not visible to the User and you can just replace the spaces of the Column.id while assigning or you can skip the id assignment at all to get automaticaly generated ids.

A client who demands spaces in their ID's I would 1) definitely steer clear from, and if that's not possible, 2) educate them that their "requirement" is utter [...]
Nevertheless, I would simply replace the spaces with underscores (it's really simple Javascript):
airsideTableDataOriginal.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aColumnData.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aData.forEach(function(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (~property.indexOf(" ")) {
var newProperty = property.replace(/ /g,"_");
obj[newProperty] = obj[property];
delete obj[property];
}
}
}
});

How to get select's value in jqGrid when using <select> editoptions on a column

I have a couple of columns in jqGrid with edittype="select". How can I read the option value of the value currently selected in a particular row?
e.g.: When I provide the following option, how do I get "FE" for FedEx, etc.
editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }
getRowData() for the rowId/cellname returns only the text/displayed component of the select.
If I set a "change" data event on the column, the underlying fires change events only on mouse clicks, and not keyboard selects (there's numerous references to generic selects and mouse/keyboard issues).
Bottomline, when a new value is selected, I need to know the option value at the time of the change, and also prior to posting to the server.

You have to set the formatter of the column to 'select'
Example from the wiki:
colModel : [ {name:'myname',
edittype:'select', formatter:'select',
editoptions:{value:"1:One;2:Two"}} ...
]
See more here jqgridwiki
I was having the same problem and this worked like a charm

I just solved this question by using setting JqGrid unformat option and use the following function for unformatting cell value.
function Unformat_Select(cellvalue, options, cellobject)
{
var unformatValue = '';
$.each(options.colModel.editoptions.value, function (k, value)
{
if (cellvalue == value)
{
unformatValue = k;
}
});
return unformatValue;
}
The above method will be called everytime when grid need cell data like when you call "getRowData" method. However, my function only support key-paired value edit option. You need to change your data like the following pattern.
editoption:
{
value:
{
FE:'FedEx',
IN:'InTime',
TN:'TNT'
}
}
For more information about unformat option, you can see at the following link.
JqGrid Wiki - Custom Formatter
PS. It's possible to modify my function to support client-side dropdownlist value. But I think it's impossible to apply this function for server-side dropdownlist value.
Update
In the latest jqGrid 3.8.1, I just found some bug when user cancel editing row(or programmatically call "restoreRow" method), jqGrid will create label by using key of data (instead of value of data). I create the following function to fix this issue. For use this, you must it as custom formatter function of this column. This function maps cell value to value of list by comparing key or value.
function JqGridInlineEditor_SelectFormatter(cellvalue, options, rowObject)
{
var temp = '';
$.each(options.colModel.editoptions.value, function (key, value)
{
if (cellvalue == key || cellvalue == value)
{
temp = value;
return false;
}
});
return temp;
}
So, you can send key or value as column data to be rendered by the above custom formatter.

If in case you have requirement where each row has dropdown and it has values like
FE:'FedEx',
IN:'InTime',
TN:'TNT'
Now instead of saving the data to backend on dropdown change event;you want to save data on "Save" button click at row level but want to save dropdwon selected value (TN) not display text(TNT). You can create another hidden field to set selected country code on inline editing of dropdown. Here when user exit after cell inline editing afterSaveCell method will be called and you can set it as mentioned in below code:
<!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>
<title>http://stackoverflow.com/q/9655426/315935</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.min.js"></script>
<script type="text/javascript" src="https://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">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</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[
/*global $ */
/*jslint devel: true, browser: true, plusplus: true, nomen: true, unparam: true */
$(document).ready(function () {
'use strict';
var listOptions = "CN:Canada; US:United States; FR:France; IN:India";
var mydata = [{
name: "Toronto",
country: "CN",
continent: "North America",
countrycode: "CN"
}, {
name: "New York City",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Silicon Valley",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Paris",
country: "FR",
continent: "Europe",
countrycode: "FR"
}, {
name: "Pune",
country: "IN",
continent: "Asia",
countrycode: "IN"
}]
$("#gvManageMapping").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent", "countrycode"],
colModel: [{
name: 'name',
index: 'name',
editable: false,
},
{
name: 'country',
index: 'country',
editable: true, edittype: "select", formatter: 'select', editoptions: {
value: listOptions,
}, editrules: { required: true, integer: false }, formatter: "select"
},
{
name: 'continent',
index: 'continent',
editable: false,
},
{
name: 'countrycode',
index: 'countrycode',
editable: false
}],
afterSaveCell: function (rowid, cellname, value) {
var selectedCountryCode, $this;
if (cellname === 'country') {
$this = $(this);
selectedCountryCode = $this.jqGrid("getCell", rowid, 'country');
$this.jqGrid("setCell", rowid, 'countrycode', selectedCountryCode);
}
},
pager: '#pager',
'cellEdit': true,
'cellsubmit': 'clientArray',
editurl: 'clientArray'
});
});
//]]>
</script>
</head>
<body>
<table id="gvManageMapping"><tr><td /></tr></table>
<div id="pager"></div>
</body>
</html>

The documentation for getRowData states:
Do not use this method when you editing the row or cell. This will return the cell content and not the actuall value of the input element
Is the row still being edited when you call getRowData()?
Update
Agreed, jqGrid does not handle <select> very well. In my application I actually was able to get around this by not specifying an edit option (meaning, key/value were both "FedEx"); the translation to ID is then done on the server. This is not the right way to code this, but it worked well enough for my needs at the time.