How do I set value dynamically to the integerpicker?
First insert a interpicker to your html scene:
<div x-mojo-element="IntegerPicker" id="integerpickerId" class="integerpickerClass" name="integerpickerName"></div>
Then instantiate the picker in the Scene-assistant.js file in the setup function:
MainSceneAssistant.prototype.setup = function() {
this.controller.setupWidget("integerpickerId",
this.attributes = {
label: 'Number',
modelProperty: 'value',
min: 0,
max: 20
},
this.integerPickerModel = {
value: 5
});}
You can than change the picker dynamically by setting the model:
this.integerPickerModel.value = 10;
this.controller.modelChanged(this.integerPickerModel, this);
This works for the most widgets in webos, like pickers and textfields.
Related
I'm working with a Kendo treelist widget, and disappointed to see there's no rowTemplate option as there is on the Kendo grid.
I see a columnTemplate option (i.e. http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template ), but this will affect the entire column.
However, I need to drill into each cell value and set a css color property based on a ratio ( i.e. If value/benchmark < .2, assign <span style='color:red;'> , but my color value is dynamic.
There's a dataBound: and dataBinding: event on the treelist, but I'm still trying to figure out how to intercept each cell value and set the color once I've done my calculation.
var treeOptions = {
dataSource: ds,
columns: colDefs,
selectable: true,
scrollable: true,
resizable: true,
reorderable: true,
height: 320,
change: function (e) {
// push selected dataItem
var selectedRow = this.select();
var row = this.dataItem(selectedRow);
},
dataBound: function (e) {
console.log("dataBinding");
var ds = e.sender.dataSource.data();
var rows = e.sender.table.find("tr");
}
};
and this is where I'm building out the `colDefs' object (column definitions):
function parseHeatMapColumns(data, dimId) {
// Creates the Column Headers of the heatmap treelist.
// typeId=0 is 1st Dimension; typeId=1 is 2nd Dimension
var column = [];
column.push({
"field": "field0",
"title": "Dimension",
headerAttributes: { style: "font-weight:" + 'bold' + ";" },
attributes : { style: "font-weight: bold;" }
});
var colIdx = 1; // start at column 1 to build col headers for the 2nd dimension grouping
_.each(data, function (item) {
if (item.typeId == dimId) {
// Dimension values are duplicated, so push unique values (i.e. trade types may have dupes, whereas a BkgLocation may not).
var found = _.find(column, { field0: item.field0 });
if (found == undefined) {
column.push({
field: "field2",
title: item.field0,
headerAttributes: {
style: "font-weight:" + 'bold'
}
,template: "<span style='color:red;'>#: field2 #</span>"
});
colIdx++;
}
}
});
return column;
}
**** UPDATE ****
In order to embed some logic within the template :
function configureHeatMapColumnDefs(jsonData, cols, model) {
var colDef = '';
var dimId = 0;
var colorProp;
var columns = kendoGridService.parseHeatMapColumns(jsonData, dimId);
// iterate columns and set color property; NB: columns[0] is the left-most "Dimension" column, so we start from i=1.
for (var i = 1; i <= columns.length-1; i++) {
columns[i]['template'] = function (data) {
var color = 'black';
if (data.field2 < 1000) {
color = 'red';
}
else if (data.field2 < 5000) {
color = 'green';
}
return "<span style='color:" + color + ";'>" + data.field2 + "</span>";
};
}
return columns;
}
Advice is appreciated.
Thanks,
Bob
In the databound event you can iterate through the rows. For each row you can get the dataItem associated with it using the dataitem() method (http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem)
Once you have the dataitem, calculate your ration and if the row meets the criteria for color, change the cell DOM element:
dataBound: function (e) {
var that = e.sender;
var rows = e.sender.table.find("tr");
rows.each(function(idx, row){
var dataItem = that.dataItem(row);
var ageCell = $(row).find("td").eq(2);
if (dataItem.Age > 30) {
//mark in red
var ageText = ageCell.text();
ageCell.html('<span style="color:red;">' + ageText + '</span>');
}
}
DEMO
UPDATE: you can also do this with a template:
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
selectable: true,
columns: [
{ field: "Position"},
{ field: "Name" },
{ field: "Age",
template: "# if ( data.Age > 30 ) { #<span style='color:red;'> #= data.Age # </span> #}else{# #= data.Age # #}#"
}
],
});
DEMO
The grid columns may be resizable. I want to store user-adjusted columns width and restore them when the next session starts.
The best way to store columns width I've found is the following:
var element = $('#grid').kendoGrid({
...
resizable: true,
columnResize: function(e) {
var state = {};
this.columns.every(function(c,i) {
state[c.field] = c.width;
return true;
});
var state_txt = JSON.stringify(state);
localStorage['profile_userprofile_grid_column_width'] = state_txt;
}
}
Now I want to restore column width saved in the previous user session. I can read columns width from the storage:
var state = JSON.parse(localStorage['profile_userprofile_grid_column_width']);
Does somebody know some elegant way to apply these values back to the grid if it is already created at this time? The resize handle does it internally, so it is possible, but the code doing it in the grid source is ugly.
You can trigger the columnResize event post initilisation as shown below
function grid_columnResize(e) {
// Put your code in here
console.log(e.column.field, e.newWidth, e.oldWidth);
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
resizable: true
});
var grid = $("#grid").data("kendoGrid");
grid.bind("columnResize", grid_columnResize);
Documentation
This is an old question, but here is what we have. Function handles column widths and groups.
var _updateResultsGridColumns = function(columns, groups) {
var kendoGrid = $resultsGrid.data("kendoGrid");
if (kendoGrid) {
kendoGrid.setOptions({
columns: columns,
});
var dataSource = kendoGrid.dataSource;
dataSource.group(groups);
kendoGrid.setDataSource(dataSource);
}
}
Here's a solution for modifying the tooltip of the kendo-ui slider depending on the value:
var text = [];
text.push("Text 1");
text.push("Text 2");
text.push("Text 3");
text.push("Text 4");
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {
enabled: true,
format: text[0], // min-value text
},
slide: function (e) {
e.sender.options.tooltip.format = text[e.value];
}
});
It' a pitty you can't configure the tooltip as with the tooltip-widget.
You're half way there. Lets say you needed to represent minutes and seconds as if you were editing a video. This example is for using a range slider.
Fiddle: http://jsfiddle.net/KjABb/
var text = [];
var templateString = "#= formatToMinutesSeconds(selectionStart) # - #= formatToMinutesSeconds(selectionEnd) #";
var mediaLength = 229; //03:49
function formatToMinutesSeconds(value) {
return text[value];
}
var i = 0;
while (i <= mediaLength) {
var date = new Date(null);
date.setSeconds(i);
var minutesSeconds = kendo.toString(date, "mm:ss");
text.push(minutesSeconds);
i++;
}
$("#clip-editor-slider").kendoRangeSlider({
min: 0,
max: mediaLength,
smallStep: 1,
largeStep: 60,
tickPlacement: "both",
tooltip: {
template: kendo.template(templateString)
}
});
Keep a local variable called _sliderValue. This is an arbitrary name. Call it what you want. In the slider "slide" event handler, set _sliderValue to e.value. Your tooltip template can then access the value stored in the local variable.
var _sliderValue = 0;
var template = kendo.template($("#sliderTemplate").html());
//$("#slider").load(function() {
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {template: template},
slide: function (e) {
_sliderValue = e.value;
}
});
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script id="sliderTemplate" type="text/x-kendo-tmpl">
<div>Text #= _sliderValue #</div>
</script>
<div id="slider"></div>
I have two Extjs Comboboxes
var cb1 = new Ext.form.ComboBox({
fieldLabel: 'Combobox1',
width: 100,
listeners:{
scope: this,
'select': this.reset
}
});
var cb2 = new Ext.form.ComboBox({
fieldLabel: 'Combobox2',
width: 100,
baseParams: { loadInitial: true, cb1Val: this.cb1.getValue() } // Here I want to get selected value of cb1
listeners:{
scope: this,
'select': this.reset
}
});
I am using this.cb1.getValue() to get selected value of cb1 but I am getting blank value here.
Can anyone tell me what I am doing wrong here.
I think combo 2 is not able to get value of combo 1 as its not loaded while you are calling its value in baseParams. I would recommend this approach in your case -
var cb1 = new Ext.form.ComboBox({
fieldLabel: 'Combobox1',
width: 100,
**id : "combo_1",** // ID property added
listeners:{
scope: this,
'select': this.reset
} });
// Previous code
...
listeners : {
select : function(combo, rec, rind) {
var combo2_val = Ext.getCmp("id_of_combo_1").getValue();
}
Here, on the select renderer of second combo, the value of first should be set in combo2_val. To be more precise, you can also set default value for combo 1. Instead of using ID, you can directly use variable cb1 directly.
Hope this should give you a way.
I'm trying to call a function on the parent page from a popup window. I keep getting the error Object doesn't support property or method 'GetValueFromChild'. I believe the error is on this line in the popup window -
window.top.opener.parent.Xrm.Page.GetValueFromChild(person);. I tried using window.opener.GetValueFromChild(person); but still get the same error. Any help is much appreciated. Here's the code -
//parent
$(document).ready(function () {
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
});
//parent - jqgrid
colModel: [
{
name: 'Person', index: 'PersonName', width: 70, editable: true, edittype: 'button',
editoptions: {
value: 'Select',
dataEvents: [{
type: 'click',
fn: function (elem) {
var left = (screen.width / 2) - (700 / 2);
var top = (screen.height / 2) - (550 / 2);
var popup = window.open("popup.htm", "popup", "resizable=1,copyhistory=0,menubar=0,width=700,height=550,left='+left+',top='+top");
popup.focus();
}
}]
}
},
//popup window. this page has another jqgrid and an OK button.
$('#btnOK').click(function() {
var person= {
Id: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Id'),
Name: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Name'),
Market: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Market')
};
window.top.opener.parent.Xrm.Page.GetValueFromChild(person); //Error is on this line.
window.close();
});
Your GetValueFromChild is scoped to your ready callback. If it doesn't need to access other scoped functions and variables then simply declare it at the top level instead. If it does need to access them, you need to create a global reference to it in your callback.
Declare at top level:
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
Export from scope:
$(document).ready(function () {
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
window.GetValueFromChild = GetValueFromChild;
});