[technonagaMember]

Hi Peter,

Sorry for in convince, i searched the “setcolumnproperty” keyword in internet. i got the one simple code. I tried the code, the issue was fixed :).

Actually your code is right. but , i didn’t mention the code correct place thats the problem. Now , it was fixed.

Thanks & Regards,
Naga

[technonagaMember]

Hi Peter,

Once again very thank you for your quick response. i put your sample code in my project. But, it was not work. The old text value was display in grid column text. If you don’t mine, will you send me the brief code sample or any sample code for “setcolumnproperty” using in jqxgrid.

And, The following code was used in my project,

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

$(“#jqxgrid”).jqxGrid({
source: dataAdapter,
width: 300,
height: 300,
sortable: true,
pageable: true,
filterable: true,
sortable: true,
columnsresize: true,
ready: function () {
addfilter();
},
autoshowfiltericon: true,
theme: ”,
columns: [
{ text: ‘FirstName’, datafield: ‘Column12’, width: 50 },
{ text: ‘LastName’, datafield: ‘Column13’, width: 50 },
{ text: ‘Contact Type’, datafield: ‘Column5’, width: 50 },
{ text: ‘Contact Status’, datafield: ‘Column7’, width: 50 },
{ text: ‘Address’, datafield: ‘Column9’, width: 50 },
{ text: ‘Email’, datafield: ‘Column10’, width: 100 },
{ text: ‘Phone’, datafield: ‘Column11’, width: 100 }
]
});

$(“#jqxgrid”).jqxGrid(‘setcolumnproperty’, ‘firstname’, ‘text’, ‘New Text’);

Received Output

FirstName | LastName | Contact Type | Contact Status

Excepted Output

New Text | LastName | Contact Type | Contact Status

please correct the mistakes in my code and also mention it. Thats only possible to learn & correct my mistakes.

Thanks & Regards,
Naga

[technonagaMember]

Hi Peter,

Thanks for your quick response. Sorry for my poor communication. I found solution for that issue. I forgot to clear the existing table data after complete the process, thats only table data append every time. now, it was fixed.

Thanks & Regards,
Naga

[technonagaMember]

Hi Peter,

Thanks for your valuable response. It was work fine.

And , Now i need some one help for jqxwindow development. First of all i was developed the code for pop up appear while double click in grid. And the button add in first pop up , when i click the button(btnContactType) new pop up window (Cont) will appear. that time first pop up(popupWindow) will hide. I have mentioned below of this passage the sample code for pop up hide and show:

popupWindow -> First pop up

Cont -> Second Pop up

$(“#btnContactType”).click(function () {

$(“#popupWindow”).jqxWindow(‘hide’);

var offset = $(“#jqxgrid”).offset();
$(“#Cont”).jqxWindow({ position: { x: parseInt(offset.left)+10, y: parseInt(offset.top)+30} });
$(“#Cont”).jqxWindow(‘show’);

if(startVal == “0”)
{
startVal =”1″;
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
cache: false,
url: “http://192.168.0.10/HTML5Service/loginservice.svc/geAnswer”,
data: ‘{“AgencyId”:”‘+ getAgencyId +'”}’,
contentType: ‘application/json; charset=utf-8’,
success: function (res) {
getContactTypeTableValues = res.geAnswerResult;
},
error: function (err) {
alert(‘Error’);
alert(err.responseText);
}
});

var obj = jQuery.parseJSON(getContactTypeTableValues);
var selContactTypeValues=””;

var getContactTypeVales = hdnContactTypeClick.Value;
var getSplitedContactTypeVales = getContactTypeVales.split(‘,’);

$.each(getSplitedContactTypeVales, function( index, values){
//alert(values);
$.each(obj, function( index, item){
//alert(item.Column2);
if(item.Column2 == values)
{
table+=””+””+item.Column2+””;
}
else
{
table+=””+””+item.Column2+””;
}
});
});

table+=” “;

$(“#tblContactTypeDisp”).append(table);

}

// initialize the popup window and buttons.
$(“#Cont”).jqxWindow({ width: 275, height: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01, closeWindow: false });
$(“#Cont”).jqxWindow(‘setTitle’, ‘Contact Type Edit’);
$(“#CCancel”).jqxButton({ theme: theme });
$(“#CSave”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#CSave”).click(function () {
$(“#Cont”).jqxWindow(‘hide’);
$(“#popupWindow”).jqxWindow(‘show’);
});

$(“#CCancel”).click(function () {
$(“#Cont”).jqxWindow(‘hide’);
$(“#popupWindow”).jqxWindow(‘show’);
});

});

In first popup window one particular field value checked in second popup window. It was finely work in first time. but , second and third time it wasn’t work, initial value only checked in every time.

So, my doubt is pop up window didn’t refresh while hide/show button clicked. If any possible jqxwindow refresh while button click. It was my assumption only. Please tell the correct reason or give the sample code.

Thanks & Regards,
Naga

[technonagaMember]

Hi Larsm,

I have developed the service code with jqxgrid . Please, Try this code , It will be surely useful to you.

$(document).ready(function () {
//URL to the service
url = “http://192.168.0.10/HTML5Service/loginservice.svc/getContacts”,

//Initializing the source property
source = {
datatype: “json”,
datafields: [
{ name: ‘RespondentId’ },
{ name: ‘ParentRespondentId’ },
{ name: ‘101’ },
{ name: ‘102’},
{ name: ‘1’},
{ name: ‘1780’},
{ name: ‘1780_AnswerID’},
{ name: ‘1945’},
{ name: ‘1945_AnswerID’},
{ name: ‘17892’},
{ name: ‘17891’},
{ name: ‘17890’},
{ name: ‘1777’},
{ name: ‘3207’},
{ name: ‘RecordRights’},
{ name: ‘DeleteMsg’}
]
};

//Getting the source data with ajax GET request
var getValue;
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
url: ‘http://192.168.0.10/HTML5Service/loginservice.svc/getContacts‘,
data:'{}’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
alert(data.getContactsResult);
source.localdata = data.getContactsResult;

},
error: function (err) {
alert(‘Error’);
}
});

//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
source: dataAdapter,
width:300,
height:300,
theme: ”,
columns: [
{ text: ‘RespondentId’, datafield: ‘RespondentId’, width: 50 },
{ text: ‘ParentRespondentId’, datafield: ‘ParentRespondentId’, width: 50 },
{ text: ‘Contact Type’, datafield: ‘101’, width: 50 },
{ text: ‘Contact Status’,datafield:’102′, width: 50},
{ text: ‘Address’, datafield:’1′, width:50},
{ text: ‘Email’, datafield:’1780′, width:100},
{ text: ‘EmailAns’, datafield:’1780_AnswerID’, width:100},
{ text: ‘EConty’, datafield:’17891′, width:100},
{ text: ‘EContys’, datafield:’17890′, width:100},
{ text: ‘EFirst’, datafield:’1777′, width:100},
{ text: ‘ELast’, datafield:’3207′, width:100}
]
});

});

Happy Coding !!!

Regards,
Naga

[technonagaMember]

Hi Peter,

Once again very thanks for the valuable reply. Just now, I checked your sample code in iphone device . It was work very fine. Actually i integrated the grid code into phonegap(framework) and the grid load with in iframe tag at html page. So , I couldn’t get proper output. Now , the sample code was work very good. I will change my entire code with help of your sample code.

Once again very thanks for your help.

Thanks & Regards,
Naga

[technonagaMember]

Hi Peter ,

Thanks for quick response for the post.

Yesterday (Thursday) i sent the post for double click related query ,After some time I searched our forum , you already mentioned the code (double click) . I was use that code in my project development. That code is working very fine in PC & iPhone Simulator (with Mouse help) . But , it was not works in iphone Device (iOS touch).

I need one clear clarification, In Jqxgrid is possible to work iOS Devices. All controls are possible to work through touch (tap) . For Example , Grid Scrolling , rowlock (double Click) , Etc .,

Can you please clear my doubt.

Thanks in Advance,

Best Regards,
Naga

[technonagaMember]

Hi Peter,

I need another one help. Your ‘cellselect’ method sample code was working very fine. If any possible to send the popup edit option will appear while double click. Now, the sample code for ‘cellselect’ works single tap the grid data, Pop up appear in the screen. But, we need double click option. If you send the code , It will very useful to my project development.

Thanks in Advance,

Regards,
Naga

[technonagaMember]

Hi Peter,

I had developed the code for get device width and use some of simple calculation method to pass the various values to grid columns width. But it was not works . If you have possible to test the code. pls check it the below mentioned code. And give your valuable feedback.

var parstWidthValue;
var setgridWidth;

function getWidthVal()
{
var getWidth = sessionStorage.getItem(‘sessWidth’);
if(getWidth == “320”)
{
setgridWidth = 320;
parstWidthValue = parseInt(getWidth)/7;
}
else
{
setgridWidth = 480;
parstWidthValue = parseInt(getWidth)/5;
}
//alert(parstWidthValue);
sessionStorage.setItem(‘sessWidthVal’, parstWidthValue);
sessionStorage.setItem(‘sessGridWidthVal’, setgridWidth);
}

function loadGrid()
{
/****** ******/

getWidthVal();

setInterval(“getWidthVal()”, 10);

var getparstWidthValue = sessionStorage.getItem(‘sessWidthVal’);
var getGridWidthVal= sessionStorage.getItem(‘sessGridWidthVal’);

getparstWidthValue = parseInt(getparstWidthValue);
getGridWidthVal = parseInt(getGridWidthVal);

var theme = ”;
//var getWidth = $(“#jqxgrid”).width();

// prepare the data
var data = generatedata(20);

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#contactType”).addClass(‘jqx-input’);
$(“#contactStatus”).addClass(‘jqx-input’);
$(“#Address”).addClass(‘jqx-input’);
$(“#Email”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#contactType”).width(150);
$(“#contactType”).height(23);
$(“#contactStatus”).width(150);
$(“#contactStatus”).height(23);
$(“#Address”).width(150);
$(“#Address”).height(23);
$(“#Email”).width(150);
$(“#Email”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#contactType”).addClass(‘jqx-input-‘ + theme);
$(“#contactStatus”).addClass(‘jqx-input-‘+theme);
$(“#Address”).addClass(‘jqx-input-‘+theme);
$(“#Email”).addClass(‘jqx-input-‘+theme);
}

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

alert(“Device Width=”+getGridWidthVal+”, GridColumn Width”+getparstWidthValue);
//alert(“width:”+width);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width:getGridWidthVal,
//width:480,
autoheight: true,
source: dataAdapter,
theme: theme,
pageable: true,
sortable: true,
columnsresize: true,
touchmode: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: getparstWidthValue }, //100 getparstWidthValue
{ text: ‘Last Name’, datafield: ‘lastname’, width: getparstWidthValue }, //100
{ text: ‘Contact Type’, datafield: ‘contactype’, width: getparstWidthValue }, //150
{ text: ‘Contact Status’,datafield:’contactstatus’, width: getparstWidthValue}, //100
{ text: ‘Address’, datafield:’address’, width: getparstWidthValue}, //100
{ text: ‘Email’, datafield:’email’, width: getparstWidthValue}, //100
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: getparstWidthValue, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#contactType”).val(dataRecord.contactype);
$(“#contactStatus”).val(dataRecord.contactstatus);
$(“#Address”).val(dataRecord.address);
$(“#Email”).val(dataRecord.email);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: true, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), contactype: $(“#contactType”).val(),contactstatus:$(“#contactStatus”).val(),address:$(“#Address”).val(),email:$(“#Email”).val()

};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

/**** *****/
}

$(document).ready(function () {
setInterval(“loadGrid()”, 100);
});

Edit

First Name:

Last Name:

Contact Type:

Contact Status:

Address:

Email:

While, load a this page we got one column value (column :45) and rorate in Landscape mode we got column value (column:68). But the grid column not change in device. And , I have Changed the code for testing purpose we get a alert with grid column in every second. If possible to check this code through any device. Becoz, i commonly to take device width. I think is support all devices.

Thanks in Advance,

Regards,
Naga

[technonagaMember]

Hi Peter,

I had developed the code for get device width and use some of simple calculation method to pass the various values to grid columns width. But it was not works . If you have possible to test the code. pls check it the below mentioned code. And give your valuable feedback.

In order to enter in edit mode, click any of the ‘Edit’ buttons. To save the changes, click the ‘Save’ button in the popup dialog. To cancel the changes
click the ‘Cancel’ button in the popup dialog.

var parstWidthValue;
var setgridWidth;

function getWidthVal()
{
var getWidth = sessionStorage.getItem(‘sessWidth’);
if(getWidth == “320”)
{
setgridWidth = 320;
parstWidthValue = parseInt(getWidth)/7;
}
else
{
setgridWidth = 480;
parstWidthValue = parseInt(getWidth)/5;
}
//alert(parstWidthValue);
sessionStorage.setItem(‘sessWidthVal’, parstWidthValue);
sessionStorage.setItem(‘sessGridWidthVal’, setgridWidth);
}

function loadGrid()
{
/****** ******/

getWidthVal();

setInterval(“getWidthVal()”, 10);

var getparstWidthValue = sessionStorage.getItem(‘sessWidthVal’);
var getGridWidthVal= sessionStorage.getItem(‘sessGridWidthVal’);

getparstWidthValue = parseInt(getparstWidthValue);
getGridWidthVal = parseInt(getGridWidthVal);

var theme = ”;
//var getWidth = $(“#jqxgrid”).width();

// prepare the data
var data = generatedata(20);

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#contactType”).addClass(‘jqx-input’);
$(“#contactStatus”).addClass(‘jqx-input’);
$(“#Address”).addClass(‘jqx-input’);
$(“#Email”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#contactType”).width(150);
$(“#contactType”).height(23);
$(“#contactStatus”).width(150);
$(“#contactStatus”).height(23);
$(“#Address”).width(150);
$(“#Address”).height(23);
$(“#Email”).width(150);
$(“#Email”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#contactType”).addClass(‘jqx-input-‘ + theme);
$(“#contactStatus”).addClass(‘jqx-input-‘+theme);
$(“#Address”).addClass(‘jqx-input-‘+theme);
$(“#Email”).addClass(‘jqx-input-‘+theme);
}

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

alert(“Device Width=”+getGridWidthVal+”, GridColumn Width”+getparstWidthValue);
//alert(“width:”+width);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width:getGridWidthVal,
//width:480,
autoheight: true,
source: dataAdapter,
theme: theme,
pageable: true,
sortable: true,
columnsresize: true,
touchmode: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: getparstWidthValue }, //100 getparstWidthValue
{ text: ‘Last Name’, datafield: ‘lastname’, width: getparstWidthValue }, //100
{ text: ‘Contact Type’, datafield: ‘contactype’, width: getparstWidthValue }, //150
{ text: ‘Contact Status’,datafield:’contactstatus’, width: getparstWidthValue}, //100
{ text: ‘Address’, datafield:’address’, width: getparstWidthValue}, //100
{ text: ‘Email’, datafield:’email’, width: getparstWidthValue}, //100
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: getparstWidthValue, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#contactType”).val(dataRecord.contactype);
$(“#contactStatus”).val(dataRecord.contactstatus);
$(“#Address”).val(dataRecord.address);
$(“#Email”).val(dataRecord.email);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
},
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: true, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), contactype: $(“#contactType”).val(),contactstatus:$(“#contactStatus”).val(),address:$(“#Address”).val(),email:$(“#Email”).val()

};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

/**** *****/
}

$(document).ready(function () {

setInterval(“loadGrid()”, 100);

});

</script>
</head>

<body class=’default’ width=”400px” height=”300px”>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>First Name:</td>
<td align=”left”><input id=”firstName” /></td>
</tr>
<tr>
<td align=”right”>Last Name:</td>
<td align=”left”><input id=”lastName” /></td>
</tr>
<tr>
<td align=”right”>Contact Type:</td>
<td align=”left”><input id=”contactType” /></td>
</tr>
<tr>
<td align=”right”>Contact Status:</td>
<td align=”left”><input id=”contactStatus” /></td>
</tr>
<tr>
<td align=”right”>Address:</td>
<td align=”left”><input id=”Address” /></td>
</tr>
<tr>
<td align=”right”>Email:</td>
<td align=”left”><input id=”Email” /></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>
</div>
</body>

While, load a this page we got one column value (column :45) and rorate in Landscape mode we got column value (column:68). But the grid column not change in device. And , I have Changed the code for testing purpose we get a alert with grid column in every second. If possible to check this code through any device. Becoz, i commonly to take device width. I think is support all devices.

Thanks in Advance,

Regards,
Naga

[technonagaMember]

Hi Peter,

Thanks for quick and valuable response. The Sample Code was works very fine. And i have one small doubt. I have developed iOS web application project. The Grid developed code was integrated in phonegap frame work. I need jqxgrid width change as per device orientation. But, you gave width value statically (width : 50) .

But I need to pass value dynamically. so, please help me for close this issues.

Thanks in advance,
Naga

[Author]

Posts