h – and v – scrollbar ?

[detberlinParticipant]

people!! what did you change it now?

after I updated everything on your latest version, I have encountered a problem.

if I have a list for the term with wealth data,
and the boundary of the grid height is exceeded
I get a vertikalscrollbar …. ok what is wanted.

but it also does not appear horizontalScrollBar and the last column
disappears behind the VScrollBar. why?

in the last column have no further specified so that the space has to be displayed VScrollBar.
I got that down again?

here’s a picture

just left the info list is as it should be

has the right list above problem

here my code of the Grid

$('#belagGrid').jqxGrid({

 

width:350,

 

height:360,

 

rowsheight:24,

 

verticalscrollbarstep:24,

 

source:belStore,

 

showemptyrow:false,

 

showheader:false,

 

columnsresize:false,

 

enableanimations:false,

 

selectionmode:'none',

 

showstatusbar:false,

 

showaggregates:false,

 

theme:'energyblue',

 

columns:[

 

{datafield:'X1', width:26, cellsrenderer:cellBelegImage},

 

{dataField:'tagtxt01', width:241},

 

{text:'tagtxt02', datafield:'tagtxt02', cellsformat:'c2', cellsalign:'right',

 

aggregates:['sum'], aggregatesrenderer:function(summaryData){

 

if ($('#belagGrid').jqxGrid('getrows').length == 0)

 

{return '0.00';}

 

else

 

{return summaryData['sum'];}

 

}

 

},

 

{dataField:'tagtxt03',hidden:true}]

 

});

 

[Peter StoevKeymaster]

Hi detberlin,

If you have an issue with the Grid, please post a sample which demonstrates it. With the provided code, we will not be able to help you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[detberlinParticipant]

Here’s a code from my project

$(document).ready(function(){
  var myCreateElement = $('<div id="beiWindow"><div>' +
  '<div id="extraGrid" style="position:absolute; margin-left:3px; margin-top:5px;"></div>' +
  '<div id="extHaeder" class="wbHaeder1" style="position: absolute; margin-left:363px; margin-top:5px; width:350px; text-align:center;"></div>' +
  '<div id="belagGrid" style="position:absolute; margin-left:363px; margin-top:34px;"></div>' +
  '<div id="extFooter" class="wbHaeder1" style="position:absolute; margin-left:363px; margin-top:395px; width:350px;text-align:center;"></div>' +
  '<hr  style="position: absolute; margin-left:363px; margin-top:437px; width:352px; height:1px; background-color:#7f9db9; border-width:0px;">' +
  '</div></div>'); $(document.body).append(myCreateElement);
  $('#beiWindow').bind('closed',function(event){iRowTagesIndex = 0; iRowHauptIndex = 0; $('#beiWindow').remove();}); var extraGroup = 'artexbig';
  var iHauptArtikels = $('#tagesGrid').jqxGrid('getrows')[iRowTagesIndex].tagtxt01;
  iMerkeHauptBetrage = $('#tagesGrid').jqxGrid('getrows')[iRowTagesIndex].tagtxt02;
  $('#extFooter').html('Gesamtpreis ohne Belag ' + iMerkeHauptBetrage.toFixed(2).replace('.',',') + ' &euro;');
  erstelleButton(620, 484, 100, 37, 'beiCancel', 'beiWindow', 2, '', '');
  erstelleButton(368, 484, 249, 37, 'beiSenden', 'beiWindow', 0, '', 'Artikel zum Warenkorb hinzuf' + '\u00FC' + 'gen');
  erstelleWindow(728, 532, 'beiWindow', 'beiCancel',1); $('#beiWindow').jqxWindow('setTitle', 'Extrabelag f&uuml;r ' + iHauptArtikels + ' ausw&auml;hlen');
  var merkeGroup = $('#idTage').html(); $('#extHaeder').html('Ausgew&auml;hlte Bel&auml;ge'); if (merkeGroup == 'PIZZEN-KLEIN') {extraGroup = 'artexmin';};
  var cellExtraImage = function(row) {return '<div><img src="bilder/optware3.png" style="position:absolute; left:5px; top:5px;"></div>'}
  var extraStore = {async:false, datatype:"json", datafields:[{name:'extcheck', type:'bool'}, {name:'tagtxt01'}, {name:'tagtxt02', type:'float'},
  {name:'tagtxt03', type:'int'}], url:'phfoods.php?fodWahlen=5&fodTables=' + extraGroup}; var extDataAdapter = new $.jqx.dataAdapter(extraStore);
  $('#extraGrid').jqxGrid({width:350, height:480, rowsheight:24, verticalscrollbarstep:24, source:extDataAdapter, showheader:false, altrows:true,
  columnsresize:false, enableanimations:false, showemptyrow:false, selectionmode:'none', theme:'energyblue', columns:[
  {datafield:'X1', width:26, cellsrenderer:cellExtraImage}, {dataField:'tagtxt01', width:241},
  {text:'aPreise', datafield:'tagtxt02', cellsformat:'c2', cellsalign:'right'},{dataField:'tagtxt03', hidden:true}]});
  var extraGridLocale = {}; extraGridLocale.currencysymbol = " &euro;&nbsp;"; extraGridLocale.currencysymbolposition = "after";
  extraGridLocale.decimalseparator = ","; extraGridLocale.thousandsseparator = "."; $('#extraGrid').jqxGrid('localizestrings' , extraGridLocale);
  ausgewahlteBelege(); $('#extraGrid').bind('rowclick', function(event) {belegZuListeHinzufugen(event.args.rowindex);});
  $('#beiSenden').bind('click', function() {ausgewahlteBelegeHinzufugen();});
})

