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);
});
