[damcParticipant]

Hi,

Thanks. I will try.

I have multiple jqxdropdownlist on page and if user opens one and select another drop-down, first stays open (NOT OK). If user select input field it closes (OK). Is this normally that it works like I write it?

Thank you for your help.

[damcParticipant]

Hi Dimitar,

Is it possible to have multiple validators widgets on page (form)? I will use one validator widget with margin property for these two fields with image element and another validator widget withouth margin property for other fields.

Thank you.

[damcParticipant]

Hello Dimitar,

I set the margin property and it works.

I have another problem:
I have multiple elements (rules) on page which I validate. Can I set the _margin property for only two elements – rules (this two elements have element image) and other have default margin.

Thank you.

[damcParticipant]

Hi.

I still have the problem with setting grid cell border color and title depending on the value of another cell.

Can you help me?

[damcParticipant]

Hi!

I’m struggling with this problem for a couple of days now. Please help me solve this problem.

If I change value in cell – for example in column test into “abc” then ‘updaterow’ function updates cell value into array of characters String { 0=”a”, 1=”b”, 2=”c”} instead of “abc”. Grid shows value as string “abc” – it’s OK. But if I write it in console or display JSON before post it to server it is an array of characters String { 0=”a”, 1=”b”, 2=”c”} . I watch on debug parameter ‘rowdata’ value and there is also for column test value an array of characters String { 0=”a”, 1=”b”, 2=”c”} .

updaterow: function (row, rowdata) {
var record = self.myData.arrayA()[row];
for(var obj in record)
{
record[obj] = ko.observable(rowdata[obj]);
}
console.log(self.myData.arrayA()[row].text()); // String { 0=”a”, 1=”b”, 2=”c”}.
}

Thank you for your help.

[damcParticipant]

Hi Peter,

Thanks for code for update observables. It works fine.

I have another problem.
If I change value in cell – for example in column test into “abc” then ‘updaterow’ function updates cell value into array of characters String { 0=”a”, 1=”b”, 2=”c”} instead of “abc”. Grid shows value as string “abc” – it’s OK. But if I write it in console or display JSON before post it to server it is an array of characters String { 0=”a”, 1=”b”, 2=”c”} . I watch on debug parameter ‘rowdata’ value and there is also for column test value an array of characters String { 0=”a”, 1=”b”, 2=”c”} .


updaterow: function (row, rowdata) {
var record = self.myData.arrayA()[row];
for(var obj in record)
{
record[obj] = ko.observable(rowdata[obj]);
}
console.log(self.myData.arrayA()[row].text()); // (text: [0: "a", 1: "b", 2: "c", 3: "d"]).
}


Thank you for your help.

[damcParticipant]

Hi Peter,

Thank you four your answer, it is helpful.

But I still have problems to manually update data in cell and that the properties remains observable. I am using knockout mapping plugin to map fetched data into a view model with the observables. If I test arrayA properties before I edit value in grid, they are observable. As soon as I change the value in cell – when the updaterow callback function is called, properties are no longer observable.
I don’t know how to solve updaterow function that properties in array remain observable.

My code:

$(document).ready(function () {
var theme = getTheme();

var data =
{
"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": "abc",
"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
};

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

if (data) {
self.myData = ko.mapping.fromJS(data);
}

this.loadData = function (theme) {
source = {
localdata: self.myData.arrayA,
datatype: 'local',
updaterow: function (row, rowdata) {
var observableArray = self.myData.arrayA;
observableArray.replace(observableArray()[row], rowdata);
}
};
dataAdapter = new jQuery.jqx.dataAdapter(source);

// grid
$('#jqxgrid').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) {

}
}, {
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'
}]
});
};
}
self.model = new GridViewModel(self.data);
self.model.loadData();
ko.applyBindings(self.model);
});

[damcParticipant]

Hi Peter,

I need your help. I have two questions.

1. I use your code from post to update row, when a cell is edited in jqxGrid. My complete code is the same like yours (code you posted on June 3, 2012 at 2:56 pm #4552). I have a problem, when I manually edit the data in cell and update it, all the data properties becomes not observable (ko.isObservable(self.myData.arrayA()[0].Code)) returns false). If data in grid cells are not modified, properties are observable (ko.isObservable(self.myData.arrayA()[0].Code)) returns true).

2. I have save function where I post data to the server. Function save returns new data. Problem is that jqxGrid is not responding to changes in model (new data).

My code:

this.save = function() {
jQuery.ajax({
url : URL + '/myData,
type : 'POST',
async : false,
data : JSON.stringify(ko.mapping.toJS(self.myData)),
contentType : 'application/json',
dataType : 'json',
success : function(data) {
ko.mapping.fromJS(data, self.myData);
},
error : function (xhr, text, errorThrown) {
// code
}
});
};

Thank you for your help and time.

[damcParticipant]

Hi!

I tried to use your code to update a value with code. If I use sample posted here it works. But if I use this code in fuction addRow, does not work. It updates value in jqxGrid but not in knockout separate HTML table. Did I miss something?

My code:

this.loadData = function (theme) {
source = {
localdata: self.myData.arrayA,
datatype: 'local',
addrow: function (row, rowdata) {
var observableArray = self.myData.arrayA;
observableArray.push( {dateFrom: null, dateTo:null, duration:null, text: null, code:null, currency:null} );
}
updaterow: function (row, rowdata) {
var observableArray = self.myData.arrayA;
observableArray.replace(observableArray()[row], rowdata);
}
};
dataAdapter = new jQuery.jqx.dataAdapter(source);

// grid
$('#jqxgrid').jqxGrid({
width: 885,.......
............
............
});

this.addRow = function() {
var datarow = {},
paginginformation = null,
pagescount = -1,
item = self.model.myData.arrayA()[0];
item.text = "My New Text";
self.model.myData.arrayA.replace(self.model.myData.arrayA()[0], item);
$('#jqxgrid').jqxGrid('addrow', null, datarow);
paginginformation = $('#jqxgrid').jqxGrid('getpaginginformation');
pagescount = paginginformation.pagescount;
$('#jqxgrid').jqxGrid('gotopage', pagescount);
};

Thank you for your help.

[damcParticipant]

Hi!

I’m using this code that you posted here and jqWidgets v2.2.

When I double click on the cell and change the value knockout updates value. That’s OK.
But when I would like to update value on cell with code it doesn’t work. Code below works only for the first time before I manually edit cell on grid.

My code:


this.updateRow = function() {
self.myData.arrayA()[0].Code(3);
}


Thank you for your help.

[Author]

Posts