get the value of row before changing in table if cancel click

ahmed salah asked on Jul 25, 2016 9:06 AM

in my code below i can edit row success without any error but if i need to cancel value edited in row OR get value before changed what i write to cancel edit in row in table by using jquery

my code as following

@{
    Layout = null;

}
<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script>

      

        $(function () {

            $("#btn").click(function ()

            {

                var x = $("#txt1").val();

                var y = $("#txt2").val();

                var z = $("#mycountry").val();

                $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td><td><input type='button' class='e' value='Cancel'/></td></tr>");

            });

            $("#tb").on("click", ".c", function () {

                //$(this).parent().parent().remove();

                $(this).closest('tr').remove();

            });

            $("#tb").on("click", ".d", function () {

               var row = $(this).closest('tr').toggleClass("editing");

               row.find("td").slice(0, 2).prop("contenteditable", row.hasClass("editing"));

              var myselect = '<select id="mycountr1" name="mycountry1">' +

               '<option>---select---</option>' + '<option>Egypt</option>' + '<option>qatar</option>' + '<option>saudia</option>' + '<option>emarates</option>'

              '</select>';

              var dropcountry = $(this).parent().prev().prev().text;

              $(this).parent().prev().prev().html(myselect);

               

                //$('#tb').append(myselect);

                //  $("#tb").children().children().eq(3).children().eq(3).append("myselect");

            });

            $("#btndis").on('click', function () {

                $("body").append("<ul id='listNames''></ul>");

                $('#tb td:nth-child(2)').each(function () {

                    $("#listNames").append("<li>" + $(this).text() + "</li>")

                });

            });

            




        });

    </script>

   

    <style>

        .editing {

            background: yellow;

        }

    </style>

</head>

<body>

    <div>

        ID<input type="text" id="txt1" /><br />

        Name<input type="text" id="txt2" /><br />

        Country: <select id="mycountry">

    <option>---select---</option>

    <option>Egypt</option>

    <option>qatar</option>

    <option>saudia</option>

    <option>emarates</option>

</select><br />

        <input type="button" value="add" id="btn" />

        <input type="button" value="display" id="btndis" />




        <table>

            <thead>

                <tr>

                    <td>

                        ID

                    </td>

                    <td>

                        Name

                    </td>

                    <td>

                        Country

                    </td>

                    <td>

                </tr>

            </thead>

            <tbody id="tb"></tbody>

        </table>

    </div>

</body>

</html>

Replies

0

Maya Kirova answered on Jul 25, 2016 9:06 AM

Hello ahmed salah,

Thank you for posting in our forum.

It appears that you’re currently not using an igGrid for displaying and editing your data.

If you’d like to use the igGrid control for editing your data you can refer to the following example that showcases the functionality and different options available:

http://www.igniteui.com/grid/editing-api-events

If you’d like to cancel the value change for a specific column in a igGrid you can use the editCellEnding event that the grid provides:

http://www.igniteui.com/help/api/2016.1/ui.iggridupdating#events:editCellEnding

The event arguments provide both the current edited value (ui.value) and the old value (ui.oldValue).

Let me know if you have any question in regard to the igGrid.

Best Regards,

Maya Kirova

Infragistics, Inc.

http://www.infragistics.com/support