jQWidgets Forums
jQuery UI Widgets › Forums › Grid › File upload with jqxgrid
Tagged: angular grid, createwidget, file upload column, file upload in grid, grid, jquery grid, jqxgrid, widget column
This topic contains 10 replies, has 2 voices, and was last updated by Dimitar 9 years, 4 months ago.
-
AuthorFile upload with jqxgrid Posts
-
Hi,
I need to show a column with jqx file upload on load of jqxgrid. Is this possible?
Hi kalpanasolai,
Here is how to implement your requirement using the createwidget callback:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxfileupload.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"]; var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"]; var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"]; var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"]; var k = 0; for (var i = 0; i < firstNames.length; i++) { var row = {}; row["name"] = firstNames[k] + " " + lastNames[k]; row["firstname"] = firstNames[k]; row["title"] = titles[k]; row["country"] = country[k]; data[i] = row; k++; } var source = { localdata: data, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); // Create jqxGrid. $("#jqxgrid").jqxGrid( { width: 1000, source: dataAdapter, rowsheight: 100, columns: [ { text: 'Picture', datafield: 'firstname', width: 200, createwidget: function (row, column, value, htmlElement) { var fileUpload = $('<div></div>'); $(htmlElement).append(fileUpload); fileUpload.jqxFileUpload({ width: 200, height: 100 }); }, initwidget: function (row, column, value, htmlElement) { } }, { text: 'Name', datafield: 'name', width: 200 }, { text: 'Title', datafield: 'title', width: 200 }, { text: 'Country', datafield: 'country' } ] }); }); </script> </head> <body> <div id="jqxgrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
Thanks for the update. I tried using the given code. I am able to get ‘BROWSE’ button and able to choose file. But I am unable to get the posted file on Button click.
I tried the given sample
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/jquery-fileUpload-with-asp.htm?search=This is the code using in grid column list initialization
text: ‘Picture’, datafield: null, width: ‘8%’,
createwidget: function (row, column, value, htmlElement) {
var fileUpload = $(‘<div></div>’);
$(htmlElement).append(fileUpload);
fileUpload.jqxFileUpload({ width: 300,
accept: ‘image/*’,
uploadUrl: ‘/BusProcReqInbox.aspx’,
fileInputName: ‘fileToUpload’
});fileUpload.on(‘uploadEnd’, function (event) {
var args = event.args;
var fileName = args.file;
var serverResponse = args.response;
// Your code here.
console.log(args);
console.log(fileName);
console.log(serverResponse);
});
},
initwidget: function (row, column, value, htmlElement) {}
Please help me
An additional info… The file is in Desktop
Any updates pls..
Hi kalpanasolai,
Did you implement the server-side code from the tutorial, too? And are there any errors thrown in your browser’s console when trying to upload a file?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/No error… and fileUpload.on(‘uploadEnd’, also not firing
Do I need to change any attributes in <form> tag?.. Because the page uses master file
Hi kalpanasolai,
jqxFileUpload should not be placed inside a form, because it contains a form internally. Please also take a look at the following forum topic, which shows some of our users’ input on using jqxFileUpload in an ASP.NET environment: http://www.jqwidgets.com/community/topic/how-to-use-jqxfileupload-in-asp-net/.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/oh!!! in case if we want to use in aspx page with master file, then how to use file upload in such case?
Hi kalpanasolai,
I think you can use the jqxFileUpload widget in ASP.NET Master Pages with no issues if you place it (or the grid with file uploads) outside the
<form runat="server"></form>
element. Forms are created internally in the widget to handle the file uploads. You can control these forms’ action attributes with the uploadUrl property of jqxFileUpload.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.