[jqWizardParticipant]

Thank you for the quick reply. Will it be supported in future versions?

[jqWizardParticipant]

I’ve solved it! For sending request headers I had to use custom AJAX call using “loadServerData”.

Here’s the code for source and data adapter:

var source = {
	datatype	: 'json',
	cache: true,
	datafields	: [
		{ name: 'desc' },
		{ name: 'code'}
	],
	url	: 'localhost:8081/SearchTestREST/search' 
};
var dataAdapter = new jQuery.jqx.dataAdapter(source, {
	loadServerData: function (serverdata, source, callback) {
		jQuery.ajax({
			type		: 'GET',
			url			: source.url,
			headers		: {
				token: 'advdf3434f23erwefd2332das'
			},
			data		: serverdata,
			dataType	: source.datatype,
			contentType	: 'application/json',
			success	: function (data) {
				// VERY IMPORTANT: send the loaded records to the jqxDataAdapter plug-in.
				// if you do not call function callback then your result list will be empty
				callback({
					records: data.myData
				});
			}
		});
	},
	formatData: function (data) {
		var inputTxt = jQuery('#inputTest').jqxComboBox('searchString');
		if (inputTxt != undefined) {
			return {
				text: inputTxt
			};
		}
	}
});

[jqWizardParticipant]

Thank you Peter. Your solution has solved my problem with URL but I have one issue left. How can I include request header into the URL? Is it possible using source and data adapter or do I have to use “loadServerData” for creating custom ajax call?

[jqWizardParticipant]

I think you can lock out portions of a page and if you want to ignore some other AJAX calls you can set their property global to false (default is true). More here.

[jqWizardParticipant]

I’m not sure if it’s possible to solve this with jqWidgets (maybe setting property async=true). I’m planning to implement the same functionality and on google I found these two links:
Show “Loading image” while page is loading
jQuery “Please Wait, Loading…” animation?

[jqWizardParticipant]

I would recommend the opposite approach. Using ctrl+del and ctrl+backspace keyboard combinations to reset the edited date part to its minimum value and using keys del and backspace to set null Date. I think most users would expect such behaviour.

[jqWizardParticipant]

I’m using jqWidgets v2.1 and not v2.0.

With your code html table is not updated and if I change value for column “Some text” into “test”, the value in a cell becomes an array of characters (text: [0: “t”, 1: “e”, 2: “s”, 3: “t”]) instead of string (text: “test”).

