Editable Column in Datagrid

1
Hi I have set up a datagrid to have an editable column, however the user needs to click a cell in the column twice to be able to enter values, if the user only clicks once it ignores the first character they type. Also if the user only clicks once and then tries to type '-' then it won't register, the user can try to type '-' multiple times without anything apearing. The grid does have a css class, but not sure why this would affect the editablity of the column or the number of times a user must click the cell. This behaviour is the same in both chrome and IE11. The first image is of the column in question, the second image is of a user clicking the cell once then typing 'hello', the third image is of the user clicking twice then typing 'hello'.
asked
2 answers
0

One way to fix it is by using the HTMLSnippet. Give your grid a css class (i.e. mydatagrid) and check the column name in the properties.

Add the snippet anywhere on the page, select Javascript with jQuery and add this: 

 

setTimeout(function(){
$(".mydatagrid tr:first-child .mx-name-column2").click()
;
}, 1000);

 

Be sure to change .mx-name-column2 to the column number you want your click on. This simulates the first click and will enable your user to notice the fact that the cell is editable and click on it to be able to start typing.

answered
0

We have had this issue too. It seems like Mendix focusses on the row that you click on (the row containing the editable column). So you have to click on the inputbox that shows up (or press any key) and the focus goes to the input box, then you can start typing.  A possible workaround using jQuery (not yet test crossbrowser, but does work in Chrome) is:

  • Add a class 'editable' to the editable column
  • Add this JS snippet to your page containing the editable column
  • jQuery('.editable').bind("DOMSubtreeModified", function() {
        jQuery(this).find('input').focus();
    });

 

When a user clicks an editable column, Mendix adds an input box to the editable columns DOM subtree. So what this JS code does is listen for DOM modifications on any column with the class 'editable'. Once it notices the DOM change we manually focus on the input within this DOM element. 

If i'm correct the DOMSubtreeModified is not jQuery specific, so you should be able to solve this in native Javascript as well. 

answered