//----------------------------------------------------------------------------------------------------------------------------
function ausgewahlteBelege(){
  var cellBelegImage = function(id) {return '<div style="background:#fff; width:100%; height:100%;">' +
  '<img onClick="extraBelegDeleteItem(id)" id="' + id + '" src="bilder/optware4.png" style="position:absolute; left:6px; top:5px;"></div>'}
  var belStore = new $.jqx.dataAdapter({localdata:[], datatype: "array"});
  $('#belagGrid').jqxGrid({width:350, height:360, rowsheight:24, verticalscrollbarstep:24, source:belStore, showemptyrow:false, showheader:false,
  columnsresize:false, enableanimations:false, selectionmode:'none', showstatusbar:false, showaggregates:false, theme:'energyblue', columns:[
  {datafield:'X1', width:26, cellsrenderer:cellBelegImage}, {dataField:'tagtxt01', width:241},
  {text:'tagtxt02', datafield:'tagtxt02', cellsformat:'c2', cellsalign:'right', aggregates:['sum'], aggregatesrenderer:function(summaryData){
  if ($('#belagGrid').jqxGrid('getrows').length == 0) {return '0.00';} else {return summaryData['sum'];}}},{dataField:'tagtxt03',hidden:true}]});
  var belagGridLocale = {}; belagGridLocale.currencysymbol = " &euro;&nbsp;"; belagGridLocale.currencysymbolposition = "after";
  belagGridLocale.decimalseparator = ","; belagGridLocale.thousandsseparator = "."; $('#belagGrid').jqxGrid('localizestrings' , belagGridLocale);
}

//----------------------------------------------------------------------------------------------------------------------------
function belegZuListeHinzufugen(extraBelegRow){
  var ubernehmeBelegDaten = {};
  ubernehmeBelegDaten['tagtxt01'] = $('#extraGrid').jqxGrid('getcellvalue', extraBelegRow, 'tagtxt01');
  ubernehmeBelegDaten['tagtxt02'] = $('#extraGrid').jqxGrid('getcellvalue', extraBelegRow, 'tagtxt02');
  ubernehmeBelegDaten['tagtxt03'] = $('#extraGrid').jqxGrid('getcellvalue', extraBelegRow, 'tagtxt03');
  $('#belagGrid').jqxGrid('addrow',null, ubernehmeBelegDaten);
  var iExtraEndbetrag = iMerkeHauptBetrage + $('#belagGrid').jqxGrid('getcolumnaggregateddata','tagtxt02',['sum']).sum;
  $('#extFooter').html('Gesamtpreis mit Belag ' + iExtraEndbetrag.toFixed(2).replace('.',',') + ' €');
}

