Author Topic: Unable To Use File Upload In Pro Version  (Read 2267 times)

logibricks

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 12
    • View Profile
Unable To Use File Upload In Pro Version
« on: December 07, 2018, 03:18:18 pm »
Hi ,
We are using latest Pro version Of PQGrid and wanted to use the file upload functionality with reference to the following  jsfiddle
http://jsfiddle.net/Dalvi1988/vgjeodxc/

The problem am facing is in the bellow code is
-------------------------------------------------

 refresh: function(event, ui) {
                    $("#workingFile_papers").find("input.file").button().bind("change", function (evt){
                        debugger;
                        var $tr = $(this).closest("tr");
                        var objs = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                        //var rowIndx = obj.rowIndx;
                        var clone = $(this).clone();
                        var rowData = $grid.pqGrid("getRowData", { rowIndx: objs })
                        //rowData.file=clone;
                        rowData.file=clone;
                        /*  clone.attr('id', 'field2');*/
                        // $('#headerToolbar').html(clone.attr('id', 'file'));
                    }); 
            }

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

 var objs = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx; am getting  rowIndx as UNDEFINED

more over in the following snippet : var rowData = $grid.pqGrid("getRowData", { rowIndx: objs })
we are getting file as undefined .

if we happened to insert    { rowIndx: objs } as { rowIndx: 0 } as  hard coded the Zero row value
we are getting UNDEFINED in the place of file object if we happened to console
  rowData

hence unable to get it used.

This is working fine in the jsfiddle as it seems due to version issue we aren't able to use the same code snippet from the jsfiddle

here is the code we are using: - 



    $(function() {
        var data =[{"id":1,"file":"","working_paper_code_id":"72","working_paper_code":"222dddd","document":"dqwdq2d","mandatory":"NO","task_wp_id":"11","remarks":"REst wp updated 9"}] ;
        var obj = {
           scrollModel: {autoFit: true},
            numberCell: {resizable: true,title: "Sr No"},
            menuIcon: true,
            title: "WORKING PAPERS",
            height: 'flex',
            width: '100%',
            rowHt: 22,
            resizable: true,
            columnBorders: true,
            collapsible: {toggle: false,on: false},
            validation: {icon: 'ui-icon-info'},
            trackModel : { on: true },
            track: true,
            selectionModel: { type: '' },
            hoverMode: 'cell',
            editModel: { saveKey: $.ui.keyCode.ENTER },
            colModel: [
                        {
                            title: "ID",
                            dataIndx: "id",
                            dataType: "integer",
                            editable: false,
                            hidden: true
                        },
                        {
                            title: "task_wp_id",
                            dataIndx: "task_wp_id",
                            dataType: "string",
                            hidden: true
                        },
                        {
                            title: "Working Paper Code",
                            dataType: "string",
                            dataIndx: "working_paper_code",
                            filter: {
                                crules: [{
                                    condition: 'contain'
                                }]
                            },
                            width: '20%',
                            editable:false,
                            align: "left",
                            halign: "left",

                        },
                        {
                            title: "Working Papers Code ID",
                            dataIndx: "working_paper_code_id",
                            dataType: "string",
                            hidden: true
                        },
                        {   title: "Document",
                            dataType: "string",
                            dataIndx: "document",
                            editable:false,
                            filter: {crules: [{ condition: 'range' }]},
                            width: '25%',
                            align: "left",
                            halign: "left"
                         },                   
                            {
                                title: "Mandatory", width: '15%', align: "center", resizable: false,editable:false,align: "center",dataIndx: "mandatory",type: 'checkbox',
                                cb: {
                                    all: false, //header checkbox to affect checkboxes on all pages.
                                    header: true, //for header checkbox.
                                    check: "YES", //check the checkbox when cell value is "YES".
                                    uncheck: "NO" //uncheck when "NO".
                                },
                                renderLabel: function(ui) {
                                    var cb = ui.column.cb,
                                        cellData = ui.cellData,
                                        disabled = this.isEditableCell(ui) ? "" : "disabled",
                                        text = cb.check === cellData ? '' : (cb.uncheck === cellData ? '' : '');
                                    return text;
                                },
                                 editor: false,
                                 useLabel: true
                             },
                            { title: "Remarks", dataType: "string", dataIndx: "remarks",  filter: {crules: [{condition: 'range'}]}, width: '25%', align: "left", halign: "left"},
                            //{ title: "Upload", dataIndx: "file",editable:false, sortable: false, minWidth: '15%', align: "center",
                             //   render: function (ui) {
                              //      return "<input type='file' class='file' accept='image/jpeg,image/png' />";
                               // }               
                               
                            //}
                            { title: "File", editable: false, minWidth: 200, dataIndx: "file", sortable: false,
                                halign:"center",
                                render: function(ui) {
                                    return "<input type='file' class='file ui-button ui-widget ui-state-default ui-corner-all ui-state-focus' role='button' aria-disabled='false'>";
                                }
                            },

            ],
             
             
            filterModel: {
                on: true,
                mode: "AND",
                header: true,
                menuIcon: true //show filter row icon initially.
            },
            menuIcon: true, 
            menuUI: {tabs: ['filter']},
            dataModel: {
                data: data,
                location: "local",
                recIndex: "id"
            },
            quitEditMode: function(evt, ui) {
                if (evt.keyCode != $.ui.keyCode.ESCAPE) {
                    $grid.pqGrid("saveEditCell");
                }
            },
            refresh: function(event, ui) {
                    $("#workingFile_papers").find("input.file").button().bind("change", function (evt){
                        debugger;
                        var $tr = $(this).closest("tr");
                        var objs = $grid.pqGrid("getRowIndx", { $tr: $tr }).rowIndx;
                        //var rowIndx = obj.rowIndx;
                        var clone = $(this).clone();
                        var rowData = $grid.pqGrid("getRowData", { rowIndx: objs })
                        //rowData.file=clone;
                        rowData.file=clone;
                        /*  clone.attr('id', 'field2');*/
                        // $('#headerToolbar').html(clone.attr('id', 'file'));
                    }); 
            },
    cellBeforeSave: function(evt, ui) {
      var isValid = grid.isValid(ui);
      if (!isValid.valid) {
        evt.preventDefault();
        return false;
      }
    }
        };
        var $grid = $("#workingFile_papers").pqGrid(obj);
    });

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6297
    • View Profile
Re: Unable To Use File Upload In Pro Version
« Reply #1 on: December 07, 2018, 05:16:56 pm »
your code requires Pro specific modifications.

1) In free version it's tr tag for rows, but in Pro it's div with .pq-grid-row class.

So

Code: [Select]
var $tr = $(this).closest("tr");

should be changed to

Code: [Select]
var $tr = $(this).closest(".pq-grid-row");

2) instead of refresh event, use column.postRender callback for change event bindings of file input.

https://paramquery.com/pro/api#option-column-postRender

logibricks

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Unable To Use File Upload In Pro Version
« Reply #2 on: December 07, 2018, 05:46:18 pm »
Thanks It worked fine  :)