Author Topic: File upload through batch editing example  (Read 4411 times)

Chaitanya21

  • Newbie
  • *
  • Posts: 17
    • View Profile
File upload through batch editing example
« on: March 24, 2017, 07:10:56 pm »
Hi Admin,

I have not worked on file upload. Please help me to complete my code.

Code: [Select]
var arrayData="";
$(function () {
   


    //called when accept changes button is clicked.
    function acceptChanges() {
        //attempt to save editing cell.
        //debugger;
        if (grid.saveEditCell() === false) {
            return false;
        }

        var isDirty = grid.isDirty();
        if (isDirty) {
            //validate the new added rows.               
            var addList = grid.getChanges().addList;
            for (var i = 0; i < addList.length; i++) {
                var rowData = addList[i];
                var isValid = grid.isValid({ "rowData": rowData }).valid;
                if (!isValid) {
                    return;
                }
            }
            var changes = grid.getChanges({ format: "byVal" });
alert(JSON.stringify(changes))
            //post changes to server
            $.ajax({
                dataType: "json",
                type: "POST",
                async: true,
                beforeSend: function (jqXHR, settings) {
                    grid.showLoading();
                },
                url: "/ExpenseManagement/saveExpense", //for ASP.NET, java                                               
                data: { list: JSON.stringify(changes) },
                processData : false,
                contentType : false,
                success: function (changes) {
                    //debugger;
                    grid.commit({ type: 'add', rows: changes.addList });
                    grid.commit({ type: 'update', rows: changes.updateList });
                    grid.commit({ type: 'delete', rows: changes.deleteList });

                },
                complete: function () {
                    grid.hideLoading();
                }
            });
        }
    }
    var obj = {
        width: 700,
        height: 400,
        wrap: false,
        hwrap: false,
        resizable: true,
        rowBorders: false,
        numberCell: { show: false },
        track: true, //to turn on the track changes.
        flexHeight: true,
        toolbar: {
            items: [
                { type: 'button', icon: 'ui-icon-plus', label: 'New Product', listeners: [
                    { "click": function (evt, ui) {
                        //append empty row at the end.                           
                        var rowData = { UnitPrice: 0, Discontinued: false }; //empty row
                        var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
                        $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                        $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                    }
                    }
                ]
                },
                { type: 'button', icon: 'ui-icon-disk', label: 'Accept Changes', style: 'margin:0px 5px;', listeners: [
                    { "click": function (evt, ui) {
                        acceptChanges();
                    }
                    }
                ]
                },
                { type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', listeners: [
                    { "click": function (evt, ui) {
                        $grid.pqGrid("rollback");
                    }
                    }
                ]
                },
                { type: 'separator' },
                { type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', style: 'margin:0px 5px;', listeners: [
                    { "click": function (evt, ui) {
                        var changes = $grid.pqGrid("getChanges");
                        try {
                            console.log(changes);
                        }
                        catch (ex) { }
                        alert("Please see the log of changes in your browser console.");
                    }
                    }
                ]
                }
            ]
        },
        scrollModel: {
            autoFit: true
        },
        selectionModel: {
            type: ''
        },
        cellSave : function (evt, ui) {

        },
        render: function (evt, ui) {

        },
        hoverMode: 'cell',
        editModel: {
            saveKey: $.ui.keyCode.ENTER
        },
        title: "<b>Expense Details</b>",

        colModel: [
            { title: "Expense ID", dataType: "integer", dataIndx: "expenseId", editable: false },
            { title: "Date", width: "100", dataIndx: "date",
        editor: {
            type: 'textbox',
            init: dateEditor
        },
        render: function (ui) {
            var cellData = ui.cellData;
            if (cellData) {
                return $.datepicker.formatDate('yy-mm-dd', new Date(cellData));
            }
            else {
                return "";
            }
        },
        validations: [
                    { type: 'regexp', value: '^[0-9]{2}/[0-9]{2}/[0-9]{4}$', msg: 'Not in mm/dd/yyyy format' }
                ]
    },
            { title: "Location From", width: 140, dataType: "string", align: "right", dataIndx: "fromLocation"},
            { title: "Location To", width: 100, dataType: "String", align: "right", dataIndx: "toLocation"},
            { title: "Description", width: 100, dataType: "String", align: "right", dataIndx: "description"},
            { title: "Amount", width: 100, dataType: "float", align: "right", dataIndx: "amount",
                validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
                render: function (ui) {                       
                    var cellData = ui.cellData;
                    if (cellData != null) {
                        return "&#8377;" + parseFloat(ui.cellData).toFixed(2);
                    }
                    else {
                        return "";
                    }
                }
            },

            { title: "Receipt/Document", editable: false, dataIndx: "receipt", minWidth: 200, sortable: false,
            render: function (ui) {
            if(ui.cellData != -1){
                return "<input type='file' name='receipt'/>";
            }
            else return "";
            }
            },
            { title: "", editable: false, minWidth: 83, dataIndx: "delButton", sortable: false, render: function (ui) {
            if(ui.cellData != -1)
                return "<button type='button' class='delete_btn'>Delete</button>";
                else return "";
            }
            }
        ],
        dataModel: {               
            dataType: "JSON",
            location: "remote",
            recIndx: "ProductID",
            url: "/pro/products/get", //for ASP.NET
            //url: "/pro/products.php", //for PHP
            getData: function (response) {
                return { data: response.data };
            }
        },
        //save the cell when cell loses focus.
        quitEditMode: function (evt, ui) {               
            if (evt.keyCode != $.ui.keyCode.ESCAPE) {
                $grid.pqGrid("saveEditCell");
            }
        },
        refresh: function () {
       
       
            $("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
            .unbind("click")
            .bind("click", function (evt) {
                var $tr = $(this).closest("tr");
                var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
                var rowIndx = obj.rowIndx;
                $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });

                var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");

                if (ans) {
                    $grid.pqGrid("deleteRow", { rowIndx: rowIndx, effect: true, complete: function () {
                        $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
                    }
                    });
                }
                else {
                    $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
                }
            });
        },
        cellBeforeSave: function (evt, ui) {
            var isValid = grid.isValid(ui);
            if (!isValid.valid) {
                evt.preventDefault();
                return false;
            }
        }
    };
    var $grid = $("#grid_editing").pqGrid(obj);
   
    //get instance of the grid.
    var grid = $grid.data("paramqueryPqGrid");
});