//----------------------------------------------------------------------------------------------------------------------------
function extraBelegDeleteItem(id){
  $('#belagGrid').jqxGrid('deleterow', id);
  if ($('#belagGrid').jqxGrid('getdatainformation').rowscount == 0) {
  $('#extFooter').html('Gesamtpreis ohne Belag ' + iMerkeHauptBetrage.toFixed(2).replace('.', ',') + ' €'); return 0;};
  var iExtraEndbetrag = iMerkeHauptBetrage + $('#belagGrid').jqxGrid('getcolumnaggregateddata','tagtxt02',['sum']).sum;
  $('#extFooter').html('Gesamzpreis mit Belag ' + iExtraEndbetrag.toFixed(2).replace('.',',') + ' €');
}

//----------------------------------------------------------------------------------------------------------------------------
function ausgewahlteBelegeHinzufugen(){
  artikelZuWarenkorbHinzufugen(0, '#tagesGrid', iRowTagesIndex, 0);
  var iExtraUnterIndex = $('#warenGrid').jqxGrid('getrows')[iRowHauptIndex].wIndex;
  var iExtraBelegCount = $('#belagGrid').jqxGrid('getdatainformation').rowscount;
  for (var i = 0; i <= iExtraBelegCount - 1; i++) {artikelZuWarenkorbHinzufugen(1, '#belagGrid', i, iExtraUnterIndex);}
  if (iExtraBelegCount !=0) $('#warenGrid').jqxGrid('setcellvalue', iRowHauptIndex, 'dIndex', iExtraUnterIndex);
}

this is the code from the first image above from my post

thanks for you help

[Peter StoevKeymaster]

Hi detberlin,

I think it would be easier, if you send us a working sample which demonstrates the issue which you experience to support@jqwidgets.com. I do not think that we will be capable to debug the provided code here.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[detberlinParticipant]

Hi Peter,

I will come to them my entire page can with database image.
my programming environment I enclose also

thx detberlin

[detberlinParticipant]

hi Peter,

Here you can see a simple example of my grid so that my problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head><meta charset="utf-8">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" href="moduljqx/jqx.base.css" type="text/css">
<script type="text/javascript" src="moduljqx/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="moduljqx/jqxcore.js"></script>
<script type="text/javascript" src="moduljqx/jqxdata.js"></script>
<script type="text/javascript" src="moduljqx/jqxgrid.js"></script>
<script type="text/javascript" src="moduljqx/jqxscrollbar.js"></script>
<script type="text/javascript" src="moduljqx/jqxgrid.selection.js"></script>
<script type="text/javascript" src="moduljqx/jqxbuttons.js"></script>
<script type="text/javascript" src="moduljqx/jqxwindow.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  var store = new $.jqx.dataAdapter({localdata:[], datatype: "local"});
  $('#grid').jqxGrid({
  width:350, height:126, source:store, showemptyrow:false, columns:[
  {text:'Artikel', dataField:'tagtxt01', width:208},
  {text:'Preis', datafield:'tagpreis', align:'right', cellsformat:'c2', cellsalign:'right'},
  ]});
  $('#button').jqxButton({height:'30px', width:'91px'});
  $('#button').bind('click', function() {addnew();});
  function addnew(){
  var iAddNew = {}; iAddNew['tagtxt01'] = 'Row1'; iAddNew['tagpreis'] = '10';
  $('#grid').jqxGrid('addrow', null, iAddNew);
  }
  });
  </script>
</head><body>
<div id="grid" style="position:absolute; margin-top:10px; margin-left:10px;"></div>
<input id="button" style="position:absolute; margin-top:160px; margin-left:10px;" type="button" value="addrow">
</body></html>

[Author]

Posts