GRID Auto scroll

Tagged: ensurerowvisible, grid, jqxgrid, row, scroll, visible

This topic contains 4 replies, has 2 voices, and was last updated by Rodrigo 13 years, 5 months ago.

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

Author

GRID Auto scroll to updated/inserted row Posts

September 19, 2012 at 9:52 am GRID Auto scroll to updated/inserted row #8171

Participant

Hi Guys,

Is there a way to to automatically scroll to the row updated or inserted after the data has been refreshed by using $(‘#jqxgrid’).jqxGrid(‘updatebounddata’);

Please note, I have tried the following and no luck:

$('#jqxgrid').jqxGrid('updatebounddata');
$('#jqxgrid').jqxGrid('selectrow', 10);

Thanking you in advance 🙂

September 19, 2012 at 10:10 am GRID Auto scroll to updated/inserted row #8176

Dimitar

Participant

Hello Rodrigo,

Use the ensurerowvisible method to scroll to a desired row, e.g.:

$('#grid').jqxGrid('ensurerowvisible', 10);

See the method in action in the demo Row Selection by clicking the Scroll to Row button.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 19, 2012 at 12:00 pm GRID Auto scroll to updated/inserted row #8183

Rodrigo

Participant

Hi Dimitar,

That’s great thank you! just what I need, one question though. I’m loading my data via json, would this present a problem? see my execution below (i have tried your suggested method but not having much luck) :

updaterow: function (rowid, newdata) {
// synchronize with the server – send update command
var data = “command=update&” + $.param(newdata);

$.ajax({
dataType: ‘json’,
url: “/quote/getorder” + cid + oid,
type: ‘GET’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
resetnewrowinput();
$(‘#stageinput’).focus();

},
complete: function(){

$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
$(‘#jqxgrid’).jqxGrid(‘ensurerowvisible’, 8);

}
});

}

September 20, 2012 at 10:28 am GRID Auto scroll to updated/inserted row #8229

Dimitar

Participant

Hi Rodrigo,

The way to do this when the jqxGrid is dynamically loaded is with a ready parameter, which calls the ensurerowvisible method:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example the Grid is bound to a Remote Data.</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' }
                ],
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                ready: function () {
                    $("#jqxgrid").jqxGrid('ensurerowvisible', 28);
                },
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

September 26, 2012 at 12:56 am GRID Auto scroll to updated/inserted row #8476

Rodrigo

Participant

Hi Dimitar,

That’s awesome! thank you very much mate!

Regards,
Rodrigo

Author

Posts

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

You must be logged in to reply to this topic.