locked
Tab key press event causes vertical scroll in gridview using "gridviewscroll.min.js" RRS feed

Answers

  • User665608656 posted

    Hi koolkunz,

    According to your description,I made an example with two fixed columns in gridview. 

    To solve this problem, we also need to modify the corresponding code in the js file of v0.9.6.8.

    In the function processVertical(target)  method, 

    panelitemcontent.scrollTop(scrollTop);
    if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") { freezeitemcontent.scrollTop(scrollTop); }

    These two statements above are used to confirm where the fixed and non-fixed columns scroll after you press the tab key.

    The key problem is in the parameter scrollTop,

    According to this definition as below,when you press the tab key, all content reaches the bottom of the current. 

     scrollTop = targetTop + targetHeight - panelHeight + scrollTop;

    You can modify scrollTop according to your needs, or you can comment on the statement directly. 

    The following codes are what need to be modified in v0.9.6.8 js :

    First Part:

            panelitemcontent.bind("keyup", function (e) {
                    if (e.keyCode == 9) {
                        var target = $(e.target);
                        if (!target[0]) { return; }
                        processHorizontal(target);
                        processVertical(target);
                        var targetfreezeid = target[0].id + "_freezeitem";
                        var targetfreeze = $("#" + targetfreezeid);
                        if (targetfreeze[0]) {
                            targetfreeze.focus();
                        }
                    }
                });

    Second Part:

                function processVertical(target) {
                    var targetTop = target.position().top;
                    var targetHeight = target.outerHeight();
                    var scrollTop = panelitemcontent[0].scrollTop;
                    var panelHeight = panelitemcontent.outerHeight();
    
                    //console.log("processVertical");
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("panelHeight: " + panelHeight);
                    //console.log("targetTop: " + targetTop);
                    //console.log("targetHeight: " + targetHeight);
    
                    //scrollTop = targetTop + targetHeight - panelHeight + scrollTop + 5;
    
                    if (scrollTop < 0) {
                        scrollTop = 0;
                    }
    
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("---");
    
                    var minWidthv = verticalrail.outerHeight() - verticalbar.outerHeight();
                    var maxWidthv = panelitemcontent[0].scrollHeight - panelitemcontent.outerHeight();
    
                    var top = (scrollTop / (maxWidthv / minWidthv)) + opt.arrowsize;
    
                    verticalbar.css({ top: top + 'px' });
    
                    panelitemcontent.scrollTop(scrollTop);
    
                    if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") {
                        freezeitemcontent.scrollTop(scrollTop);
                    }
                }

    The result of my work demo: 


    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 20, 2019 8:27 AM
  • User-633670384 posted

    Hi 

    Can you please share the full modified file?

    We have made so many modifications I am getting confused where to add modifications (to original file or already modified file)

    Edit : So I made the changes to fresh file and it is working properly now. Thank you very much for your help even the developer of the script was not responding to my mails so once again thank you so much.

    By the way I also commented out from processHorizontal function the line :

    scrollLeft = targetLeft + targetWidth - panelWidth + scrollLeft + 5;

    Earlier the scrolling was jumping (it was first scrolling to bring the current textbox to middle of scroll and then taking it to the end of scroll , removing this line just brings it to the middle which is better I think.

    This is the final file that I am using : https://pastebin.com/LNBTGfCU 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 20, 2019 8:44 AM

All replies

  • User665608656 posted

    Hi koolkunz, 

    According to the questions you provided, I made a simple similar code myself,  but when I ran here, clicking the tab button did not cause any problems as you said. Could you please give me your specific code?

    According to your description, I have created a test demo by using the  GridViewScroll library, it works well on my side.

    Could you please share the details codes about the js and girdview ? If you could post more details information it will be more easily for us to reproduce the issue and find out the solution.                

    The result of my work demo:

    Best Regards,

    YongQing.

    Monday, May 13, 2019 4:33 AM
  • User-633670384 posted

    deleted

    Tuesday, May 14, 2019 8:08 AM
  • User-633670384 posted

    Yongqing Yu

    Hi koolkunz, 

    According to the questions you provided, I made a simple similar code myself,  but when I ran here, clicking the tab button did not cause any problems as you said. Could you please give me your specific code?

    According to your description, I have created a test demo by using the  GridViewScroll library, it works well on my side.

    Could you please share the details codes about the js and girdview ? If you could post more details information it will be more easily for us to reproduce the issue and find out the solution.                

    The result of my work demo:

    Best Regards,

    YongQing.

    Can you share your code for this demo?

    which version are you using?

    I am using v0.9.6.8 which is available here https://github.com/twlikol/GridViewScroll/tree/v0.9.6.8 

    The newer version does not work well for me (the checkboxes I am using dont work) , but the issue with TAB key is not present in that. 

    Tuesday, May 14, 2019 2:54 PM
  • User665608656 posted

    Hi koolkunz,

    I have tested  with the version of v0.9.6.8 js you provided, and there are really some problems as you said.

    This problem exists because the Tabkey is specially set in the version of v0.9.6.8 js (that is, when the Tabkey moves, the current edit line reaches the bottom line).

    To solve this problem, just modify the file of v0.9.6.8 js version to find the statement 'e.keyCode == 9' and comment it out. (Note that there are two points that need to be commented out.).

    The  following code are what need to be removed in v0.9.6.8 js  :

    First Part:

      if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") {
    
                    //freezeitemcontent.bind("keydown", function (e) {
    
                    //    if (e.keyCode == 9) {
                    //        var targetfreeze = $(e.target);
    
                    //        if (!targetfreeze[0]) { return; }
    
                    //        //console.log(targetfreeze[0].id);
    
                    //        var targetid = targetfreeze[0].id.replace("_freezeitem", "");
    
                    //        //console.log(targetid);
    
                    //        var target = $("#" + targetid);
    
                    //        if (target[0]) {
                    //            target.focus();
                    //        }
                    //    }
                    //});
                }

    Second Part:

      panelitemcontent.bind("keyup", function (e) {
    
    
                    //if (e.keyCode == 9) {
    
                    //    var target = $(e.target);
    
                    //    if (!target[0]) { return; }
    
                    //    processHorizontal(target);
                    //    processVertical(target);
    
                    //    var targetfreezeid = target[0].id + "_freezeitem";
    
                    //    var targetfreeze = $("#" + targetfreezeid);
    
                    //    if (targetfreeze[0]) {
                    //        targetfreeze.focus();
                    //    }
                    //}
                });

    The result of my work demo: 

    Best Regards,

    YongQing.




    Wednesday, May 15, 2019 9:56 AM
  • User-633670384 posted

    Yongqing Yu

    Hi koolkunz,

    I have tested  with the version of v0.9.6.8 js you provided, and there are really some problems as you said.

    This problem exists because the Tabkey is specially set in the version of v0.9.6.8 js (that is, when the Tabkey moves, the current edit line reaches the bottom line).

    To solve this problem, just modify the file of v0.9.6.8 js version to find the statement 'e.keyCode == 9' and comment it out. (Note that there are two points that need to be commented out.).

    Best Regards,

    YongQing.

    The problem I am facing after removing these lines is that,the fixed header and columns to do not scroll along with the tab key scroll.

    As you can see in this gif :

    Wednesday, May 15, 2019 10:44 AM
  • User665608656 posted

    Hi koolkunz,

    To solve this problem, you could also go to the v0.9.6.8 js file you quoted. 

    Then find the Keyup event  which you commented out, and uncommented the first three statements in this method. 

    The function of these three statements is to realize the event that the fixed title and column scroll along the tab key.

    For more detailed commented-out information, refer to the following code:

    panelitemcontent.bind("keyup", function (e) {
                    if (e.keyCode == 9) {
                       var target = $(e.target);
                       if (!target[0]) { return; }
                       processHorizontal(target);
                    //    processVertical(target);
                    //    var targetfreezeid = target[0].id + "_freezeitem";
                    //    var targetfreeze = $("#" + targetfreezeid);
                    //    if (targetfreeze[0]) {
                    //        targetfreeze.focus();
                    //    }
                    }
                });
     

    The result of my work demo: 


    Best Regards,

    YongQing.

    Thursday, May 16, 2019 3:18 AM
  • User-633670384 posted

    Hi koolkunz,

    To solve this problem, you could also go to the v0.9.6.8 js file you quoted. 

    Then find the Keyup event  which you commented out, and uncommented the first three statements in this method. 

    The function of these three statements is to realize the event that the fixed title and column scroll along the tab key

    Best Regards,

    YongQing.

    Hi,

    Thanks for your help, this has fixed the scrolling of fixed header. But when I edit a column the freezed columns dont scroll as shown in the image below :

    Thursday, May 16, 2019 9:42 AM
  • User665608656 posted

    Hi koolkunz,

    As with the previous horizontal scroll question, you need to find the keyup event in the v0.9.6.8js file.

    Then,on the basis of shipping to modify, cancel the fourth line of comment, and enter the 'processVertical(target);'  by clicking F12.

    In the method definition, comment this statement 'panelitemcontent.scrollTop(scrollTop);' out, then the vertical scroll bar can scroll along with your tab key.

    The following codes are what need to be modified in v0.9.6.8 js:

    First Part:

    panelitemcontent.bind("keyup", function (e) {
    
                    if (e.keyCode == 9) {
    
                        var target = $(e.target);
    
                        if (!target[0]) { return; }
    
                        processHorizontal(target);
                        processVertical(target);
    
                        //var targetfreezeid = target[0].id + "_freezeitem";
    
                        //var targetfreeze = $("#" + targetfreezeid);
    
                        //if (targetfreeze[0]) {
                        //    targetfreeze.focus();
                        //}
                    }
                });
    

    Second Part:

           function processVertical(target) {
    
                    var targetTop = target.position().top;
                    var targetHeight = target.outerHeight();
    
                    var scrollTop = panelitemcontent[0].scrollTop;
                    var panelHeight = panelitemcontent.outerHeight();
    
                    //console.log("processVertical");
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("panelHeight: " + panelHeight);
                    //console.log("targetTop: " + targetTop);
                    //console.log("targetHeight: " + targetHeight);
    
                    scrollTop = targetTop + targetHeight - panelHeight + scrollTop + 5;
    
                    if (scrollTop < 0) {
                        scrollTop = 0;
                    }
    
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("---");
    
                    var minWidthv = verticalrail.outerHeight() - verticalbar.outerHeight();
                    var maxWidthv = panelitemcontent[0].scrollHeight - panelitemcontent.outerHeight();
    
                    var top = (scrollTop / (maxWidthv / minWidthv)) + opt.arrowsize;
    
                    verticalbar.css({ top: top + 'px' });
    
                  //  panelitemcontent.scrollTop(scrollTop);
    
                    if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") {
                        freezeitemcontent.scrollTop(scrollTop);
                    }
                }

    The result of my work demo: 


    Best Regards,

    YongQing.

    Friday, May 17, 2019 1:58 AM
  • User-633670384 posted

    Yongqing Yu

    Hi koolkunz,

    As with the previous horizontal scroll question, you need to find the keyup event in the v0.9.6.8js file.

    Then,on the basis of shipping to modify, cancel the fourth line of comment, and enter the 'processVertical(target);'  by clicking F12.

    In the method definition, comment this statement 'panelitemcontent.scrollTop(scrollTop);' out, then the vertical scroll bar can scroll along with your tab key.


    Best Regards,

    YongQing.

    Hi,

    I see that in your example you have not fixed any columns which is why you cant see the problem that is happening with me.

    As you can see in the gif that the fixed columns are not scrolling properly even after making these changes in js file.

    Friday, May 17, 2019 12:35 PM
  • User665608656 posted

    Hi koolkunz,

    According to your description,I made an example with two fixed columns in gridview. 

    To solve this problem, we also need to modify the corresponding code in the js file of v0.9.6.8.

    In the function processVertical(target)  method, 

    panelitemcontent.scrollTop(scrollTop);
    if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") { freezeitemcontent.scrollTop(scrollTop); }

    These two statements above are used to confirm where the fixed and non-fixed columns scroll after you press the tab key.

    The key problem is in the parameter scrollTop,

    According to this definition as below,when you press the tab key, all content reaches the bottom of the current. 

     scrollTop = targetTop + targetHeight - panelHeight + scrollTop;

    You can modify scrollTop according to your needs, or you can comment on the statement directly. 

    The following codes are what need to be modified in v0.9.6.8 js :

    First Part:

            panelitemcontent.bind("keyup", function (e) {
                    if (e.keyCode == 9) {
                        var target = $(e.target);
                        if (!target[0]) { return; }
                        processHorizontal(target);
                        processVertical(target);
                        var targetfreezeid = target[0].id + "_freezeitem";
                        var targetfreeze = $("#" + targetfreezeid);
                        if (targetfreeze[0]) {
                            targetfreeze.focus();
                        }
                    }
                });

    Second Part:

                function processVertical(target) {
                    var targetTop = target.position().top;
                    var targetHeight = target.outerHeight();
                    var scrollTop = panelitemcontent[0].scrollTop;
                    var panelHeight = panelitemcontent.outerHeight();
    
                    //console.log("processVertical");
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("panelHeight: " + panelHeight);
                    //console.log("targetTop: " + targetTop);
                    //console.log("targetHeight: " + targetHeight);
    
                    //scrollTop = targetTop + targetHeight - panelHeight + scrollTop + 5;
    
                    if (scrollTop < 0) {
                        scrollTop = 0;
                    }
    
                    //console.log("scrollTop: " + scrollTop);
                    //console.log("---");
    
                    var minWidthv = verticalrail.outerHeight() - verticalbar.outerHeight();
                    var maxWidthv = panelitemcontent[0].scrollHeight - panelitemcontent.outerHeight();
    
                    var top = (scrollTop / (maxWidthv / minWidthv)) + opt.arrowsize;
    
                    verticalbar.css({ top: top + 'px' });
    
                    panelitemcontent.scrollTop(scrollTop);
    
                    if (opt.freezesize != 0 && horizontalrail[0].style.display != "none") {
                        freezeitemcontent.scrollTop(scrollTop);
                    }
                }

    The result of my work demo: 


    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 20, 2019 8:27 AM
  • User-633670384 posted

    Hi 

    Can you please share the full modified file?

    We have made so many modifications I am getting confused where to add modifications (to original file or already modified file)

    Edit : So I made the changes to fresh file and it is working properly now. Thank you very much for your help even the developer of the script was not responding to my mails so once again thank you so much.

    By the way I also commented out from processHorizontal function the line :

    scrollLeft = targetLeft + targetWidth - panelWidth + scrollLeft + 5;

    Earlier the scrolling was jumping (it was first scrolling to bring the current textbox to middle of scroll and then taking it to the end of scroll , removing this line just brings it to the middle which is better I think.

    This is the final file that I am using : https://pastebin.com/LNBTGfCU 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 20, 2019 8:44 AM