jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 45 total)

← 1 2 3 →

Author

Posts

January 4, 2013 at 3:22 pm in reply to: h – and v – scrollbar ? h – and v – scrollbar ? #13141

detberlin

Participant

Hi Peter,

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

thx detberlin

January 4, 2013 at 3:04 pm in reply to: h – and v – scrollbar ? h – and v – scrollbar ? #13138

detberlin

Participant

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('.',',') + ' &euro;');
}

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

//----------------------------------------------------------------------------------------------------------------------------
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

January 4, 2013 at 12:36 am in reply to: delete multiple rows with rowid delete multiple rows with rowid #13104

detberlin

Participant

Hi Peter,

it works…..

big thx

January 3, 2013 at 6:13 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13085

detberlin

Participant

ok Peter,

I hope I now understand correctly

// now seeking my seekindex
var warenDeleteIndex = $(‘#warenGrid’).jqxGrid(‘getrows’)[id].dIndex;

// totalcount of rows
var warenDeleteCount = $(‘#warenGrid’).jqxGrid(‘getdatainformation’).rowscount;

var array = new array();
for (var i = 0; i <= warenDeleteCount- 1; i++) {
if (warenDeleteIndex == $('#warenGrid').jqxGrid('getrows')[i].uIndex) {
var id = $ ("#warenGrid") jqxGrid ('getrowid', i);
array.push(id);
}}

var commit = $(‘#warenGrid’).jqxGrid('deleterow', array);

correctly?

January 3, 2013 at 4:52 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13079

detberlin

Participant

hi Peter,

ok how do I create the array and how do I transfer it to the deleteRow method
as I said, the array must be created dynamically

January 3, 2013 at 2:59 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13073

detberlin

Participant

ok then no pictures

Hi Peter,

you example is not solve for my problem….

i cant manually create the array…

the creation of the array must be dynamic
there is never clear how many items are included under

any idea

January 2, 2013 at 4:57 pm in reply to: Test Topic Test Topic #13033

detberlin

Participant

January 2, 2013 at 4:49 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13031

detberlin

Participant

lol

i will here insert two pictures….. why?

January 2, 2013 at 4:42 pm in reply to: Test Topic Test Topic #13027

detberlin

Participant

January 2, 2013 at 2:11 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13018

detberlin

Participant

my deleterow is not in loop.

i create my array in loop.

here my complette code

function zeigeWarenkorb(){
  var warenkorbSource = new $.jqx.dataAdapter({localdata:[], datatype: "array"});
  var cellWarenTexte = function (row, datafield, value) {return '<div class="wbCellen1">' + value + '</div>';}
  var cellWarenImage = function(id) {return '<div style="background:#fff; width:100%; height:100%;">' +
  '<img onClick="warenkorbDeleteItem(id)" id="' + id + '" src="bilder/optware1.png" style="position:absolute; left:6px; top:4px;"></div>'}
  var cellEditsImage = function(id) {return '<div style="background:#fff; width:100%; height:100%;">' +
  '<img onClick="warenkorbAndernItem(id)" id="' + id + '" src="bilder/optware2.png" style="position:absolute; left:6px; top:4px;"></div>'}
  $('#warenGrid').jqxGrid({width:650, height:594, rowsheight:22, verticalscrollbarstep:22, source:warenkorbSource, enableanimations:false,
  columnsresize:false, showemptyrow:false, showheader:false, showstatusbar:false, showaggregates:false, theme:'energyblue', columns:[
  {datafield:'X1', width:26, cellsrenderer:cellWarenImage},{datafield:'X2', width:27, cellsrenderer:cellEditsImage},
  {datafield:'wWaren', width:207, cellsrenderer:cellWarenTexte},
  {text:'wPreis', datafield:'wPreis', cellsformat:'c2', cellsalign:'right', aggregates:['sum'], aggregatesrenderer: function(summaryData){
  if ($('#warenGrid').jqxGrid('getrows').length == 0) {return '0.00';} else {return summaryData['sum'];}}},
  {datafield:'wMwSt1', hidden:true, cellsformat:'f2'}, {datafield:'wMwSt2', hidden:true, cellsformat:'f2'},
  {datafield:'wIndex', width:50, hidden:false, cellsformat:'n', aggregates:['max']}, {datafield:'uIndex', width:50, hidden:false},
  {datafield:'dIndex', width:50, hidden:false},
  {datafield:'rIndex', width:50, hidden:false, cellsrenderer:function(row) {return row;}},  // autorow OK
  {datafield:'wGutid', hidden:true}]});
  var warenlocalize = {}; warenlocalize.currencysymbol = " &euro;"; warenlocalize.currencysymbolposition = "after";
  warenlocalize.decimalseparator = ","; warenlocalize.thousandsseparator = "."; $('#warenGrid').jqxGrid('localizestrings', warenlocalize);
}
//----------------------------------------------------------------------------------------------------------------------------
function berechneWarenkorbBetrag(){
  var warenkorbGesamt = $('#warenGrid').jqxGrid('getcolumnaggregateddata', 'wPreis', ['sum']).sum.toFixed(2).replace('.',',');
  $('#summeWarenkorb').html(warenkorbGesamt);
}
//----------------------------------------------------------------------------------------------------------------------------
function warenkorbDeleteItem(id){
  var readAutoRowId = $('#warenGrid').jqxGrid('getrows')[id].rIndex; // readAutoRowId is undifined
  iDeleteArray = new Array();
  var warenDeleteIndex = $('#warenGrid').jqxGrid('getrows')[id].dIndex;
  var warenDeleteCount = $('#warenGrid').jqxGrid('getdatainformation').rowscount;
  for (var i = 0; i <= warenDeleteCount- 1; i++) {
  if (warenDeleteIndex == $('#warenGrid').jqxGrid('getrows')[i].uIndex && warenDeleteIndex !=0) {iDeleteArray[i] = i;}}
  // iDeleteArray.toString() ist ,1,2,3  usw.
  // or
  for (var i = 0; i <= warenDeleteCount- 1; i++) {iDeleteArray[i] = i;}
  // iDeleteArray.toString() ist 0,1,2,3  usw.
  $('#warenGrid').jqxGrid('deleterow', [iDeleteArray.toString()]); // is not delete
  if ($('#warenGrid').jqxGrid('getdatainformation').rowscount == 0) {$('#summeWarenkorb').html('0,00');} else {berechneWarenkorbBetrag();}
}
//----------------------------------------------------------------------------------------------------------------------------
function warenkorbAndernItem(id){
}

and another problem

var readAutoRowId = $(‘#warenGrid’).jqxGrid(‘getrows’)[id].rIndex; // readAutoRowId is undifined

why?

January 2, 2013 at 1:51 pm in reply to: delete multiple rows with rowid delete multiple rows with rowid #13015

detberlin

Participant

Hi Peter,

here my previous attempt

The Grid

$('#warenGrid').jqxGrid({width:650, height:594, rowsheight:22, verticalscrollbarstep:22, source:warenkorbSource, enableanimations:false,
  columnsresize:false, showemptyrow:false, showheader:false, showstatusbar:false, showaggregates:false, theme:'energyblue', columns:[
  {datafield:'X1', width:26, cellsrenderer:cellWarenImage},{datafield:'X2', width:27, cellsrenderer:cellEditsImage},
  {datafield:'wWaren', width:207, cellsrenderer:cellWarenTexte},
  {text:'wPreis', datafield:'wPreis', cellsformat:'c2', cellsalign:'right', aggregates:['sum'], aggregatesrenderer: function(summaryData){
  if ($('#warenGrid').jqxGrid('getrows').length == 0) {return '0.00';} else {return summaryData['sum'];}}},
  {datafield:'wMwSt1', hidden:true, cellsformat:'f2'}, {datafield:'wMwSt2', hidden:true, cellsformat:'f2'},
  {datafield:'wIndex', width:50, hidden:false, cellsformat:'n', aggregates:['max']}, {datafield:'uIndex', width:50, hidden:false},
  {datafield:'dIndex', width:50, hidden:false},
  {datafield:'rIndex', width:50, hidden:false, cellsrenderer:function(row) {return row;}},  // autorow OK
  {datafield:'wGutid', hidden:true}]});

my delete attemp

function warenkorbDeleteItem(id){
  var readAutoRowId = $('#warenGrid').jqxGrid('getrows')[id].rIndex; // readAutoRowId is undifined
  iDeleteArray = new Array();
  var warenDeleteIndex = $('#warenGrid').jqxGrid('getrows')[id].dIndex;
  var warenDeleteCount = $('#warenGrid').jqxGrid('getdatainformation').rowscount;
  for (var i = 0; i <= warenDeleteCount- 1; i++) {
  if (warenDeleteIndex == $('#warenGrid').jqxGrid('getrows')[i].uIndex && warenDeleteIndex !=0) {iDeleteArray[i] = i;}}
  // iDeleteArray.toString() ist ,1,2,3  usw.
  // or
  for (var i = 0; i <= warenDeleteCount- 1; i++) {iDeleteArray[i] = i;}
  // iDeleteArray.toString() ist 0,1,2,3  usw.
  $('#warenGrid').jqxGrid('deleterow', [iDeleteArray.toString()]); // is not delete
  if ($('#warenGrid').jqxGrid('getdatainformation').rowscount == 0) {$('#summeWarenkorb').html('0,00');} else {berechneWarenkorbBetrag();}
}

do you have a concrete example for me?

thanks in advance
detberlin

December 12, 2012 at 12:35 pm in reply to: getcolumnaggregateddata getcolumnaggregateddata #12244

detberlin

Participant

hi Dimitar,

it works……

but I can also have a set default value?

when the grid is empty I want to put the aggregate sum to 0.00

December 11, 2012 at 4:21 pm in reply to: getcolumnaggregateddata getcolumnaggregateddata #12172

detberlin

Participant

here my code for the Grid…

function zeigeWarenkorb(){
  var warenkorbArray = new Array(); var warenkorbSource = new $.jqx.dataAdapter({localdata:warenkorbArray, datatype:"array"});
  var cellTxt = function (row, datafield, value) {return '<div class="wbCellen1">' + value + '</div>';}
  var cellDel = function (id){return '<div style="background:#fff; width:100%; height:100%;">' +
  '<img onClick="warenkorbDeleteItem(id)" id="' + id + '" src="bilder/optwaren.png" style="position:absolute; left:6px; top:4px;"></div>'}
  $('#warenGrid').jqxGrid({width:350, height:594, rowsheight:22, verticalscrollbarstep:22, source:warenkorbSource, enableanimations:false,
  columnsresize:false, showemptyrow:false, showheader:false, theme:'energyblue', showstatusbar:true, statusbarheight:30, showaggregates:true,
  columns:[
  {datafield:'X', width:25, cellsrenderer:cellDel},
  {datafield:'wStuck', width:25, cellsalign:'right'},
  {datafield:'wWaren', width:210, cellsrenderer:cellTxt},
  {text:'wPreis',datafield:'wPreis', cellsformat:'c2', cellsalign:'right'},
  {datafield:'wMwSt1', cellsformat:'f2', hidden:true, aggregates:['sum']},
  {datafield:'wMwSt2', cellsformat:'f2', hidden:true},
  {datafield:'wIndex', hidden:true},
  {datafield:'wGutid', hidden:true}]});
  var warenlocalize = {}; warenlocalize.currencysymbol = " €"; warenlocalize.currencysymbolposition = "after";
  warenlocalize.decimalseparator = ","; warenlocalize.thousandsseparator = "."; $('#warenGrid').jqxGrid('localizestrings', warenlocalize);
}
//----------------------------------------------------------------------------------------------------------------------------
function warenkorbDeleteItem(id){
  var wSumme = $('#warenGrid').jqxGrid('getcellvalue', id, 'wPreis'); berechneWarenkorb(-wSumme); $('#warenGrid').jqxGrid('deleterow',id);
}

and now ….

I would like to now pass the value of aggregate sum to another window in a

i hope you understand me

December 11, 2012 at 1:04 pm in reply to: getcolumnaggregateddata getcolumnaggregateddata #12166

detberlin

Participant

i use jquery-1.8.2 and jqwidgets-ver2.5.5

$(document).ready(function () {data='';// my comment// prepare the datavar source ={localdata: data,                datatype: "array",updaterow: function (rowid, rowdata) {// synchronize with the server - send update command}};var dataAdapter = new $.jqx.dataAdapter(source);// initialize jqxGrid            $("#jqxgrid").jqxGrid({width: 680,source: dataAdapter,showstatusbar: true,statusbarheight: 50,editable: true,showaggregates: true,                selectionmode: 'singlecell',columns: [{                      text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90,aggregatesrenderer: function (aggregates, column, element) {                          var renderstring = "<div style='float: left;width: 100%;height: 100%' />";return renderstring;}},{                      text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90,aggregatesrenderer: function (aggregates, column, element) {                          var renderstring = "<div style='float: left;width: 100%;height: 100%' />";return renderstring;}},{                      text: 'Product', datafield: 'productname', width: 170,aggregatesrenderer: function (aggregates, column, element) {                          var renderstring = "<div style='float: left;width: 100%;height: 100%' />";return renderstring;}},                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],aggregatesrenderer: function (aggregates, column, element) {                          var renderstring = "<div style='float: left;width: 100%;height: 100%'>";$.each(aggregates, function (key, value) {                              var name = key == 'min' ? 'Min' : 'Max';                              var color = key == 'max' ? 'green' : 'red';                              renderstring += '<div style="color: ' + color + ';margin: 6px;text-align: right;overflow: hidden">' + name + ': ' + value + '</div>';});                          renderstring += "</div>";return renderstring;}},                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'],aggregatesrenderer: function (aggregates, column, element, summaryData) {                          var renderstring = "<div style='float: left;width: 100%;height: 100%'>";$.each(aggregates, function (key, value) {                              var name = key == 'sum' ? 'Sum' : 'Avg';                              var color = 'green';                              if (key == 'sum' &amp;&amp; summaryData['sum'] &lt; 650) {                                  color = 'red';}                              if (key == 'avg' &amp;&amp; summaryData['avg'] &lt; 4) {                                  color = 'red';}                              renderstring += '<div style="color: ' + color + ';margin: 6px;text-align: right;overflow: hidden">' + name + ': ' + value + '</div>';});                          renderstring += "</div>";return renderstring;}}]});});

my declaration

<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="moduljqx/jqx.base.css" type="text/css">
<link rel="stylesheet" href="moduljqx/jqx.energyblue.css" type="text/css">
<link rel="stylesheet" href="moduljqx/mydarkblue.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/jqxgrid.edit.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/jqxlistbox.js"></script>
<script type="text/javascript" src="moduljqx/jqxdropdownlist.js"></script>
<script type="text/javascript" src="moduljqx/jqxbuttons.js"></script>
<script type="text/javascript" src="moduljqx/jqxpanel.js"></script>
<script type="text/javascript" src="moduljqx/jqxcheckbox.js"></script>
<script type="text/javascript" src="moduljqx/jqxradiobutton.js"></script>
<script type="text/javascript" src="moduljqx/jqxwindow.js"></script>
<script type="text/javascript" src="moduljqx/jqxvalidator.js"></script>
<script type="text/javascript" src="moduljqx/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="wconfigs.js"></script>
<script type="text/javascript" src="xangebot.js"></script>

December 11, 2012 at 12:28 pm in reply to: Test Topic Test Topic #12161

detberlin

Participant

i use jquery-1.8.2 and jqwidgets-ver2.5.5

<script type="text/javascript">

$(document).ready(function () {

data='';

// my comment

// prepare the data

var source =

localdata: data,

                datatype: "array",

updaterow: function (rowid, rowdata) {

// synchronize with the server - send update command

};

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

// initialize jqxGrid

            $("#jqxgrid").jqxGrid(

width: 680,

source: dataAdapter,

showstatusbar: true,

statusbarheight: 50,

editable: true,

showaggregates: true,

                selectionmode: 'singlecell',

columns: [

                      text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90,

aggregatesrenderer: function (aggregates, column, element) {

                          var renderstring = "<div class='jqx-widget-content' style='float: left; width: 100%; height: 100%; '/>";

return renderstring;

},

                      text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90,

aggregatesrenderer: function (aggregates, column, element) {

                          var renderstring = "<div class='jqx-widget-content' style='float: left; width: 100%; height: 100%; '/>";

return renderstring;

},

                      text: 'Product', datafield: 'productname', width: 170,

aggregatesrenderer: function (aggregates, column, element) {

                          var renderstring = "<div class='jqx-widget-content' style='float: left; width: 100%; height: 100%; '/>";

return renderstring;

},

                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],

aggregatesrenderer: function (aggregates, column, element) {

                          var renderstring = "<div class='jqx-widget-content' style='float: left; width: 100%; height: 100%; '>";

$.each(aggregates, function (key, value) {

                              var name = key == 'min' ? 'Min' : 'Max';

                              var color = key == 'max' ? 'green' : 'red';

                              renderstring += '<div style="color: ' + color + '; position: relative; margin: 6px; text-align: right; overflow: hidden;">' + name + ': ' + value + '</div>';

});

                          renderstring += "</div>";

return renderstring;

},

                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'],

aggregatesrenderer: function (aggregates, column, element, summaryData) {

                          var renderstring = "<div class='jqx-widget-content' style='float: left; width: 100%; height: 100%;'>";

$.each(aggregates, function (key, value) {

                              var name = key == 'sum' ? 'Sum' : 'Avg';

                              var color = 'green';

                              if (key == 'sum' && summaryData['sum'] < 650) {

                                  color = 'red';

                              if (key == 'avg' && summaryData['avg'] < 4) {

                                  color = 'red';

                              renderstring += '<div style="color: ' + color + '; position: relative; margin: 6px; text-align: right; overflow: hidden;">' + name + ': ' + value + '</div>';

});

                          renderstring += "</div>";

return renderstring;

});

});

    </script>

my declaration

Author

Posts

Viewing 15 posts - 16 through 30 (of 45 total)

← 1 2 3 →