Implementing adding new row on the using jquery.jeditable.js library

[zororoemmanuel]

Description

Hi I want to implement adding of a new empty row , I have tried to use some jquery to add a new row but I am batting with getting them to edit. Is there a way of enhancing the grid to also allow adding of a new row as an extra to editing.. thank you.

This is what I am trying to do $('#tblColMapping').append('

CHANCODE

');

it creates the new row but I dont have the editing capability on the new row.

Great tutorial

How to reproduce

('#tblColMapping').append('

CHANCODE

');

in this case tblColMapping is my grid, So I want to add a new row based on an existing editable row

It helps a lot if you can create a working example from this template: https://codepen.io/pen?template=pBxBXm

Expected result

Actual result

Cannot create a new row with the editable select class, it doesnt respond.

Environment

asp.net mvc jQuery version: Browser: OS:

[NicolasCARPi]

That's because you need to bind the listener to an existing element, or call again the listener once your new element is in the dom.

[zororoemmanuel]

Thanks for your quick repsonse

this is what my code looks like additing the new row

    <script>
        $(document).ready(function () {
            $("#btnAddMapp").on("click", function () {

                //cell.appendChild(element);
                  //$('#tblColMapping').append('<tr><td><text><div class="editSelect1" data-id="0" data-propertyname="ChannelCodeID">CHANCODE</div></text></td><td><text><div class="editSelect2" data-id="0" data-propertyname="SourceColumnID"></div></text></td><td><text><div class="editSelect3" data-id="0" data-propertyname="DestinationColumnID"></div></text></td>
                  $('#tblColMapping').append('<tr><td><div class="editSelect1" data-id="1" data-propertyname="ChannelCodeID">CHANCODE</div></tr>');
                  alert("Added new row");
            });
        });
    </script>
// rebinding
    <script>
        $(document).ready(function () {
            $("#editSelect1").click(function () {
                //$('select', this).addClass('editSelect1');
                alert("here");
                $('select', this).addClass('form-control pull-left w100');
                $('button', this).addClass('btn btn-sm btn-success margin10')
            });
        });
    </script>

[NicolasCARPi]

Is it really that difficult to format your code properly on github?

[zororoemmanuel]

Apologies I am still new to the platform. Let me attach the file, hope this helps view.zip