I want to duplicate my row with same value as when render

copsychus

When page load started, the table already generate 1 row with dropdownlist, textbox and row number, i want to add new row into datatables with same value as when render, how to do that ? because my rowindex, dropdownlist with data already in datatable's render.

 var tableSample = $('#tbGridAddReceiptItem').DataTable({
                responsive: true,
                ajax: {
                    url: '@Url.Action("ReceiptItemGrid")',
                    type: "POST",
                    datatype: "json",
                    data: {
                        InvoiceId: function () { return $('#InvoiceId').val() },
                        length: 100
                    }
                 },
                 columnDefs: [
                 ],

                 dom: "",
                 //pagingType: "numbers",
                 pageLength: 100,
                 //lengthMenu: [[5, 10, 15, 20], [5, 10, 15, 20]],
                 autoWidth: false,
                 bInfo: false,
                 bStateSave: false,
                 order: [[1, 'asc']],
                 buttons: [],
                 processing: false,
                 serverSide: true,
                 search: false,
                 orderMulti: false,
                 ordering: false,
                 paging: false,
                 columns: [
                    {
                        data: null,
                        name: null,
                         "width": "5%",
                         orderable: false,
                         title: "@Resources.Views.PaymentResource.Order",
                         render: function (data, type, row, meta) {
                             return meta.row + meta.settings._iDisplayStart + 1;
                         }
                    },
                    {
                        data: "InvoiceItems",
                        name: "InvoiceItems",
                        "width": "30%",
                        orderable: false,
                        title: "รายการ",
                        render: function (d, t, r, m) {

                            var $select = $("<select></select>", {
                                "id": "ddlPaymentStatus_" + m.row,
                                "value": d.Value,
                                "class": "select2-table select2-border border-primary form-control",
                                "data-border-color": "warning",
                                "data-border-variation": "darken-2",

                            });
                            $.each(d, function (k, v) {
                                var $option = $("<option></option>", {
                                    "text": v.Text,
                                    "value": v.Value
                                });
                                if (r.PaymentStatusId == v.Value) {
                                    $option.attr("selected", "selected")
                                }
                                $select.append($option);
                            });
                            return $select.prop("outerHTML");
                        }
                    },
                    {
                        data: null,
                        name: null,
                        "width": "25%",
                        orderable: false,
                        title: "@Resources.Views.PaymentResource.SampleName",
                        render: function (d, t, r, m) {
                            var html = '<input type="textbox" id="txtPrice_'+m.row+'" name="txtPrice_'+m.row+'">';

                            return html;
                        }
                    },
                    {
                        data: "null",
                        name: "null",
                        "width": "20%",
                        orderable: false,
                        title: "@Resources.Views.PaymentResource.SampleFee",
                        render: function (d, t, r, m) {
                            var html = '<label id="lblTotalPrice_' + m.row + '" name="lblTotalPrice_' + m.row + '">';

                            return html;
                        }
                    },
                 ]
             });

copsychus

Another question, when i was going to add row, the InvoiceItems render parts show "Cannot read property Value of undefined" , how to add data for render then ?
this is my code , result.data is selectlist with Text and Value

 $('#addRow').click(function () {

                var invoiceId = $("#InvoiceId").val();

                 $.ajax({
                        url: '@Url.Action("GetInvoiceList")',
                        cache: false,
                        data: { invoiceId: invoiceId },
                        success: function (result) {
                            if (result.status != "") {
                                console.log(result.data);
                                tableSample.rows.add(['', result.data, '', '']).draw();

                            }
                        }
                    });
            });

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

copsychus

already solve by change from ajax datasource to javascript datasource, i just read from many thread, it show "row.add" is client slide with not work with ajax because whenwvere add rows and draw() it will pull data from server-side which row will always be the same as page-load.