Dgrid selector inconsistently working in touch screen devices like ipad dgrid/v1.1.0

pnaqati commented 3 years ago

My dgrid's selection and selector with selectionMode : none perfectly works in any browser. However , recently I found that there is an issue with selection when using touch screen devices like ipad and on touch screen lenova laptop. I have another view where it works in touch screen as well but the difference is that dgrid is directly created in a parent div. In another use case where it fails in touch screen only is that when dgrid is inserted in the parent tabcontainer.

Following is the code snippet:

var generateComListStore=function(){

        require([               
                'dojo/_base/declare',               
                'dstore/Rest',          
                'dgrid/Grid',           
                 "dgrid/Selection",
                 'dgrid/extensions/Pagination', 
                 "dgrid/Selector",                      
        ], function (declare,Rest,Grid,Selection,Pagination,Selector) {

        var rowsPerPage =50;
        var pageUrl= "/Company/";
        //catalogueStore = declare([ Rest, Trackable ]);
        compListStore= new Rest({ target: pageUrl,idProperty:'compcode',rangeStartParam: 'offset',rangeCountParam: 'limit'});           
        comListGrid = new (declare([ Grid,Selection,Pagination,Selector]))({    
        id: 'comListGrid123',           
        showHeader :true,               
        pageSizeOptions: [50,100,200,400],
        pagingLinks: false,
        pagingTextBox: true,
        showLoadingMessage:true,
        firstLastArrows: true,
        rowsPerPage: rowsPerPage,
        offset:0,       
        selectionMode:'none',       
        allowSelectAll:true, 
        showLoadingMessage:true,            
        collection:compListStore,           
        columns:{
            col1: {selector: 'checkbox',  label:''} ,               
            companyname: 'Company',
            status:'Status',
            description: 'Description'   
        },  

        loadingMessage: "Loading data...",
        noDataMessage: "No results found."
        }); 
        dojo.byId("gridCompListContainer").appendChild(comListGrid.domNode);    
        //compListPane.addChild(comListGrid);           
        comListGrid.startup();
        //compListPane.startup();               
        doOnOrientationChange();            
        comListGrid.on('.dgrid-row:click', function (event) {           
             var cell = comListGrid.cell(event);                
             var pageUrl= "/checkValidSession";     
             require(["dojo/request"], function(request){
             request(pageUrl).then(function(data){            
                 if(data == 1){
                     if(cell.column.id != 'col1')
                        showCompany(cell.row.data.companyname);
                 }else{
                    window.location="/login?error=sessionExpired";
                 }
             });
           });  

        });
});

}

pnaqati commented 3 years ago

I even upgraded to dgrid version 1.3.3 but issue stll remains. In touch screen It selects the rows even if selector checkbox is not checked

msssk commented 3 years ago

@pnaqati can you clarify in what way dgrid is not working? I have created a grid with your settings and did not find any problems with selection in Safari on iOS or Chrome/Firefox on Android.

Based on your description it sounds like you may be creating a dgrid instance as a descendant of a DOM element that is not initially visible. Some dgrid functionality is dependent on the dgrid DOM node being visible and in the document flow when dgrid is started up. For example, when dgrid is used within a tab that is not initially visible dgrid's startup method should NOT be called before the tab is selected and made visible. Only after the tab has been selected and its content made visible should grid.startup() be called.

pnaqati commented 3 years ago

The dgrid is programmatically inserted into a tabcontainer which is already created . It works perfectly in any browser except that in touch screens the selector checkbox exhibits inconsistent behaviour. check following code dojo.byId("gridCompListContainer").appendChild(comListGrid.domNode);
//compListPane.addChild(comListGrid);
comListGrid.startup();

I am appending it to the tabcontainer div which is a parent dom and first tabpane as shown below.

I have another view where dgrid is directly inserted into parent div dom and it works there . I think you need to test it in tab dijit/layout/TabContainer having descendents as various tabpanes dijit/layout/ContentPane. Please do let me know If you think there is any info you need.

pnaqati commented 3 years ago

I have some good news for you , It happens when I add "dojox/mobile/Switch" to the header of page. You guys can easily produce it now. It works perfectly when I remove switch and recurs when I add switch

