jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

NumberInput in TreeGrid Posts
December 18, 2014 at 1:19 pm NumberInput in TreeGrid #64411

Sairam
Participant

Hi,

I have number input control inside a tree grid, though it has problems with spin buttons it still works in IE/Chrome while in Android (emulator and device) the values of the control once changed does retain or reflect, it swithes back to the original value. I have checked it on a JQX demo file and found the same behaviour. Posted the sample code below. Kindly help.

`<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=10″ />
<title id=’Description’>
</title>

<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”JQFiles/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />

<script type=”text/javascript” src=”JQFiles/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtreegrid.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”JQFiles/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript”>
function getTextElementByColor(color) {
if (color == ‘transparent’ || color.hex == “”) {
return $(“<div style=’text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;’>transparent</div>”);
}

var element = $(“<div style=’text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;’>#” + color.hex + “</div>”);
var nThreshold = 105;
var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
var foreColor = (255 – bgDelta < nThreshold) ? ‘Black’ : ‘White’;
element.css(‘color’, foreColor);
element.css(‘background’, “#” + color.hex);
element.addClass(‘jqx-rc-all’);
return element;
}

$(document).ready(function () {
var data = [
{
“property”: “Name”, “value”: “jqxTreeGrid”, type: “string”
},
{
“property”: “Location”, “value”: “0, 0”, type: “string”, children: [{ “property”: “X”, “value”: “0”, type: “number” }, { “property”: “Y”, “value”: “0”, type: “number”}]
},
{
“property”: “Size”, “value”: “200, 200”, type: “string”, children: [{ “property”: “Width”, “value”: “200”, type: “number” }, { “property”: “Height”, “value”: “200”, type: “number”}]
},
{
“property”: “Background”, “value”: “#4621BC”, type: “color”
},
{
“property”: “Color”, “value”: “#B1B11B”, type: “color”
},
{
“property”: “Alignment”, “value”: “Left”, type: “align”
},
{
“property”: “Enabled”, “value”: “true”, type: “bool”
}
];

var source =
{
dataType: “json”,
dataFields: [
{ name: “property”, type: “string” },
{ name: “value”, type: “string” },
{ name: “type”, type: “string” },
{ name: “children”, type: “array” }
],
hierarchy:
{
root: “children”
},
localData: data
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {

}
});

$(“#treeGrid”).on(‘cellValueChanged’, function (event) {
// Update the Location and Size properties and their nested properties.
var args = event.args;
var row = args.row;
var records = row.records;
// update the nested properties when a parent value is changed.
if (records.length > 0) {
var values = args.value.split(‘,’);
for (var i = 0; i < values.length; i++) {
var value = $.trim(values[i]);
var rowKey = $(“#treeGrid”).jqxTreeGrid(‘getKey’, records[i]);
$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, rowKey, ‘value’, value);
}
}
// update the parent value when the user changes a nested property,
else if (row.level == 1) {
var parent = row.parent;
var parentRowKey = $(“#treeGrid”).jqxTreeGrid(‘getKey’, parent);
var value = “”;
var records = parent.records;
if (records.length > 0) {
for (var i = 0; i < records.length; i++) {
var rowKey = $(“#treeGrid”).jqxTreeGrid(‘getKey’, records[i]);
var cellValue = $(“#treeGrid”).jqxTreeGrid(‘getCellValue’, rowKey, ‘value’);
value += cellValue;
if (i < records.length – 1) {
value += “, “;
}
}
}

$(“#treeGrid”).jqxTreeGrid(‘setCellValue’, parentRowKey, ‘value’, value);
}
});

$(“#treeGrid”).jqxTreeGrid(
{
source: dataAdapter,
altrows: true,
autoRowHeight: false,
editSettings: { saveOnPageChange: true, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editOnF2: true },
editable: true,
columns: [
{ text: ‘Property Name’, editable: false, columnType: ‘none’, dataField: ‘property’, width: 200 },
{
text: ‘Value’, dataField: ‘value’, width: 230, columnType: “custom”,
// creates an editor depending on the “type” value.
createEditor: function (rowKey, cellvalue, editor, cellText, width, height) {
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’, rowKey);
switch (row[“type”]) {
case “string”:
case “number”:
var input = $(“<div class=’textbox’ style=’border: 1;’></div>”).appendTo(editor);
input.jqxNumberInput({ width: ‘250px’, height: ’25px’, spinButtons: true });
break;
case “align”:
var dropDownList = $(“<div class=’dropDownList’ style=’border: none;’></div>”).appendTo(editor);
dropDownList.jqxDropDownList({ width: ‘100%’, height: ‘100%’, autoDropDownHeight: true, source: [“Left”, “Center”, “Right”] });
break;
case “color”:
var dropDownButton = $(“<div style=’border: none;’><div style=’padding: 5px;’><div class=’colorPicker” + rowKey + “‘></div></div></div>”);
dropDownButton.appendTo(editor);
dropDownButton.jqxDropDownButton({ width: ‘100%’, height: ‘100%’ });
var colorPicker = $($.find(“.colorPicker” + rowKey));
colorPicker.jqxColorPicker({ width: 220, height: 220 });
colorPicker.on(‘colorchange’, function (event) {
dropDownButton.jqxDropDownButton(‘setContent’, getTextElementByColor(event.args.color));
});
dropDownButton.jqxDropDownButton(‘setContent’, getTextElementByColor(new $.jqx.color({ hex: “ffaabb” })));
break;
case “bool”:
var checkbox = $(“<div style=’margin-top: 6px; margin-left: -8px; left: 50%; position: relative;’ class=’checkbox’/>”).appendTo(editor);
checkbox.jqxCheckBox({ checked: cellvalue });
break;
}
},
// updates the editor’s value.
initEditor: function (rowKey, cellvalue, editor, celltext, width, height) {
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’, rowKey);
switch (row.type) {
case “string”:
case “number”:
//$(editor.find(‘.textbox’)).jqxNumberInput(‘val’, cellvalue);
$(editor.find(‘.textbox’)).val(cellvalue);
break;
case “align”:
$(editor.find(‘.dropDownList’)).val(cellvalue);
break;
case “color”:
$($.find(‘.colorPicker’ + rowKey)).val(cellvalue);
break;
case “bool”:
$(editor.find(‘.checkbox’)).val(cellvalue);
break;
}
},
// returns the value of the custom editor.
getEditorValue: function (rowKey, cellvalue, editor) {
var row = $(“#treeGrid”).jqxTreeGrid(‘getRow’, rowKey);

switch (row.type) {
case “string”:
return $(editor.find(‘.textbox’)).val();
case “number”:
//var number = parseFloat($(editor.find(‘.textbox’)).jqxNumberInput(‘val’));
var number = parseFloat($(editor.find(‘.textbox’)).val());
if (isNaN(number)) {
return 0;
}
else return number;
case “align”:
return $(editor.find(‘.dropDownList’)).val();
case “color”:
return $($.find(‘.colorPicker’ + rowKey)).val();
case “bool”:
return $(editor.find(‘.checkbox’)).val();
}
return “”;
}
}
]
});
});
</script>
</head>
<body class=’default’>
<div id=”treeGrid”></div>
</body>
</html>

December 18, 2014 at 3:54 pm NumberInput in TreeGrid #64420

Peter Stoev
Keymaster

Hello Sairam,

The NumberInput widgets works OK in Android. The code your posting is about CUSTOM Editor displayed inside a Grid Cell. It is custom because it is not part of the Supported List of Editors about this Widget and may require Additional Modifications in your Code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.