Then I tried with mapping for rowdata and changes are visible in the html table but inside the jqxGrid I see only text “function c(){if(0” and not the actual values like date, “test”, etc.


updaterow: function(row, rowdata) {
var observableArray = self.myData.arrayA;
observableArray.replace(observableArray()[row], ko.mapping.fromJS(rowdata));
}


Is this a problem with the v2.1 or is it something else?

[jqWizardParticipant]

I forgot to mention, I’m using:
– jQuery 1.7.2
– jqWidgets 2.0
– Knockout 2.1.0
– Knockout mapping plugin 2.1.2
– Chrome v19


***************************************
* JSON data I receive from the server *
***************************************

{
"objectA": {
"date": "08.04.2009",
"year": 2008,
"code": 0,
"name": "John",
"surname": "Doe",
"note": null
},
"arrayA": [{
"dateFrom": "07.03.2008",
"dateTo": "07.06.2008",
"duration": null,
"text": null,
"code": 633,
"currency": 70.5
}],
"arrayB": [{
"number1": 56,
"numberText1": null,
"number2": 2006,
"numberText2": null
}],
"arrayC": [{
"dateFrom": "07.01.2008",
"dateTo": "07.03.2008",
"duration": 361,
"text": null,
"code": 233,
"currency": 3670.5
}],
"arrayD": [],
"arrayE": [],
"arrayF": [],
"myCode": null
}

*******
* jsp *
*******

<div id="gridTest"></div>
<table>
<thead>
<tr>
<th>Date from</th>
<th>Date to</th>
</tr>
</thead>
<tbody data-bind="foreach: myData.arrayA">
<tr>
<td><span data-bind="text: dateFrom"></span></td> <!-- knockout not updating when I change the value in jqxGrid -->
<td><span data-bind="text: dateTo"></span></td> <!-- knockout not updating when I change the value in jqxGrid -->
</tr>
</tbody>
</table>

**************
* javascript *
**************
// on ready
jQuery(document).ready(function() {
try {
var self = this,
request = null;

// initial data load
request = jQuery.ajax({
url : URL + '/dataFromServer/' + id,
headers : {
guid: GUID
},
async : false,
success : function(data) {
self.data = data; // JSON is defined at the top of the reply
},
error: function (xhr, textStatus, errorThrown) {
showMessage(errorThrown);
}
});

request.done(function() {
// initialize
self.model = new GridViewModel(self.data);

// load
self.model.displayGridData();

ko.applyBindings(self.model);
});

request.fail(function() {
// initialize
self.model = new GridViewModel(self.data);

ko.applyBindings(self.model);
});
} catch (e) {
alert('Error[ready, ' + e.name + ']: ' + e.message);
}
});

// viewModel
var GridViewModel = function(data) {
var self = this,
source = {},
dataAdapter = null;

if (data) {
self.myData = ko.mapping.fromJS(data); // 1) if I only use this then jqxGrid displays "function c() ..." instead of data

// 2) if I unmap arrays and redefined them as observableArray then jqxGrid displays data ok - is there any better way for mapping?
self.myData.arrayA = ko.observableArray(ko.mapping.toJS(data.arrayA));
self.myData.arrayB = ko.observableArray(ko.mapping.toJS(data.arrayB));
self.myData.arrayC = ko.observableArray(ko.mapping.toJS(data.arrayC));
self.myData.arrayD = ko.observableArray(ko.mapping.toJS(data.arrayD));
self.myData.arrayE = ko.observableArray(ko.mapping.toJS(data.arrayE));
self.myData.arrayF = ko.observableArray(ko.mapping.toJS(data.arrayF));
}

this.loadData = function(theme) {
source = {
localdata: self.myData.arrayA,
datatype: 'local'
};
dataAdapter = new jQuery.jqx.dataAdapter(source);

// grid
jQuery('#gridTest').jqxGrid({
width : 885,
source : dataAdapter,
pageable : true,
autoheight : true,
editable : true,
selectionmode : 'singlecell',
pagesize : 5,
pagesizeoptions : ['5', '10'],
columns: [{
text : 'Date from',
datafield : 'dateFrom',
width : 110,
columntype : 'datetimeinput',
cellsformat : 'dd.MM.yyyy',
initeditor : function (row, cellvalue, editor) {
editor.jqxDateTimeInput({
culture : 'sl-SI',
showDelay : 0,
hideDelay : 0
});
}
}, {
text : 'Date to',
datafield : 'dateTo',
width : 110,
columntype : 'datetimeinput'
}, {
text : 'Duration',
datafield : 'duration',
width : 120
}, {
text : 'Some text',
datafield : 'text',
width : 140
}, {
text : 'Code',
datafield : 'code',
width : 90,
cellsalign : 'right'
}, {
text : 'Currency',
datafield : 'currency',
width : 170,
cellsalign : 'right'
}]
});
};
}

[jqWizardParticipant]

Thank you for the solution.

[jqWizardParticipant]

Any estimates when will it be possible?

[jqWizardParticipant]

When I delete (using key backspace or del) value in jqxDateTimeInput widget it resets to min value. Is it possible to delete so the widget has no value(null or ”)?

[jqWizardParticipant]

Thank you for the solution

[jqWizardParticipant]

Yes, you’re right but jqxDateTimeInput (based on <div>) as a separate input field is not working with knockout. That’s why I use jQuery datepicker (based on <input>).

[jqWizardParticipant]

I’ve just managed to fix the problem.

jQuery(document).ready(function() {
// we must destroy current datepicker, otherwise we will create datepicker on datepicker on datepicker etc.
jQuery(“#MyGrid”).bind(‘cellendedit’, function (event) {
if (args.datafield === ‘dateFrom’) {
jQuery(‘#textboxeditorMyGriddateFrom’).datepicker(‘destroy’);
}
});

jQuery(‘#MyGrid’).jqxGrid({
width : 350,
source : source,
pageable : true,
autoheight : true,
editable : true,
editmode : ‘selectedcell’,
selectionmode : ‘singlecell’,
pagesize : 5,
pagesizeoptions : [‘5′, ’10’],
columns: [{
text : ‘Date from’,
datafield : ‘dateFrom’,
width : 110,
cellsalign : ‘right’,
initeditor: function (row, cellvalue, editor) { // editor is array !!
jQuery(editor[0]).datepicker(); // initializing jQuery datepicker
}
}]
});
}

Peter, now you can add jQuery datepicker to the list of available editors for inline cell editing

[jqWizardParticipant]

I’ve noticed the same behaviour. When I finish editing text value in a cell it converts into {‘a’,’r’,’r’,’a’,’y’,’ ‘,’o’,’f’,’ ‘,’c’,’h’,’a’,’r’,’a’,’c’,’t’,’e’,’r’,’s’). Anyone has the solution for this?

[Author]

Posts