Problem with RowMenuCommand

[astelcom]

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 ?

[admin]

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/

[astelcom]

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 ?

[astelcom]

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.

[admin]

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/

[Author]

Posts