Hello

I'm suggesting you to continue our communication from http://ko.infragistics.com/community/forums/p/107145/505601.aspx#505601 in this thread if you are OK with this.

Hi Petko Petkov ,

I am working in a Single page application. I hava a page which has tabs and when the user click a tab I call UploadExcel function.

Javascript :

    function UploadExcel() {
                    
            $("#input").on("change", function () {
                var excelFile,
                    fileReader = new FileReader();

                $("#result").hide();

                fileReader.onload = function (e) {                  

                    var buffer = new Uint8Array(fileReader.result);

                    $.ig.excel.Workbook.load(buffer, function (workbook) {

                                  var column, row, newRow, cellValue, columnIndex, i,
                            worksheet = workbook.worksheets(0),
                            columnsNumber = 0,
                            gridColumns = [],
                            data = [],
                            worksheetRowsCount;                      

                        // Both the columns and rows in the worksheet are lazily created and because of this most of the time worksheet.columns().count() will return 0
                        // So to get the number of columns we read the values in the first row and count. When value is null we stop counting columns:
                        while (worksheet.rows(0).getCellValue(columnsNumber)) {
                            columnsNumber++;
                        }

                        // Iterating through cells in first row and use the cell text as key and header text for the grid columns
                        for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
                            column = worksheet.rows(0).getCellText(columnIndex);
                            //gridColumns.push({ headerText: column, key: column });
                            gridColumns.push(column);
                        }

               //Getting the Excel data
                        // We start iterating from 1, because we already read the first row to build the gridColumns array above
                        // We use each cell value and add it to json array, which will be used as dataSource for the grid
                        for (i = 1, worksheetRowsCount = worksheet.rows().count() ; i < worksheetRowsCount; i++) {
                            newRow = {};
                            row = worksheet.rows(i);

                            for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
                                cellValue = row.getCellText(columnIndex);
                                newRow[gridColumns[columnIndex]] = cellValue;
                            }

                            data.push(newRow);
                        }

                        //Addded the code for testing comment insertion
                        var comment = new $.ig.excel.WorksheetCellComment();
                        var formatted = new $.ig.excel.FormattedString('This is a comment');
                        comment.Text = formatted;
                        workbook.worksheets(1).rows(2).cells(4).comment(comment);

                        createGrid(validatedData, gridColumns);    

                            saveWorkbook(workbook, "test.xlsx");
                      

                        $("#import-submit").attr("disabled", false);
             
                        // we can also skip passing the gridColumns use autoGenerateColumns = true, or modify the gridColumns array
                      

                    }, function (error) {
                        //Need to be changed
                        $("#result").text("The excel file is corrupted.");
                        $("#result").show(1000);
                    });
                                    
                }

                if (this.files.length > 0) {
                    excelFile = this.files[0];
                    if (excelFile.type === "application/vnd.ms-excel" || excelFile.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || (excelFile.type === "" && (excelFile.name.endsWith("xls") || excelFile.name.endsWith("xlsx")))) {
                        fileReader.readAsArrayBuffer(excelFile);
                    } else {
                        $("#result").text("The format of the file you have selected is not supported. Please select a valid Excel file ('.xls, *.xlsx').");
                        $("#result").show(1000);
                    }
                }

            })
        }

function saveWorkbook(workbook, name) {
            workbook.save({ type: 'blob' }, function (data) {
                var delay = 500; //1 second delay makes the download to work in FireFox
                setTimeout(function () {
                    saveAs(data, name);
                }, delay);
            }, function (error) {
                alert('Error exporting: : ' + error);
            });
        }

HTML :

 <div>
                                                <input type="file" class="span6" style="padding-left: 6px;" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />                                              
                                                <div id="result"></div>
                                                <table id="gridBulkLoadTmpt"></table>
                                            </div>

Let me know if you need any further info.

Thanks,

Balakumar

Hello Petko Petkov ,

Thanks a lot. Waiting for your response.

Thanks,

Bala

Hello Petko Petkov ,

Its working .Thanks a lot for your response :) .

I have a clarificaiton . The Ignite UI Js files which is used , Are these Opensource ?.

Thanks,

Balakumar

The answer to your question you can find here: Is Ignite UI Opensource ?