Author Topic: Autocomplete and data mapping, Auto save Functionality  (Read 4060 times)

virendraparade01

  • Newbie
  • *
  • Posts: 9
    • View Profile
Autocomplete and data mapping, Auto save Functionality
« on: August 01, 2019, 03:05:58 pm »
Issues 1:

Hey I was working with autocomplete, so here in the Item Number table when I Select one item so the column for Description and Unitofmeasure get data mapped on the basis on ItemNo but when I try to copy multiple excel rows and paste them in the grid only the first row data is mapped for Description and unit of measure and other remains blank could u plz help me out here.

Please also go through attachment for proper understanding
Image1: Selection of item number using auto-complete method.
Image2: Dap-mapped in Description and Unit of Measure column on selecting the Item number.
Image3: When the multiple rows are pasted from excel to grid Description and unit of Measure column data is not mapped.


Note: custom Implementation for LocalStorage

code:


    $(function () {
        var interval;
        var count = 0;
        var ItemNoDetails = null;
        var ItemDescription;


        var autoCompleteEditor = function (ui) {
            var $inp = ui.$cell.find("input");
            $inp.autocomplete({
                appendTo: ui.$cell,
                source: (ui.dataIndx == "list", "/RFQEntry/GetItemNO"),
                selectItem: { on: true },
                highlightText: { on: true },
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search", "");

            });
        }
        function saveChanges() {

            if (!$.active && !grid.getEditCell().$cell && grid.isDirty() && grid.isValidChange({ allowInvalid: true }).valid && count == 0) {
                count++;

                var gridChanges = grid.getChanges({ format: 'byVal' });
                return gridChanges;

            }
        }




        var obj = {
            dragColumns: { enabled: false },
            hwrap: false,
            resizable: true,
            rowBorders: false,
            autoRow: false,
            rowHt: 32,
            trackModel: { on: true }, //to turn on the track changes.
            toolbar: {
                items: [{
                    type: 'button',
                    icon: 'ui-icon-plus',
                    label: 'New Product',
                    listener: function () {
                        //append empty row at the end.
                        var rowData = {}; //empty row
                        var rowIndx = grid.addRow({ rowData: rowData });
                        grid.goToPage({ rowIndx: rowIndx });
                        grid.editFirstCellInRow({ rowIndx: rowIndx });
                        $("#grid_editing").focus();
                        count = 0;
                    }
                },
                { type: 'separator' },

                {
                    type: "<span class='saving'>Saving...</span>"
                }
                ]
            },
            scrollModel: { autoFit: true },
            editor: { select: true },


            colModel: [
                {
                    title: "ITEM", dataIndx: "ItemNo", width: 120, editor: { type: "textbox", init: autoCompleteEditor, },
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required" },
                        {
                            type: function (ui) {
                                var value = ui.value,
                                    _found = false;
                                $.ajax({
                                    url: "/RFQEntry/CheckItem",
                                    data: { 'ItemNo': value },
                                    async: false,

                                    success: function (response) {
                                        if (response == "true") {
                                            _found = true;
                                            ItemNoDetails = value;
                                           
                                        }
                                    }
                                });
                                if (!_found) {
                                    ui.msg = value + " not found in list";
                                    return false;
                                }
                            }
                        }
                    ]
                },
                {
                    title: "QUANTITY", width: 100, dataType: "integer", dataIndx: "Quanitity",
                    validations: [
                        { type: 'nonEmpty', msg: "Required" },

                    ]
                },
                {
                    title: "UNIT OF MEASURE", width: 100, dataType: "string", dataIndx: "UnitOfMeasure",
                    validations: [
                        { type: 'nonEmpty', msg: "Required" },

                    ]
                },
                {
                    title: "TARGET PRICE", width: 100, dataType: "float", dataIndx: "TargetPrice",
                    validations: [{ type: 'gte', value: 0, msg: "Required" }]
                },

                {
                    title: "DESCRIPTION", width: 100, dataType: "string", align: "center", dataIndx: "Description",
                    validations: [{ type: 'gte', value: 0, msg: "Required" }]
                },

                {
                    title: "NOTES", width: 100, dataType: "string", dataIndx: "Notes",
                    render: function (ui) {
                        return "<button type='button' class='Note_btn'>Add Note</button>";
                    },
                    render: function (ui) {
                        return "<button type='button' class='Note_btn'>Add Note</button>";
                    },

                    postRender: function (ui) {

                        var grid = this,
                            $cell = grid.getCell(ui);
                        $cell.find(".Note_btn")
                            .button()
                            .bind("click", function (evt) {

                                $("#popup-dialog-crud").dialog({

                                });
                                $("#popup-dialog-crud").dialog("open");
                                $("#a").click(function () {
                                    console.log("data added")
                                });

                                $("#c").click(function () {
                                    $("#popup-dialog-crud").dialog("close");
                                });
                            });

                    }
                },


                { title: "PACKING INSTRUCTIONS", width: 100, dataType: "string", dataIndx: "PackingInstructions" },

                {
                    title: "Attachments", width: 100, dataType: "string", dataIndx: "Attachments",
                    render: function (ui) {
                        return "<button type='button' class='Attach_btn'>Add Attachment</button>";
                    },

                    postRender: function (ui) {

                        var grid = this,
                            $cell = grid.getCell(ui);
                        $cell.find(".Attach_btn")
                            .button()
                            .bind("click", function (evt) {

                                $("#Attachments").dialog({

                                });
                                $("#Attachments").dialog("open");
                                $("#aa").click(function () {
                                    console.log("attachments added")
                                });

                                $("#ac").click(function () {
                                    $("#Attachments").dialog("close");
                                });
                            });

                    }
                },


                {
                    title: "", editable: false, minWidth: 85, sortable: false,
                    render: function (ui) {
                        return "<button type='button' class='delete_btn'>Delete</button>";
                    },
                    postRender: function (ui) {
                        var grid = this,
                            $cell = grid.getCell(ui);
                        $cell.find(".delete_btn")
                            .button({ icons: { primary: 'ui-icon-scissors' } })
                            .bind("click", function (evt) {
                                grid.deleteRow({ rowIndx: ui.rowIndx });
                            });
                    }
                }
            ],


            formulas: [
                ["UnitOfMeasure", function () {
                    var id = ItemNoDetails;
                    var Unitresult = "";
                    localStorage.removeItem("Unitresult");
                    localStorage.removeItem("ItemDescription");
                    if (id != null) {
                        $.ajax({
                            url: "/RFQEntry/GetItemDescription",
                            data: { 'ItemNo': id },
                            async: false,
                            success: function (response) {
                                var ConvertJsonResponse = JSON.parse(response);
                                Unitresult = ConvertJsonResponse.UnitOfMeasure;
                                ItemDescription = ConvertJsonResponse.Description;
                                localStorage.setItem("ItemDescription", ItemDescription);
                                localStorage.setItem("Unitresult", Unitresult);
                            }
                        });
                    }
                    ItemNoDetails = null;
                    return localStorage.getItem("Unitresult");
                }
                ],

                ["Description", function () {

                    return localStorage.getItem("ItemDescription");

                }],

            ],


            postRenderInterval: -1, //synchronous post render.
            pageModel: { type: "local", rPP: 20 },
        };
        var grid = pq.grid("#grid_editing", obj);
    });