In this example, i have added <input type="file">.
when I click on Accept changes, list shows all updated, deleted and new data.
how file will be send to server side?

My spring controller:

Code: [Select]
@RequestMapping(value="/saveExpense",method=RequestMethod.POST,consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE,
        produces = {MediaType.APPLICATION_ATOM_XML_VALUE, MediaType.APPLICATION_JSON_VALUE})
public String saveExpense(@RequestParam String list, @RequestPart("file") MultipartFile file) throws JsonGenerationException, JsonMappingException, IOException{

System.out.println(list);
return "hi";
}

Please can you suggest on my code?

Chaitanya21

  • Newbie
  • *
  • Posts: 17
    • View Profile
Re: File upload through batch editing example
« Reply #1 on: March 29, 2017, 01:24:56 pm »
Hi,

I managed to send grid data and attachment to server.(will update code later for referece to others after completing functionality)
But still facing the issue on file input component.

When we click on add button, grid gets refresh. that time File Input component becomes empty.
I know that File Input component is very sensitive so that we can not assign value to that but we can make copy of that.
so my question are:

1. Can we get rendered components back so that we can make copy of that component?

2. can we restrict that particular column from refreshing so that File input button won't lost its data.

Or any other solution? or File input wont work with grid.

Please reply.

Chaitanya21

  • Newbie
  • *
  • Posts: 17
    • View Profile
Re: File upload through batch editing example
« Reply #2 on: March 31, 2017, 07:22:13 pm »
Hi Admin,

I am just close to achieving my target. but still struggling to render brow button with clone object.
When user click/select file then I am cloning the object and storing in rowData.file attribute.
At a time of rendering brows button, i checking whether ui.cellData is empty or not.
If not then iIam trying to attach my clone object. but not working.
When I try to set this clone object to componet outside of grid, it working but not working in render method.
It because render method needs to return a string.

http://jsfiddle.net/Dalvi1988/vgjeodxc/

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: File upload through batch editing example
« Reply #3 on: April 04, 2017, 11:59:19 am »
Pro version has postRender callback which can be used to do DOM related stuff while column.render callback in free version can return string only.

However in free version refresh event can be used to do DOM related stuff which is not so elegant but still doable.

So in refresh event, you would

1. find out the rows ( $tr ) displayed in the viewport.

2. Find rowIndx from every $tr.

3. Find rowData from rowIndx.

4. Make a clone from rowData.file.