Popup Editing with jqxFileUpload

[cnisewongerParticipant]

I cannot get the popup editor to work with the file upload. I can attach the code I currently have here. I also can’t find any demos that show how one would do this..

<script type=”text/javascript”>
$(document).ready(function () {
var theme = “”;

// prepare the data
var ceuData = new Array();

var ceuSource =
{
localdata: ceuData,
datatype: “array”,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘{$path}pages/employee/dataChange.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
result(true);
},
error: function (jqXHR, textStatus, errorThrown) {
result(false);
}
});
},
datafields: [
{name: ‘eventTitle’, type: ‘string’},
{name: ‘iatHours’, type: ‘string’},
{name: ‘ceuHours’, type: ‘string’},
{name: ‘completeDate’, type: ‘date’},
{name: ‘upload’, type: ‘string’},
]
};

$(“#eventTitle”).jqxInput({ theme: theme });
$(‘#upload’).jqxFileUpload({ width: 300, uploadUrl: ‘imageUpload.php’, fileInputName: ‘fileToUpload’ });
$(“#completeDate”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’ });
$(“#eventTitle”).width(150);
$(“#eventTitle”).height(23);
$(“#completeDate”).width(150);
$(“#completeDate”).height(23);
$(“#upload”).width(150);
$(“#upload”).height(23);
$(“#ceuHours”).jqxNumberInput({spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 2, spinButtons: true });
$(“#iatHours”).jqxNumberInput({spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 2, spinButtons: true });
var editrow = -1;

var ceuDataAdapter = new $.jqx.dataAdapter(ceuSource);

// initialize jqxGrid
$(“#ceuGrid”).jqxGrid(
{
width: 685,
source: ceuDataAdapter,
editable: true,
theme: theme,
showstatusbar: true,
renderstatusbar: function (statusbar) {
var me = this;
var container = $(“<div style=’margin: 5px; margin-left: 5px;’></div>”);
statusbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();

// create new row.
$(“#addrowbutton”).on(‘click’, function () {
$(“#ceuGrid”).jqxGrid(‘addrow’, null, {});

});

},
columns: [
{
text: ‘Event/Course Title’,
columntype: ‘template’,
datafield: ‘eventTitle’,
width: ‘35%’
},
{
text: ‘IAT Hours’,
datafield: ‘iatHours’,
columntype: ‘template’,
width: ‘15%’,
cellsformat: ‘d2’,
columntype: ‘numberinput’,
},
{
text: ‘CEU Hours’, columntype: ‘template’, width: ‘15%’, datafield: ‘ceuHours’, cellsformat: ‘d2’, columntype: ‘numberinput’,
},
{
text: ‘Completion Date’,
columntype: ‘template’,
datafield: ‘completeDate’,
width: ‘20%’,
},
{
text: ‘Upload’, columntype: ‘template’, datafield: ‘upload’,
/** cellsrenderer: function (row, column, value) {
if (value == “”) {
return “Select a file”;
}
;
},
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.html(‘<input id=”fileInput’ + row + ‘” type=”file” />’);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
var value = $(“#fileInput” + row).val();
return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
} */
},
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#ceuGrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#ceuGrid”).jqxGrid(‘getrowdata’, editrow);
$(“#eventTitle”).val(dataRecord.eventTitle);
$(“#ceuHours”).jqxNumberInput({ decimal: dataRecord.ceuHours });
$(“#iatHours”).jqxNumberInput({ decimal: dataRecord.iatHours });
$(“#completeDate”).val(dataRecord.completeDate);
$(‘#upload’).jqxFileUpload({ width: 300, uploadUrl: ‘imageUpload.php’, fileInputName: ‘fileToUpload’ });

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});

$(“#popupWindow”).jqxWindow({
width: 450, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#eventTitle”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { eventTitle: $(“#eventTitle”).val(), ceuHours: parseFloat($(“#ceuHours”).jqxNumberInput(‘decimal’)), iatHours: parseFloat($(“#iatHours”).jqxNumberInput(‘decimal’)),
completeDate: $(“#completeDate”).jqxDateTimeInput(), upload: $(“#upload”).val()
};
var rowID = $(‘#ceuGrid’).jqxGrid(‘getrowid’, editrow);
$(‘#ceuGrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});
{/literal}
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”ceuGrid”></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow” style=”min-width: 350px;”>
<div>Edit</div>
<div style=”overflow: hidden; min-width: 350px;”>
<table>
<tr>
<td align=”right”>Event/Course Title:</td>
<td align=”left”><input id=”eventTitle” /></td>
</tr>
<tr>
<td align=”right”>CEU Hours:</td>
<td align=”left”><input id=”ceuHours” /></td>
</tr>
<tr>
<td align=”right”>IAT Hours:</td>
<td align=”left”><input id=”iatHours” /></td>
</tr>
<tr>
<td align=”right”>Complete Date:</td>
<td align=”left”><div id=”completeDate”></div></td>
</tr>
<tr>
<td align=”right”>Upload:</td>
<td align=”left”><div id=”upload”></div></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
</tr>
</table>
</div>
</div>

[HristoParticipant]

Hello cnisewonger,

We have almost similar themes:
http://www.jqwidgets.com/community/topic/file-upload-with-jqxgrid-2/
http://www.jqwidgets.com/community/topic/in-grid-want-to-add-file-upload/

Please, take a look this article could be helpful:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/jquery-fileUpload-with-asp.htm?search=

What exactly you would like to visualize in ‘upload’ column?
For example if you need from the filename could use select event.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[cnisewongerParticipant]

The problem is I can’t find a theme using php/javascript that shows how the file upload widget can be used inside of the popup dialog. I keep getting a a documnet.route.event error and the file dialog will not open when you click the browse button. I am assuming I am missing something simple. Not sure what though…

[HristoParticipant]

Hello cnisewonger,

Is it possible to do not see the file because you are not set height property in ‘jqxFileUpload’?
Try to test only jqxFileUpload on particular case.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts