jQuery UI Widgets Forums Grid File upload with jqxgrid

This topic contains 10 replies, has 2 voices, and was last updated by  Dimitar 8 years, 5 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • File upload with jqxgrid #80018

    kalpanasolai
    Participant

    Hi,

    I need to show a column with jqx file upload on load of jqxgrid. Is this possible?

    File upload with jqxgrid #80020

    Dimitar
    Participant

    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,
    Dimitar

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

    File upload with jqxgrid #80026

    kalpanasolai
    Participant

    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

    File upload with jqxgrid #80027

    kalpanasolai
    Participant

    An additional info… The file is in Desktop

    File upload with jqxgrid #80069

    kalpanasolai
    Participant

    Any updates pls..

    File upload with jqxgrid #80075

    Dimitar
    Participant

    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,
    Dimitar

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

    File upload with jqxgrid #80078

    kalpanasolai
    Participant

    No error… and fileUpload.on(‘uploadEnd’, also not firing

    File upload with jqxgrid #80080

    kalpanasolai
    Participant

    Do I need to change any attributes in <form> tag?.. Because the page uses master file

    File upload with jqxgrid #80087

    Dimitar
    Participant

    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,
    Dimitar

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

    File upload with jqxgrid #80090

    kalpanasolai
    Participant

    oh!!! in case if we want to use in aspx page with master file, then how to use file upload in such case?

    File upload with jqxgrid #80123

    Dimitar
    Participant

    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,
    Dimitar

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.