<div class="modal fade bd-example-modal-lg" id="Edit" tabindex="-1" role="dialog" aria-labelledby="addNew" aria-disabled="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Edit
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-disabled="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="card-body boxShadow whiteBg mb-3">


                    <div class="d-flex justify-content-between">
                        <div class="row w-100 mr-4">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="EditCustomer" class="require">Customer</label>
                                    <select class="form-control" id="EditCustomer">
                                        <option value=""></option>
                                        <option value="May chan" selected>May chan</option>



                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">

                                <div class="form-group">
                                    <label for="EditDate">Date</label>
                                    <input type="text" class="form-control dueDate" id="EditDate" value="30 Jan 2020">
                                </div>


                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="EditInvoice" class="require">Delivery#</label>
                                    <select class="form-control" id="EditInvoice">
                                        <option value=""></option>
                                        <option value="INV-220428-001" selected>DN-220428-001</option>

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="custom-dropdown">
                            <select class="statusSelect">
                                <option value="" hidden>Status</option>
                                <option value="Pending">Pending</option>
                                <option value="Completed">Completed</option>
                                <option value="Confirmed">Confirmed</option>
                            </select>
                        </div>


                    </div>


                </div>

                <div class="card-body boxShadow whiteBg mb-3">
                    <div id="gridEditworksheet" class="newGrid"></div>

                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary saveDate shadow_blue">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {


        $('#EditDate').datepicker({
            format: 'dd M, yyyy'
        });


        var NewData = [{
            'Item_Desc': "1.5 天堂鳥 470 灰",
            Qty: "1",
            'Use_Qty': "2",
            Size: "15 ",
            Remark: "something that you say, giving your opinion about something or stating a fact:"
        }, {
            'Item_Desc': "1.5 天堂鳥 470 灰",
            Qty: "1",
            'Use_Qty': "2",
            Size: "15 ",
            Remark: "something that you say, giving your opinion about something or stating a fact:"
        }, {
            'Item_Desc': "1.5 天堂鳥 470 灰",
            Qty: "1",
            'Use_Qty': "2",
            Size: "15 ",
            Remark: "something that you say, giving your opinion about something or stating a fact:"
        }, {
            'Item_Desc': "1.5 天堂鳥 470 灰",
            Qty: "1",
            'Use_Qty': "2",
            Size: "15 ",
            Remark: "something that you say, giving your opinion about something or stating a fact:"
        }, {
            'Item_Desc': "1.5 天堂鳥 470 灰",
            Qty: "1",
            'Use_Qty': "2",
            Size: "15 ",
            Remark: "something that you say, giving your opinion about something or stating a fact:"
        }];
        var IconField = function(config) {
            jsGrid.Field.call(this, config);
        };
        IconField.prototype = new jsGrid.Field({


            itemTemplate: function(value) {
                var insertValue = this._insertValue = $(
                    `<i class="mdi mdi-select-all"></i>`);
                return insertValue;
            },
            insertTemplate: function(value) {

                return this._insertInput = $(
                    `<i class="mdi mdi-select-all"></i>`
                );
            },
            editTemplate: function(value) {

                return this._editInput = $(
                    `<i class="mdi mdi-select-all"></i>`
                );

            },
            insertValue: function() {
                return this._insertInput.val();
            },

            editValue: function() {


                return this._editInput.val();
            }
        });
        jsGrid.fields.iconField = IconField;

        var RemarkField = function(config) {
            jsGrid.Field.call(this, config);
        };
        RemarkField.prototype = new jsGrid.Field({


            itemTemplate: function(value) {
                var insertValue = this._insertValue = $(
                    `<span class="textareaText" >${value}</span>`);
                return insertValue;
            },
            insertTemplate: function(value) {

                return this._insertInput = $(
                    `<textarea class="textareaRow" rows="1"></textarea>`
                );
            },
            editTemplate: function(value) {

                return this._editInput = $(
                    `<textarea class="textareaRow" rows="1">${value}</textarea>`
                );

            },
            insertValue: function() {
                return this._insertInput.val();
            },

            editValue: function() {


                return this._editInput.val();
            }
        });

        jsGrid.fields.remarkField = RemarkField;

        const SelectField = jsGrid.SelectField;

        function Select2Field(config) {
            SelectField.call(this, config);
        }

        Select2Field.prototype = new SelectField({
            itemTemplate: function(value) {
                var insertValue = this._insertValue = value;
                return insertValue;
            },
            insertValue: function() {
                return this._insertInput.val();
            },

            _createSelect() {
                const el = SelectField.prototype._createSelect.call(this);
                setTimeout(() => el.select2({
                    placeholder: ''
                }), 100);
                return el;
            }
        });

        jsGrid.fields.select2 = jsGrid.Select2Field = Select2Field;



        $("#gridEditworksheet").jsGrid({
            height: "auto",
            width: "100%",
            inserting: true,
            editing: true,
            sorting: true,
            paging: true,
            data: NewData,
            rowClass: function(item, itemIndex) {
                return "client-" + itemIndex;
            },

            controller: {
                loadData: function() {
                    return NewData.slice(0, 15);
                }
            },

            fields: [{
                    name: "Item_Desc",
                    type: "text",
                    width: 100,
                    align: "left"
                },
                {
                    name: "Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Size",
                    type: "number",
                    width: 80,
                    align: "left"
                },
                {
                    name: "Use_Qty",
                    type: "number",
                    width: 80,
                    align: "left"
                }, {
                    name: "Remark",
                    type: "remarkField",
                    width: 150,
                    sorting: false
                },
                {
                    type: "control",
                    width: 50,
                    editButton: false
                }
            ],
            onRefreshed: function() {
                var $gridData = $("#gridEditworksheet .jsgrid-grid-body tbody");

                $gridData.sortable({
                    update: function(e, ui) {
                        // array of indexes
                        var clientIndexRegExp = /\s*client-(\d+)\s*/;
                        var indexes = $.map($gridData.sortable("toArray", {
                            attribute: "class"
                        }), function(classes) {
                            return clientIndexRegExp.exec(classes)[1];
                        });
                        alert("Reordered indexes: " + indexes.join(", "));

                        // arrays of items
                        var items = $.map($gridData.find("tr"), function(row) {
                            return $(row).data("JSGridItem");
                        });
                        console && console.log("Reordered items", items);
                    }
                });
            },
            rowClick: function(args) {

                var $row = $(args.event.target).closest("tr");
                var $cell = $(args.event.target).closest(".jsgrid-cell");
                cellIndex = $($row.find("td")).index($cell);
                if (this._editingRow) {
                    this.updateItem();
                }
                if (this.editing) {
                    this.editItem($row);
                }
            }


        });
    });
</script>