jQWidgets Forums

Tagged: cellsrenderer, columntype, custom, editor, file, grid, Input, jqxgrid, update, updaterow, upload

This topic contains 22 replies, has 5 voices, and was last updated by stvhui 11 years, 2 months ago.

Viewing 8 posts - 16 through 23 (of 23 total)

← 1 2

Author

In Grid want to add file upload Posts
January 6, 2014 at 6:48 pm In Grid want to add file upload #47326

akshayyes
Participant

Hello Peter,
(a) Insert the Name of Photo/Image into MySQL Database Table.
(b) Upload the actual Photo/Image file into a Folder on the Server.

What I asking is about (a). The Name of Photo/Image (peterstoev.jpg) is not inserted into MySQL Database Table. At the same time – all the other Columns (except Photo/Image Name) is updated/edited successfully.

The code I am implementing is given below.
++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&brand=” + rowdata.brand + “&part_no=” + rowdata.part_no + “&photo=” + rowdata.photo;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 1200,
height: 350,
selectionmode: ‘singlecell’,
source: source,
theme: theme,
editable: true,
columns:
[
{ text: ‘id’, datafield: ‘id’, width: 100 },
{ text: ‘Brand’, columntype: ‘dropdownlist’, datafield: ‘brand’, width: 100 },
{ text: ‘Part No’, columntype: ‘dropdownlist’, datafield: ‘part_no’, width: 100 },
{
text: ‘Upload’, width: 250, columntype: ‘custom’, datafield: ‘photo’,
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” name=”fileInput” />’);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
var value = $(“#fileInput” + row).val();
//return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
return value.substring(value.lastIndexOf(“\\”) + 1, value.length);
}
}

]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function () {
// cancel changes.
commit(false);
}
});
}

January 6, 2014 at 7:16 pm In Grid want to add file upload #47330

Peter Stoev
Keymaster

Hi akshayyes,

For uploading Image/Photo Files using jQuery’s Ajax function, you may see this post: http://www.vasplus.info/18.html#.UssAy_QW19s

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 8, 2014 at 8:36 am In Grid want to add file upload #47521

akshayyes
Participant

Peter,
I am having problem in applying the custom (reference post: http://www.vasplus.info/18.html#.UssAy_QW19s) code in jqxGrid (index.html). Please inform where to apply the Referred Post Code within jqxGrid.

Question 1 :-

In – HTML Code (section), How to add a custom <input type=”file” —- in index.html of jqxGrid
<input type=”file” name=”vasPhoto_uploads”

Question 2 :-

In – Ajax and Jquery (section) , where to add the function

$(‘#vasPhoto_uploads’).live(‘change’, function() {
$(“#vasPLUS_Programming_Blog_Form”).vPB({
beforeSubmit: function() {

within

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

January 8, 2014 at 3:20 pm In Grid want to add file upload #47559

akshayyes
Participant

I am not able to ADD an AJAX function in a particular column of jqxGrid
Reference URL – http://www.vasplus.info/18.html#.UssAy_QW19s

#1

In – HTML Code, How to add a custom <input type=”file” —- in index.html of jqxGrid
[ From Reference URL ] <input type=”file” name=”vasPhoto_uploads”

#2

[ From Reference URL ] In – Ajax and Jquery, where to add THIS FUNCTION (Below)……..

$(‘#vasPhoto_uploads’).live(‘change’, function() {
$(“#vasPLUS_Programming_Blog_Form”).vPB({
beforeSubmit: function() {

……..within this code in jqxGrid

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

January 8, 2014 at 3:22 pm In Grid want to add file upload #47562

Peter Stoev
Keymaster

Dear akshayyes,

I am afraid that the requirement that you have is specific to your custom application scenario. File Upload is not something which is built-in jqxGrid. We even do not still have such widget. Unfortunately, we would not be able to help you with uploading Images on your server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 8, 2014 at 3:32 pm In Grid want to add file upload #47567

akshayyes
Participant

Peter,
I am only trying to apply the code in reference URL provided by you. If you can only guide me how the code in Reference URL is to be added in jqxGrid index.html file. I am not able to correctly ADD the AJAX function of Reference URL – [http://www.vasplus.info/18.html#.UssAy_QW19s] in a particular column of jqxGrid.

thanks,
Akshayyes

January 10, 2014 at 4:09 pm In Grid want to add file upload #47702

akshayyes
Participant

Hello Peter,
I am able to add the Photo image upload functionality successfully.
thanks.

February 7, 2014 at 8:37 am In Grid want to add file upload #49118

stvhui
Participant

Hello Akshayyes and JQWidgets Team

May I know do you solve it?

I also got the same problem about upload the photo file into web server folder and the table-field just stored its photo folder and filename.

Is there anyone successfull to implement that?
Is there any real-application likes Employee Manager, record employee data including photo file

Please advice & thanks in advance

Regards,
Steven
Author

Posts

Viewing 8 posts - 16 through 23 (of 23 total)

← 1 2

You must be logged in to reply to this topic.