jQWidgets Forums

Hi, I use jqxGrid in jqWidget 14.0.

The scrollbars does not shown in the grid.

Must I set any prperty to show the scrollbars?

Sincerely,

$(document).ready(function () {
// prepare the data
var theme = ‘summer’;

var source ={
datatype: “json”,
datafields: [
{ name: ‘companyname’, type: ‘string’},
{ name: ‘contactname’, type: ‘string’},
{ name: ‘contacttitle’, type: ‘string’},
{ name: ‘address’, type: ‘string’},
{ name: ‘city’, type: ‘string’},
{ name: ‘country’, type: ‘string’},
{ name: ‘customerid’, type: ‘string’}
],
cache: false,
id: ‘customerid’,
url: ‘data2.php’,
root: ‘Rows’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data=”update=true&companyname=” + rowdata.companyname + “&contactname=” + rowdata.contactname + “&contacttitle=” + rowdata.contacttitle
+ “&address=” + rowdata.address + “&city=” + rowdata.city + “&country=” + rowdata.country+ “&customerid=” + rowdata.customerid;
$.ajax({
dataType: ‘json’,
url: ‘data2.php’,
data: data})
.done(function (data, status, xhr) {
// update command is executed.
commit(true);
})
.fail(function(xhr,textStatus,errorThrown){
alert(textStatus);
});
},
beforeprocessing: function(data){
source.totalrecords = data[0].TotalRows;
},
sort: function(){
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
}
};

var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid({
width: 900,
scrollmode:’logical’,
source: dataadapter,
selectionmode: ‘singlecell’,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
sortable: true,
editable: true,
pagesizeoptions: [’10’, ’20’, ’30’,’100′],
rendergridrows: function(){
return dataadapter.records;
},
columns: [
{ text: ‘Company Name’, datafield: ‘companyname’, width: “25%” },
{ text: ‘Contact Name’, datafield: ‘contactname’, width: “20%” },
{ text: ‘Contact Title’, datafield: ‘contacttitle’, width: “20%” },
{ text: ‘Address’, datafield: ‘address’, width: “18%” },
{ text: ‘City’, datafield: ‘city’, width: “10%” },
{ text: ‘Country’, datafield: ‘country’, width: “7%” }
//{ text: ‘id’, datafield: ‘customerid’, width: 0 }
]
});
});
</script>