Adding row on button click

singhswat

I'm trying to add a row(s) on button click... below is my code.
Problem
1) I have added a dropdownlist for the newly added user to select, how can i know the selected item?
2) I have a hidden column but since it is a rowid I want to know the rowid value, how to map the rowid value and post it back in json response.

 "columnDefs":
               [
                   {
                       "targets": [0],
                       "visible": false,
                       "searchable": false,
                       "width": "10px"
                   },
                   {
                       "targets": [1],
                       "visible": true,
                       "searchable": true,
                       "width": "10px"
                   },

3) My newly added row doesn't show in the json response that is posted back

    @section scripts{
        <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <link href="~/Content/datatablesStyle.css" rel="stylesheet" />
        <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
        <script src="~/Scripts/jqueryMilestoneMetadata.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {
                var table = $('#demoGrid').DataTable();

                $('#demoGrid tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });
            });     



            $(function () {
                $('#addbtn').on('click', function () {
                    var t = $('#demoGrid').DataTable();                
                    t.row.add({
                        "Rowid": 0,
                        "City": '<div>'+
                            '<select class= "selectpicker">' +
                            '<option value ="1">UP</option>'+
                            '<option value ="2">AP</option> '+
                            '<option value ="3">CDR</option> '+                        
                            '</select></div>',
                        "IsActive": '1'
                    }).draw(false);
                });
            });


            //Code to save changes
            $(function () {
                $('#submitbtn').on('click', function () {
                    var tr = $($("#demoGrid").get(0)).find("tr:gt(1)");
                    debugger;
                    var list = [];
                    var listtr = [];
                    jQuery.ajaxSettings.traditional = true;
                    $(tr).each(function (i, n) {
                        var j = 0;
                        var listtd = {};
                        listtd.Rowid = $(n).find("td:eq(" + j + ")").text();
                        listtd.City = $(n).find("td:eq(" + j + 1 + ")").text();
                        listtd.IsActive = $(n).find("td:eq(" + j + 8 + ")").text();
                        listtr.push(listtd);
                    });

                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("method", "controller")',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: JSON.stringify({data: listtr}),
                        success: function (data) {
                            alert(111);

                        }
                    })
                });
            });
        </script>
    }
    <body>
        <div class="container">        
            <div class="display">
                <input type="button" value="Add New" id="addbtn" class="btn btn-primary btn-xs" />
                <input type="button" value="Submit" id="submitbtn" class="btn btn-primary btn-xs" style="float: right; " />
                <div style="height:5px"></div>
                <table id="demoGrid" class="table table-striped table-bordered dt-responsive wrap" cellspacing="0">                
                    <thead>
                        <tr>
                            <th>Rowid</th>
                            <th>City</th>
                            other columns...
                            <th>IsActive</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>

singhswat

Updated code..

$(function () {
            $('#addbtn').on('click', function () {
                var t = $('#demoGrid').DataTable();                
                t.row.add({
                    "Rowid": 0,
                    "City": '<div>'+
                        '<select class= "selectpicker">' +
                        '<option value ="1">UP</option>'+
                        '<option value ="2">AP</option> '+
                        '<option value ="3">MH</option> '+                        
                        '</select></div>',
                     "State": '<input type=' + 'text' + ' placeholder =' + 'Enter your state' + ' />',
                    "IsActive": '1'
                }).draw(false);
            });
        });

allan

1) I have added a dropdownlist for the newly added user to select, how can i know the selected item?

You'd need to have a change event on the select list. A delegated change event handler on select elements in the table would be the way to do that - e.g.

$('#demoGrid').on( 'change', 'select', function () {
  var rowData = t.row( $(this).closest('tr') ).data();
  ...
} );

2) I have a hidden column but since it is a rowid I want to know the rowid value, how to map the rowid value and post it back in json response.

Use row().data() to get the data for the row. I've shown that in the above code as well.

Allan