[tranenParticipant]

Hi,

My localdata are like this. They have an ID to identify in which group they belongs:

var Branddata = ‘[{“ID”: 1, “brand”: “browser”},{“ID”: 2, “brand”: “OS”}]’;
var Modeldata = ‘[{“ID”: 1, “Model”: “chrome”},{“ID”: 1, “Model”: “opera”},{“ID”: 2, “Model”: “windows 10”},{“ID”: 2, “Model”: “linux”}]’;

is its not possible that the dataAdapters check the ID? For example I select ID = 1 so the second dropdownlist will only show the data with an ID = 1

So if I choose “browser”, it only show “chrome”, “opera”?

Thanks

[tranenParticipant]

Hi,

My code follow the example but doesn’t work.
Is it the array data the problem? I don’t use php so I don’t get the data the same way as the example.
If use local data how it should be written?

Thanks

[tranenParticipant]

Thanks ivailo,

I try your code and it works for me as well. I guess my code before must have something wrong somewhere.
Thank you for your help!

[tranenParticipant]

I did some testing and see that i got the error if i use the edit button.
I show my code with and without.
First without the edit function:

      var source =
                {
                    localData: data,
                    dataType: "json",
                    dataFields:
                    [
                        { name: 'time', type: 'string' },
                        { name: 'value', type: 'number' },
                        { name: 'status', type: 'string' },
                    ]

                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#table").jqxDataTable(
                 {
                     width: '100%',
                     pageable: false,
                     editable: true,
                     showToolbar: true,
                     height: 400,
                     source: dataAdapter,
                     columnsResize: false,
                     columns: [
                       { text: 'Date & Time', editable: false, dataField: 'time', width: '20%' },
                       { text: 'Value', dataField: 'value', width: '20%' },
                       {text: 'Status', dataField: 'status', width: '20%'},
                     ]
                
                 });
                $("#jqxbutton").jqxButton({
                    height: 30
                });

                $('#jqxbutton').click(function () {
                    var value = $("#table").jqxDataTable('getCellValue', 0, 'value');
                    value = value * 2;
                    console.log(value);
                    $("#table").jqxDataTable('setCellValue', 0, 'value', value);
                });

With this code there is no error.

Now I put the edit function:

 var source =
                {
                    localData: data,
                    dataType: "json",
                    dataFields:
                    [
                        { name: 'time', type: 'string' },
                        { name: 'value', type: 'number' },
                        { name: 'status', type: 'string' }
                    ],
                    updateRow: function (rowID, rowData, commit) {
                        commit(true);
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#table").jqxDataTable(
                 {
                     width: '100%',
                     pageable: false,
                     editable: true,
                     showToolbar: true,
                     height: 400,
                     source: dataAdapter,
                     ready: function () {
                     },
                     renderToolbar: function(toolBar)
                     {
                         var toTheme = function (className) {
                             return className;
                         }
                         // appends buttons to the status bar.
                         var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
                         var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
                         var editButton = $(buttonTemplate);
                         var cancelButton = $(buttonTemplate);
                         var updateButton = $(buttonTemplate);
                         container.append(editButton);
                         container.append(cancelButton);
                         container.append(updateButton);
                         toolBar.append(container);
                         editButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         editButton.find('div:first').addClass(toTheme('jqx-icon-edit'));
                         editButton.jqxTooltip({ position: 'bottom', content: "Edit"});
                         updateButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         updateButton.find('div:first').addClass(toTheme('jqx-icon-save'));
                         updateButton.jqxTooltip({ position: 'bottom', content: "Save Changes"});
                         cancelButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false,  height: 25, width: 25 });
                         cancelButton.find('div:first').addClass(toTheme('jqx-icon-cancel'));
                         cancelButton.jqxTooltip({ position: 'bottom', content: "Cancel"});
                         var updateButtons = function (action) {
                             switch (action) {
                                 case "Select":
                                     editButton.jqxButton({ disabled: false });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                                 case "Unselect":
                                     editButton.jqxButton({ disabled: true });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                                 case "Edit":
                                     editButton.jqxButton({ disabled: true });
                                     cancelButton.jqxButton({ disabled: false });
                                     updateButton.jqxButton({ disabled: false });
                                     break;
                                 case "End Edit":
                                     editButton.jqxButton({ disabled: false });
                                     cancelButton.jqxButton({ disabled: true });
                                     updateButton.jqxButton({ disabled: true });
                                     break;
                             }
                         }
                         var rowIndex = null;
                         $("#table").on('rowSelect', function (event) {
                             var args = event.args;
                             rowIndex = args.index;
                             updateButtons('Select');
                         });
                         $("#table").on('rowUnselect', function (event) {
                             updateButtons('Unselect');
                         });
                         $("#table").on('rowEndEdit', function (event) {
                             updateButtons('End Edit');
                         });
                         $("#table").on('rowBeginEdit', function (event) {
                             updateButtons('Edit');
                         });
                         cancelButton.click(function (event) {
                             if (!cancelButton.jqxButton('disabled')) {
                                 // cancel changes.
                                 $("#table").jqxDataTable('endRowEdit', rowIndex, true);
                             }
                         });
                         updateButton.click(function (event) {
                             if (!updateButton.jqxButton('disabled')) {
                                 // save changes.
                                 $("#table").jqxDataTable('endRowEdit', rowIndex, false);
                             }
                         });
                         editButton.click(function () {
                             if (!editButton.jqxButton('disabled')) {
                                 $("#table").jqxDataTable('beginRowEdit', rowIndex);
                                 updateButtons('edit');
                             }
                         });
                     },
                     columnsResize: false,
                     columns: [
                       { text: 'Date & Time', editable: false, dataField: 'time', width: '20%' },
                       { text: 'Value', cellsFormat: 'f', dataField: 'value', width: '20%' },
                       {text: 'Status', dataField: 'status', width: '20%',
                           columnType: 'custom',
                           createEditor: function (row, cellvalue, editor, width) {
                               var source = ["VAL", "NVE", "VED", "ESD"];
                               editor.jqxDropDownList({ source: source, displayMember: 'status', valueMember: 'status', width: width, height: '25px', dropDownHeight: 100, autoOpen: true });
                            },
                            initEditor: function (row, cellvalue, editor, celltext, width) {
                                editor.jqxDropDownList({ width: width, height: '25px' });
                                editor.val(cellvalue);
                            },
                            getEditorValue: function (row, cellvalue, editor) {
                                return editor.val();
                            }}
                     ]
                
                 });
                $("#jqxbutton").jqxButton({
                    height: 30
                });

                $('#jqxbutton').click(function () {
                    var value = $("#table").jqxDataTable('getCellValue', 0, 'value');
                    value = value * 2;
                    console.log(value);
                    $("#table").jqxDataTable('setCellValue', 0, 'value', value);
                });

With this code I got the error I describe before.
is there a way I can make it works with both function?
Thanks

[tranenParticipant]

Thanks ivailo,

I try with one value now I get the value and want to set value but it will only change the value if i click on the row and I got an error
here is the part of code I use:

` $(“#jqxbutton”).jqxButton({
theme: ‘energyblue’,
height: 30
});

$(‘#jqxbutton’).click(function () {
var value = $(“#table”).jqxDataTable(‘getCellValue’, 0, ‘value’);
value = value * 2;
console.log(value);
$(“#table”).jqxDataTable(‘setCellValue’, 0, ‘value’, value);
});

and here the error: Uncaught ReferenceError: sync is not defined jqx-all.js:7

[tranenParticipant]

Hi ivailo,

Thanks for the answer but if i update the data source it will update all the table so why i need to use the ‘updateBoundData’?

[tranenParticipant]

Hi,

Thanks for your answer, I change for the refresh.
I already look the other links before but I am still not able to solve any of my problems.

[tranenParticipant]

Hi

yes I saw this before but I have the color in the datafield name ‘Color” so I would like to know how I can call it in this line:

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘#ffff00’, ‘#ff0000’, ‘#ccff00’, ‘#00ffff’, ‘#aaaaaa’] });

because when I try:

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘Color’] });

it didn’t work.

Thanks

[tranenParticipant]

Hi

Yes I do this too but still doesn’t work.
Even if I apply a fix color like color: ‘#ffffff’ I will get the default color but not the one I want.

Do you know why?

Thanks!

[tranenParticipant]

Hi

Thanks for the answer, I look it but it doesn’t work in my case.
I use the pie chart and my code looks like this

var source =
			{
				datatype: "json",
				datafields: [
					{ name: 'Quantity'},
					{ name: 'NameHour'},
					{ name: 'Color'},				
				],
				url: 'chart.php'
			};		
				
			var dataAdapter = new $.jqx.dataAdapter(source,
			{
				autoBind: true,
				async: false,
				downloadComplete: function () { },
				loadComplete: function () { },
				loadError: function () { }
			});
			var settings = {
				title: "Name",
				description: '',
				enableAnimations: true,
				showLegend: true,
				showBorderLine: false,
				legendLayout: { left: 5, top: 140, width: 200, height: 200, flow: 'vertical' },
				padding: { left: 5, top: 5, right: 5, bottom: 5 },
				titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
				source: dataAdapter,  
				seriesGroups:
				[
					{
						type: 'pie',
						showLabels: false,	
							series:
							[
								{ 
								dataField: 'Quantity',
								displayText: 'NameHour',						
								labelRadius: 120,
								initialAngle: 15,
								radius: 95,
								centerOffset: 0,
								color: 'Color',
								},
							]								
					}
				]
			};	
			$('#jqxChart').jqxChart(settings);

[tranenParticipant]

Thanks, for the reply, I saw this previous post but in my case I can’t reordering the data because they are random and change very often.

[Author]

Posts