Add row and focus in a editable grid

1
0
-1

Hi

I want to add a row in a editable grid, but only I want to use the keyboard with an enter key or tab, also i want the focus after adding the new line.

someone can I help me? I appreciate your help, Thanks

Comments

Submitted by ttoine on Fri, 03/14/2014 - 11:14

hello, could you please give more details, a screenshot, etc ?

Submitted by sam87 on Fri, 03/14/2014 - 22:37

Hello, well, I want to add a new line in a editable grid of Bonita 6, I know that Bonita 6 allows to add a row in a editable grid just by clicking in the symbol plus but using the mouse.

I want to add the same row but i don´t want to use the mouse because you need to click the symbol and position yourself in the new field, so you need to make more movements.

For to make more faster the job, I need to use the keyboard for adding the new row in the same editable grid using the keyboard with only push a one key and the same time to add the focus in the new field, so only need writing in the field.

It´s possible to make these in Bonita 6? although i know that i need some lines of code but i don´t know where to write that code and which code it would be.

regards.

1 answer

1
+3
-1
This one is the BEST answer!

Hi!

You can obtain this behaviour adding a simple javascript code. Let me explain using an example based on jQuery code:

  • add an editable grid in your form
  • add an html widget at the bottom of the page
  • add this code as data of the html widget:

<script type="text/javascript"><br />
            $(document).keypress(function(e) {<br />
                if(e.which == 13) {<br />
                    $(".bonita_form_grid_add_button").click();<br />
                }<br />
            });<br />
        </script>
This code should add a listener on keypress to the document and when you press "enter" button, using jQuery selector based on class name, searchs for "plus" button and forces a click on it.

Hope I am clear.

Let me know if this solve your problem.

Ciao

Domenico.

Comments

Submitted by sam87 on Mon, 03/17/2014 - 00:47

Thanks for your answer.

You´ve resolved me one of doubt I had, although now i want to know how to put the focus in the new line for only to write in it, so i would avoid use the mouse for to make more faster the process, and i want to know, if you know how to delete the new line? so it would backward the line and would be eliminated.

I appreciate your help, regards.

Submitted by domenico.giordano on Mon, 03/17/2014 - 11:56

Hi.

It is just a matter of scripting. Try to change the previous script with this one:

<script type="text/javascript"><br />
                    $(document).keypress(function(e) {<br />
                        var code=e.keyCode || e.which;<br />
                      if(code == 43) {<br />
                           $(".bonita_form_grid_add_button").click();<br />
                        $('.bonita_form_editable_grid tr:last').find('td:first').click();<br />
                        $(".gwt-TextArea").focus();<br />
                     }else if (code==45){<br />
                        $(".bonita_form_grid_remove_button").click();<br />
                     }<br />
                    });<br />
                </script>
when you press PLUS button "+" it will add a new row and put a focus on the textarea on the first column and if you press the MINUS button "-" it will delate the last row.

Let me know if it majes sense for you.

Ciao.

Submitted by sam87 on Tue, 03/18/2014 - 04:13

Yes, it helped properly, Thanks for your answers, you resolved my doubt, I appreciate your support, regards.

Notifications