jQWidgets Forums

Tagged: grid, javascript grid, jquery grid

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 13 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Grid: celle bei start auslesen Posts
June 22, 2012 at 7:53 pm Grid: celle bei start auslesen #5247

detberlin
Participant

Guten Tag,

im jqxWindow habe ich ein Grid.

nun möchte ich das bei öffnen von jqxWindow dder erste row automatisch selektiert wird, und der inhalt der 2. celle in ein div ausgegeben wird. Hier der source. Danke

$(document).ready(function() { var xVarPos = $('#zusWindow').offset().left; var yVarPos = $('#zusWindow').offset().top; $('#zusWindow').jqxWindow('bringToFront');

var zussourcen = {datatype:”json”, datafields:[{name:’stftxt01′}, {name:’stftxt02′},], url:’moduldat/phzusatz.php’};
var zusAdapter = new $.jqx.dataAdapter(zussourcen);

$(‘#zusatzList’).jqxGrid({width:270, height:308, source:zusAdapter, columnsresize:false, rowsheight:22, enableanimations:false, altrows:true, showheader:false, selectedrowindex:0, theme:’energyblue’,
columns:[{text:’Artikel’, dataField:’stftxt01′, width:250}, {text:’Beschreibung’, dataField:’stftxt02′, width:250, hidden:true}]});
$(‘#zusatzList’).bind(‘rowselect’, function(event) {$(‘#zusDetails’).html( $(‘#zusatzList’).jqxGrid(‘getcellvalue’, event.args.rowindex, ‘stftxt02’));});

$(‘#zusWindow’).jqxWindow({position:{x: xVarPos + 301, y: yVarPos + 300}, height:355, width:690, showAnimationDuration:0,
closeAnimationDuration:0, resizable:false, draggable:false, autoOpen:false, isModal:true, theme:’darkblue’});
});

document.write(‘<div style=”visibility:hidden;” id=”zusWindow”><div>Zusatzstoffe</div><div>’ +
‘<div id=”zusatzList” style=”position:absolute; margin-top:3px; margin-left:3px;”></div>’+
‘<div style=”background-color:#ffffff; border:1px #7f9db9 solid; position:absolute; margin-top:3px; margin-left:283px; width:392px; height:308px;”></div>’ +
‘<div id=”zusDetails” style=”font-family:Verdana; font-size:13px; text-align:left; position:absolute; margin-top:6px; margin-left:286px; width:386px; height:302px;”></div>’ +
‘</div></div>’);

June 24, 2012 at 8:44 am Grid: celle bei start auslesen #5268
Peter Stoev
Keymaster
Hi detberlin,

I am not sure about the exact issue from your post, but I tried your code and there are few small issues with it.

At first, the jqxWindow should be first created, and then you can call its methods. You also dynamically add html elements, but you try to access them before you add them to the DOM.

Here’s a modification of your code:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
   <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var elements = $('<div id="zusWindow"><div>Zusatzstoffe</div><div>' +
            '<div id="zusatzList" style="position:absolute; margin-top:3px; margin-left:3px;"></div>' +
            '<div style="background-color:#ffffff; border:1px #7f9db9 solid; position:absolute; margin-top:3px; margin-left:283px; width:392px; height:308px;"></div>' +
            '<div id="zusDetails" style="font-family:Verdana; font-size:13px; text-align:left; position:absolute; margin-top:6px; margin-left:286px; width:386px; height:302px;"></div>' +
            '</div></div>');
            $(document.body).append(elements);
            var xVarPos = $('#zusWindow').offset().left;
            var yVarPos = $('#zusWindow').offset().top;
    
            $('#zusWindow').jqxWindow({ position: { x: xVarPos + 301, y: yVarPos + 300 }, height: 355, width: 690, showAnimationDuration: 0,
                closeAnimationDuration: 0, resizable: false, draggable: false, isModal: true, theme: 'darkblue'
            });
            var zussourcen = { datatype: "json", datafields: [{ name: 'stftxt01' }, { name: 'stftxt02'}], url: 'moduldat/phzusatz.php' };
            var zusAdapter = new $.jqx.dataAdapter(zussourcen);
            $('#zusatzList').jqxGrid({ width: 270, height: 308, source: zusAdapter, columnsresize: false, rowsheight: 22, enableanimations: false, altrows: true, showheader: false, selectedrowindex: 0, theme: 'energyblue',
                columns: [{ text: 'Artikel', dataField: 'stftxt01', width: 250 }, { text: 'Beschreibung', dataField: 'stftxt02', width: 250, hidden: true}]
            });
            $('#zusatzList').bind('rowselect', function (event) {
                $('#zusDetails').html($('#zusatzList').jqxGrid('getcellvalue', event.args.rowindex, 'stftxt02'));
            });
        })
    </script>
</head>
<body class='default'>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
June 24, 2012 at 3:19 pm Grid: celle bei start auslesen #5274

detberlin
Participant

hi Peter,

big thanks for you answer and clean up my code.

my english is not so good. i hope you understand my problem.

I want to read the first data record.
The first data record has even more details to be output.
The details are to be issued at the same opening.

here my code….

$(document).ready(function () {

var elements = $(‘

Zusatzstoffe

‘ +
‘

‘ +
‘

‘ +
‘

‘ +
‘

‘);
$(document.body).append(elements);
var xVarPos = $(‘#zusWindow’).offset().left;
var yVarPos = $(‘#zusWindow’).offset().top;
$(‘#zusWindow’).jqxWindow({ position: { x: xVarPos + 301, y: yVarPos + 300 }, height: 355, width: 690, showAnimationDuration: 0,
closeAnimationDuration: 0, resizable: false, draggable: false, isModal: true, theme: ‘darkblue’
});
var zussourcen = { datatype: “json”, datafields: [{ name: ‘stftxt01’ }, { name: ‘stftxt02’}], url: ‘moduldat/phzusatz.php’ };
var zusAdapter = new $.jqx.dataAdapter(zussourcen);
$(‘#zusatzList’).jqxGrid({ width: 270, height: 308, source: zusAdapter, columnsresize: false, rowsheight: 22, enableanimations: false, altrows: true, showheader: false, selectedrowindex: 0, theme: ‘energyblue’,
columns: [{ text: ‘Artikel’, dataField: ‘stftxt01’, width: 250 }, { text: ‘Beschreibung’, dataField: ‘stftxt02’, width: 250, hidden: true}]
});
$(‘#zusatzList’).bind(‘rowselect’, function (event) {
$(‘#zusDetails’).html($(‘#zusatzList’).jqxGrid(‘getcellvalue’, event.args.rowindex, ‘stftxt02’));
});
})
the first data record I have been selected.
Now the details will automatically be displayed.

best thanks for you answer.
have a nice day
detberlin

June 25, 2012 at 4:57 am Grid: celle bei start auslesen #5286
Peter Stoev
Keymaster
Hi detberlin,

In order to read the row’s details, you can use the Grid’s ‘getrowdata’ method. The ‘getrowdata’ method accepts the row’s index as parameter and returns the row’s data. However, when you call that method, the Grid’s data must be fully loaded. When the data is loaded, the jqxDataAdapter plug-in invokes its loadComplete function and you can make the Grid’s ‘getrowdata’ call inside its body. For more information about the jqxDataAdapter’s capabilities, take a look here: jquery-data-adapter.htm.

Here’s how to call the ‘getrowdata’ method for the first data record.
```
var data = $('#grid').jqxGrid('getrowdata', 0);
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.