==============================================================================================
Issue2

AutoSave Functionality

As we are going to the use session to store the temporary data of grid row one by one using auto-save functionality and at the end clicking on submit button all the data should be saved to the database from the session so here which would be the best approach.



paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6179
    • View Profile
Re: Autocomplete and data mapping, Auto save Functionality
« Reply #1 on: August 01, 2019, 05:08:46 pm »
Issue 1: screenshots are missing. Better to share a jsfiddle/ plnkr so that I can check first hand experience of the issue.

Issue 2: Recommended to use batch editing if you want to save changes at the end with submit button.

https://paramquery.com/pro/demos/editing_batch

virendraparade01

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Autocomplete and data mapping, Auto save Functionality
« Reply #2 on: August 01, 2019, 06:02:29 pm »
As u have recommended about the batch editing, but here if the user closes the tab without saving the data and return back to the same page he should be able to view the data whatever he had added previously. so here as the rows are filled one by one we were the thinking them to add to the session so even though after a while he returns back to the page he could be able to see whatever he has entered. and the second point is our client is going to add thousands of records, so the same we are thinking to store in a session, so in such case would it be reliable to store the data in session.

virendraparade01

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Autocomplete and data mapping, Auto save Functionality
« Reply #3 on: August 02, 2019, 11:02:48 am »
Hy Hello,
   Please go through the link shared below of jsfiddle where I have uploaded my code.
 
Note:In code there is commented code,  please go through the case1, case2, case3 where I have explained issues in each case.
currently, the working code is of case 1 issue.

Link: https://jsfiddle.net/virendraparade01/h1ugy5ra/4/
Thanks.