Maintain DHTMLX scroll position

Hi Team,

Is there any DHTMLXGrid property for maintain a scroll position in DHTMLXGrid.

You may try to use getStateOfView() method to get the position of the scroll:
docs.dhtmlx.com/doku.php?id=dhtm … tateofview

getStateOfView() is to get the current scroll position of the grid. Could you please let us know how to set the grid position using it.

Using the getStateOfView() method you can get the index of the top visible row.
so you need to select the required row to scroll to the needed position.
docs.dhtmlx.com/doku.php?id=dhtm … _selectrow

hi,
I have tried the below code.

To setCookie state[0] value–
var state = mygrid.getStateOfView();
var state0 = state[0];
setCookie(“state0”, state0);

To getCookie state[0] value for ‘showRow’ –
var state = mygrid.getStateOfView();
var serachstate = getCookie(“state0”);
if (serachstate != undefined) {
mygrid.showRow(mygrid.getRowId(serachstate));
eraseCookie(“state0”);
}
else {
mygrid.showRow(mygrid.getRowId(serachstate));
}

This does not seem to work. mygrid.showRow() method returns 0.

Another Method also tried,
To get scroll position
var h_scroll = mygrid.objBox.scrollLeft;
var v_scroll = mygrid.objBox.scrollTop;
setCookie(“h_scroll” , h_scroll);
setCookie(“v_scroll” , v_scroll);

To restore after page reload
var Set_h_scroll = getCookie(“h_scroll”);
var Set_v_scroll = getCookie(“v_scroll”);
mygrid.objBox.scrollLeft = Set_h_scroll + “px”;
mygrid.objBox.scrollTop = Set_v_scroll + “px”;

Even though, This approach always return 0 position.

Below code is Gridconstructor:-

        gridConstructor();
        attachEvent();
        setGridHeight();
        selectFrozenColumnsIfCookie();
         mygrid.enableMultiline(true);

        mygrid.parse(data);
        mygrid.loadOrderFromCookie(controller + "_ORDER");
        mygrid.loadSizeFromCookie(controller + "_SIZE");
        mygrid.loadSortingFromCookie(controller + "_SORTING");

        mygrid.loadHiddenColumnsFromCookie(controller + "_HIDDEN");

        mygrid.enableAutoSizeSaving(controller + "_SIZE", "expires=" + date);
        mygrid.enableSortingSaving(controller + "_SORTING", "expires=" + date);
        mygrid.enableOrderSaving(controller + "_ORDER", "expires=" + date);

        mygrid.enableAutoHiddenColumnsSaving(controller + "_HIDDEN", "expires=" + date);
        mygrid.splitAt(frozenColumns.toString());
        gridSortIfCookie("gridSortCall");
         mygrid.enableHeaderMenu("false,true,false,false");
        
        // slider.slider("value", 1);
       

        //Scroll Maintain
        var Set_h_scroll = getCookie("h_scroll");
        var Set_v_scroll = getCookie("v_scroll");
         mygrid.objBox.scrollLeft = Set_h_scroll + "px";
        mygrid.objBox.scrollTop = Set_v_scroll + "px";

mygrid.showRow() ,mygrid.objBox.scrollTop() and mygrid.selectRow() .
The above kind of method have tried. But still no solution.

            Technology: MVC4 Framework for Mozilla

Be sure that code, that sets the scroll state, alwasy called after data loading.
Data loading is async, so correct way will be to use data loading callback

grid.load("url.php", function(){ //place it here });

ya sure, I’m using after data loading scenario, Look like below code.

$.get(’/Events/GetRecentXml/’ + recentNumber, function (data) {

        if ("@ViewBag.EventClosed" != "Closed" || "@ViewBag.Values" == "") {
            gridConstructor();
            attachEvent();
            setGridHeight();
            selectFrozenColumnsEventsIfCookie();

            mygrid.enableMultiline(true);
            mygrid.parse(data);
            gridSortIfCookie("gridSortCall");

            mygrid.loadOrderFromCookie(controller + "_ORDER");
            mygrid.loadSizeFromCookie(controller + "_SIZE");
            mygrid.loadSortingFromCookie(controller + "_SORTING");
            mygrid.loadHiddenColumnsFromCookie(controller + "_HIDDEN");


            mygrid.enableAutoSizeSaving(controller + "_SIZE", "expires=" + date);
            mygrid.enableSortingSaving(controller + "_SORTING", "expires=" + date);
            mygrid.enableOrderSaving(controller + "_ORDER", "expires=" + date);
            mygrid.enableAutoHiddenColumnsSaving(controller + "_HIDDEN", "expires=" + date);

            mygrid.splitAt(frozenColumns.toString());
            //ScrollMaintain
           
            var Set_h_scroll = getCookie("h_scroll");
            var Set_v_scroll = getCookie("v_scroll");
            mygrid.objBox.scrollLeft = Set_h_scroll;
            mygrid.objBox.scrollTop = Set_v_scroll; 
            eraseCookie("h_scroll"); eraseCookie("v_scroll");

           
            mygrid.enableHeaderMenu("false,true,false,false");
        }
    });

Atpresent, its wroking i removed the ‘px’
mygrid.objBox.scrollLeft = Set_h_scroll;
mygrid.objBox.scrollTop = Set_v_scroll;

But , if i have 50 record and i scrolling the end position ,after i do some operation. it reload the grid and it comes back the result is 49 record. it hide the 50th record after i scrolling the position and i see the 50th record.
It means one step before retain the grid scroll position.

Excepting result :
Need to be end position.

Reply quickly

Sorry, but it is not clear what is the problem.

The above code looks valid, the only possible issue may be caused by multiline mode in the grid. Because of it, grid may have different row height for each data loading, so if you are reloading with different data it may show different range of rows after reloading

Hi,
Step1: Default grid maintain the record 50rows.
Step2: if i checked the last row and do some operation. In this time, i get the scroll value horizontal and vertical value , Set the cookies.
Step3: Now , grid is refreshed the last search criteria so again grid value is 50 row
Step4: Finally To get the cookies value .To set the scroll value for horizontal and vertical value.

Problem:

For a example,

My grid scroll Cookie value for horizontal is 355 and vertical is 0.

   var Set_h_scroll = getCookie("h_scroll");
    var Set_v_scroll = getCookie("v_scroll");
    alert('SearchCallback_h_scroll' + Set_h_scroll + 'SearchCallback_v_scroll' + Set_v_scroll);

Now, set the value for scrollLeft and scrollTop, After finished my job, to erase the cookie value.
mygrid.objBox.scrollLeft = Set_h_scroll;
mygrid.objBox.scrollTop = Set_v_scroll;
eraseCookie(“h_scroll”); eraseCookie(“v_scroll”);
Result: ScrollLeft position is maintain the 49 row out of 50 row.
So, I have checking again mygrid position value
var h_scroll1 = mygrid.objBox.scrollLeft;
var v_scroll1 = mygrid.objBox.scrollTop;

    alert('SearchCallback_h_scroll' + h_scroll1 + 'SearchCallback_v_scroll' + v_scroll1);

It comes Horizontal value:300 and veritical value:0

Here , i have attach the screenshot .


Sorry, but I still can’t reconstruct issue locally.

If problem still occurs - please provide any kind of sample or demo link where it can be checked.