Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
ahmed salah
60
get the value of row before changing in table if cancel click
posted

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>
Parents
No Data
Reply
  • 29417
    Offline posted

    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://ko.infragistics.com/support

     

     

Children
No Data