Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #100734
    astelcom
    Member
    Up
    0
    Down

    Hello,
    I’ve integrated the Smart grid inside my application, and used the Business grid demo to do it :
    All seemed to work well, but I got an unexpected behavior of the “row menu command” , If my grid is on top of page, menu appears well, but when I need to scroll on the page to get an element that is on the bottom of the grid, the menu does not pop anymore.
    This can be also shown on “Business grid demo” if it is opened on “full page” (vs iframe inside the website) :
    https://www.htmlelements.com/demos/grid/custom-style/index.htm
    Steps :

    • Reduce the browser size for having to scroll on grid,
    • Scroll to reach the last line of the grid.
    • click on the Row menu button => The menu does not appear.

    Is there a way to get this working ?

    #100735
    admin
    Keymaster
    Up
    0
    Down

    Hi astelcom,
    Thank you for the feedback.
    I confirm the reported DataGrid behavior. We will fix it for the next release which will be in the second half of this month.
    Best Regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    #100736
    astelcom
    Member
    Up
    0
    Down

    Hello Peter,
    Thanks for this first answer.
    As a workaround, I tried to replace the row menu button by a link inside a grid column, but I experience issues while adding Events on these links !
    I tried several ways :
    In grid initialisation, I used a formatFunction inside the columns section , with the following code :

    {label: 'Action', width: '30px', cellsAlign: 'right', allowResize: false, align: 'right', dataField: 'Status', allowGroup: false,
       formatFunction(settings) {
          if (settings.value === 'Active') {
             settings.template = '<div></div>';
          } else {
             settings.template = '<div></div>';
          }
       }
    }

    With the following eventHandling after the grid load :

    	var oEnableItemList = document.querySelectorAll(".appenableitem");
    	oEnableItemList.forEach(function(item) {
    		item.addEventListener('click',function(event) {
    			console.log(event.target);
    		});
    	});
    	var oDisableItemList = document.querySelectorAll(".appdisableitem");
    	oDisableItemList.forEach(function(item) {
    		item.addEventListener('click',function(event) {
    			alert(event.target);
    		});
    	});
    

    Without any success : the DOMNodeLists of the querySelector are empty.
    Other way :

    {label: 'Action', width: '30px', cellsAlign: 'right', allowResize: false, align: 'right', dataField: 'Status', allowGroup: false,
       formatFunction(settings) {
          if (settings.value === 'Active') {
             settings.template = '<div></div>';
          } else {
             settings.template = '<div></div>';
          }
       }
    }

     
    With the following functions :

    function enableMyItem(element) {
    alert('enableItem');
    }
    function disableMyItem (element) {
    alert('disableItem');
    }
    

    ends with :
    ReferenceError : enableMyItem is undefined.
    ReferenceError : enableMyItem is undefined.
    Can you tell me where I’m wrong ? Did I miss something ?

    #100737
    astelcom
    Member
    Up
    0
    Down

    here are the two parts of grid initialization of the precedent post : as they have been reformatted by forum :
    http://filestore.astelcom.net/HtmlElements/gridInit1.txt
    http://filestore.astelcom.net/HtmlElements/gridInit2.txt
    Regards.

    #100738
    admin
    Keymaster
    Up
    0
    Down

    Hi astelcom,
    The Grid has cellClick and rowClick events. You can use them to handle clicks and custom logic.
    Best Regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.