pnaqati commented 3 years ago

Hi , I have added comments and using last comment you guys can replicate the issue Actually when i use dojox/mobile/switch this snag appears and when I remove it this defect is resolved

On Tue., Sep. 22, 2020, 8:26 p.m. Mangala Sadhu Sangeet Singh Khalsa, < notifications@github.com> wrote:

@pnaqati https://github.com/pnaqati can you clarify in what way dgrid is not working? I have created a grid with your settings and did not find any problems with selection in Safari on iOS or Chrome/Firefox on Android.

Based on your description it sounds like you may be creating a dgrid instance as a descendant of a DOM element that is not initially visible. Some dgrid functionality is dependent on the dgrid DOM node being visible and in the document flow when dgrid is started up. For example, when dgrid is used within a tab that is not initially visible dgrid's startup method should NOT be called before the tab is selected and made visible. Only after the tab has been selected and its content made visible should grid.startup() be called.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SitePen/dgrid/issues/1476#issuecomment-697050795, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARA3VX2JUYQGADR3JSG566LSHE6BPANCNFSM4RPVDDWQ .

msssk commented 3 years ago

@pnaqati can you describe what behavior you are observing? It would be very helpful if you could provide a test case as well. I have done some testing with a grid based on the code provided in this issue and the grid works well.

Test case

```html dgrid Test

```

pnaqati commented 3 years ago

@Mnagala , You just have to add switch wizard in your page where dgrid is ? I have added it to the header of my page like

Once you add it then you will get the issue with dgrid selection on touch screen only. This finding will help you produce the issue as I am able to get the issue when I add this switch in my page and once I remove it the issue with selection goes away

On Fri., Sep. 25, 2020, 9:09 p.m. Mangala Sadhu Sangeet Singh Khalsa, < notifications@github.com> wrote:

@pnaqati https://github.com/pnaqati can you describe what behavior you are observing? It would be very helpful if you could provide a test case as well. I have done some testing with a grid based on the code provided in this issue and the grid works well. Test case

<!DOCTYPE html>
dgrid Test

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe .

pnaqati commented 3 years ago

Hi Mangla , I was wondering if you were able to produce the issue , I have resolved it for now by creating toggle button in place of switch button but I really want to use switch

Best Regards Parvez

On Fri., Sep. 25, 2020, 9:33 p.m. parvez naqati, @.***> wrote:

@Mnagala , You just have to add switch wizard in your page where dgrid is ? I have added it to the header of my page like

<div id="sw" class="mblSwRoundShape1 color1" data-dojo-type="dojox/mobile/Switch" value="on" leftLabel="ON" rightLabel="OFF">

Once you add it then you will get the issue with dgrid selection on touch screen only. This finding will help you produce the issue as I am able to get the issue when I add this switch in my page and once I remove it the issue with selection goes away

On Fri., Sep. 25, 2020, 9:09 p.m. Mangala Sadhu Sangeet Singh Khalsa, < @.***> wrote:

@pnaqati https://github.com/pnaqati can you describe what behavior you are observing? It would be very helpful if you could provide a test case as well. I have done some testing with a grid based on the code provided in this issue and the grid works well. Test case

<!DOCTYPE html>
dgrid Test

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe .

edhager commented 3 years ago

@pnaqati I landed a fix in master that fixes an issue I saw with the selector checkbox on touch devices. Please try it out and let me know if the fix works for you.

pnaqati commented 3 years ago

Hi Ed , that is great , thank you. Can you please let me know which version of dojo dgrid I need to use? And where do I need to pull it from ?

Best regards Parvez

On Thu., May 13, 2021, 2:57 p.m. Ed Hager, @.***> wrote:

@pnaqati https://github.com/pnaqati I landed a fix in master that fixes an issue I saw with the selector checkbox on touch devices. Please try it out and let me know if the fix works for you.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SitePen/dgrid/issues/1476#issuecomment-840764088, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARA3VX6J4ZHMBVVQDXLHWCLTNQOH5ANCNFSM4RPVDDWQ .

SitePen / dgrid

Dgrid selector inconsistently working in touch screen devices like ipad dgrid/v1.1.0 #1476