Import CSV file into GRID issue

[ShreyanshParticipant]

What I am trying to do is I am getting the data from json file at the very first glance, but have added a file upload control on the html from which I wants the user able to get CSV file from his/her computer and display on the grid. I have the CSV file but when I fetch the data its displaying no content, can you help me with this please. Also I am not sure about the datafields I have choosen whether it is generating the problem or the problem is something else.

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

$(‘#jqxgrid’).on(‘rowexpand’, function (event) {
// event arguments.
var args = event.args;
selectedRowIndex = args.rowindex;
$(“#jqxgrid”).jqxGrid(‘selectrow’, selectedRowIndex);
});
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
width: ‘1150’,
autoheight: true,
altrows: true,
theme: ‘office’,
columnsheight: 60,
rendertoolbar: function (toolbar) {

var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();

// create new row.
$(“#addrowbutton”).on(‘click’, function () {
//var datarow = generateNewRow();
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
});

},
ready: function () {
$(“#jqxgrid .jqx-button”).css({“width”: “55px”, “margin-left”: “20px”});
},
columns: [
{text: ‘vehicleId’, datafield: ‘vehicleId’, hidden: true},
{text: ‘Registration’, datafield: ‘rego’, width: ’90’},
{text: ‘Date Purchased’, datafield: ‘dtPurchased’, width: ’90’, formatter: ‘date’, formatoptions: { srcformat: ‘d/m/Y’, newformat: ‘d/m/Y’}},
{text: ‘VIN’, datafield: ‘vin’, width: ‘160’},
{text: ‘Manufacturer’, datafield: ‘manufacturer’, width: ‘150’},
{text: ‘Model’, datafield: ‘model’, width: ’90’},
{text: ‘Colour’, datafield: ‘colour’, width: ’90’},
{text: ‘Month/Year’, datafield: ‘yearmonth’, width: ’80’},
{text: ‘Purchased Price’, datafield: ‘amount’, width: ’90’},
{text: ‘Date Sold’, datafield: ‘dtSold’, width: ’90’},
{text: ‘State’, datafield: ‘state’, width: ‘130’},
{text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsAlign: ‘center’, align: ‘center’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({position: {x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 10}});

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

$(“#vehID”).val(dataRecord.vehicleId);
$(“#rego”).val(dataRecord.rego);
$(“#dtPurchased”).val(dataRecord.dtPurchased);
$(“#vin”).val(dataRecord.vin);

// get all items.
var manuItems = $(“#manufacturer”).jqxDropDownList(‘getItems’);

// find the index by searching for an item with specific value.
var indexToSelect = -1;
$.each(manuItems, function (index) {
if (this.label == dataRecord.manufacturer) {
indexToSelect = index;
return false;
}
});
//$(“#manufacturer”).jqxDropDownList({ selectIndex: indexToSelect });

//var index = $(“#select”)[0].selectedIndex;
$(“#manufacturer”).jqxDropDownList(‘selectIndex’, indexToSelect);

//$(“#manufacturer”).jqxdropdownlist(‘val’, dataRecord.manufacturer);
$(“#model”).val(dataRecord.model);
$(“#colour”).val(dataRecord.colour);
$(“#yearmonth”).val(dataRecord.yearmonth);
$(“#amount”).val(dataRecord.amount);
$(“#dtSold”).val(dataRecord.dtSold);

// find the index by searching for an item with specific value.
var stateItems = $(“#state”).jqxDropDownList(‘getItems’);
$.each(stateItems, function (index) {
if (this.label == dataRecord.state) {
indexToSelect = index;
return false;
}
});
$(“#state”).jqxDropDownList(‘selectIndex’, indexToSelect);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = {vehicleID: $(“#vehID”).val(), fleetId: “1”, acountID: “1”, rego: $(“#rego”).val(), dtPurchased: $(“#dtPurchased”).val(), vin: $(“#vin”).val(), manufacturer: $(“#manufacturer”).val(), model: $(“#model”).val(), colour: $(“#colour”).val(), yearmonth: $(“#yearmonth”).val(), amount: $(“#amount”).val(), dtSold: $(“#dtSold”).val(), state: $(“#state”).val()
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

$(“#Add”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
//$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
});

$(“#csvExport”).jqxButton();
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});

/* Import on file upload */
$(“#upload”).change(function(){
debugger;
var url = $(“#upload”).val();
var source = {
datatype: “csv”,
datafields: [
{name:’vehicleId’,type:’string’},
{name:’rego’,type:’string’},
{name:’dtPurchased’,type:’string’},
{name:’vin’,type:’string’},
{name:’manufacturer’,type:’string’},
{name:’model’,type:’string’},
{name:’colour’,type:’string’},
{name:’yearmonth’,type:’string’},
{name:’amount’,type:’string’},
{name:’dtSold’,type:’string’},
{name:’state’,type:’string’},
{name:’Edit’,type:’button’}
],
url: ‘url’
};
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
width: ‘1150’,
autoheight: true,
altrows: true,
theme: ‘office’,
columnsheight: 60,
rendertoolbar: function (toolbar) {

var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();

// create new row.
$(“#addrowbutton”).on(‘click’, function () {
//var datarow = generateNewRow();
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
});

},
ready: function () {
$(“#jqxgrid .jqx-button”).css({“width”: “55px”, “margin-left”: “20px”});
},
columns: [
{text: ‘vehicleId’, datafield: ‘vehicleId’, hidden: true},
{text: ‘Registration’, datafield: ‘rego’, width: ’90’},
{text: ‘Date Purchased’, datafield: ‘dtPurchased’, width: ’90’, formatter: ‘date’, formatoptions: { srcformat: ‘d/m/Y’, newformat: ‘d/m/Y’}},
{text: ‘VIN’, datafield: ‘vin’, width: ‘160’},
{text: ‘Manufacturer’, datafield: ‘manufacturer’, width: ‘150’},
{text: ‘Model’, datafield: ‘model’, width: ’90’},
{text: ‘Colour’, datafield: ‘colour’, width: ’90’},
{text: ‘Month/Year’, datafield: ‘yearmonth’, width: ’80’},
{text: ‘Purchased Price’, datafield: ‘amount’, width: ’90’},
{text: ‘Date Sold’, datafield: ‘dtSold’, width: ’90’},
{text: ‘State’, datafield: ‘state’, width: ‘130’},
{text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsAlign: ‘center’, align: ‘center’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({position: {x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 10}});

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

$(“#vehID”).val(dataRecord.vehicleId);
$(“#rego”).val(dataRecord.rego);
$(“#dtPurchased”).val(dataRecord.dtPurchased);
$(“#vin”).val(dataRecord.vin);

// get all items.
var manuItems = $(“#manufacturer”).jqxDropDownList(‘getItems’);

// find the index by searching for an item with specific value.
var indexToSelect = -1;
$.each(manuItems, function (index) {
if (this.label == dataRecord.manufacturer) {
indexToSelect = index;
return false;
}
});
//$(“#manufacturer”).jqxDropDownList({ selectIndex: indexToSelect });

//var index = $(“#select”)[0].selectedIndex;
$(“#manufacturer”).jqxDropDownList(‘selectIndex’, indexToSelect);

//$(“#manufacturer”).jqxdropdownlist(‘val’, dataRecord.manufacturer);
$(“#model”).val(dataRecord.model);
$(“#colour”).val(dataRecord.colour);
$(“#yearmonth”).val(dataRecord.yearmonth);
$(“#amount”).val(dataRecord.amount);
$(“#dtSold”).val(dataRecord.dtSold);

// find the index by searching for an item with specific value.
var stateItems = $(“#state”).jqxDropDownList(‘getItems’);
$.each(stateItems, function (index) {
if (this.label == dataRecord.state) {
indexToSelect = index;
return false;
}
});
$(“#state”).jqxDropDownList(‘selectIndex’, indexToSelect);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = {vehicleID: $(“#vehID”).val(), fleetId: “1”, acountID: “1”, rego: $(“#rego”).val(), dtPurchased: $(“#dtPurchased”).val(), vin: $(“#vin”).val(), manufacturer: $(“#manufacturer”).val(), model: $(“#model”).val(), colour: $(“#colour”).val(), yearmonth: $(“#yearmonth”).val(), amount: $(“#amount”).val(), dtSold: $(“#dtSold”).val(), state: $(“#state”).val()
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

$(“#Add”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
//$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
});

$(“#csvExport”).jqxButton();
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
});
}

[ShreyanshParticipant]

Code that execute after file selection.

/* Import on file upload */
$(“#upload”).change(function(){
debugger;
var url = $(“#upload”).val();
var source = {
datatype: “csv”,
datafields: [
{name:’vehicleId’,type:’string’},
{name:’rego’,type:’string’},
{name:’dtPurchased’,type:’string’},
{name:’vin’,type:’string’},
{name:’manufacturer’,type:’string’},
{name:’model’,type:’string’},
{name:’colour’,type:’string’},
{name:’yearmonth’,type:’string’},
{name:’amount’,type:’string’},
{name:’dtSold’,type:’string’},
{name:’state’,type:’string’},
{name:’Edit’,type:’button’}
],
url: ‘url’
};
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
width: ’1150′,
autoheight: true,
altrows: true,
theme: ‘office’,
columnsheight: 60,
rendertoolbar: function (toolbar) {

var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();

// create new row.
$(“#addrowbutton”).on(‘click’, function () {
//var datarow = generateNewRow();
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
});

},
ready: function () {
$(“#jqxgrid .jqx-button”).css({“width”: “55px”, “margin-left”: “20px”});
},
columns: [
{text: ‘vehicleId’, datafield: ‘vehicleId’, hidden: true},
{text: ‘Registration’, datafield: ‘rego’, width: ’90’},
{text: ‘Date Purchased’, datafield: ‘dtPurchased’, width: ’90’, formatter: ‘date’, formatoptions: { srcformat: ‘d/m/Y’, newformat: ‘d/m/Y’}},
{text: ‘VIN’, datafield: ‘vin’, width: ‘160’},
{text: ‘Manufacturer’, datafield: ‘manufacturer’, width: ‘150’},
{text: ‘Model’, datafield: ‘model’, width: ’90’},
{text: ‘Colour’, datafield: ‘colour’, width: ’90’},
{text: ‘Month/Year’, datafield: ‘yearmonth’, width: ’80’},
{text: ‘Purchased Price’, datafield: ‘amount’, width: ’90’},
{text: ‘Date Sold’, datafield: ‘dtSold’, width: ’90’},
{text: ‘State’, datafield: ‘state’, width: ‘130’},
{text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsAlign: ‘center’, align: ‘center’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({position: {x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 10}});

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

$(“#vehID”).val(dataRecord.vehicleId);
$(“#rego”).val(dataRecord.rego);
$(“#dtPurchased”).val(dataRecord.dtPurchased);
$(“#vin”).val(dataRecord.vin);

// get all items.
var manuItems = $(“#manufacturer”).jqxDropDownList(‘getItems’);

// find the index by searching for an item with specific value.
var indexToSelect = -1;
$.each(manuItems, function (index) {
if (this.label == dataRecord.manufacturer) {
indexToSelect = index;
return false;
}
});
//$(“#manufacturer”).jqxDropDownList({ selectIndex: indexToSelect });

//var index = $(“#select”)[0].selectedIndex;
$(“#manufacturer”).jqxDropDownList(‘selectIndex’, indexToSelect);

//$(“#manufacturer”).jqxdropdownlist(‘val’, dataRecord.manufacturer);
$(“#model”).val(dataRecord.model);
$(“#colour”).val(dataRecord.colour);
$(“#yearmonth”).val(dataRecord.yearmonth);
$(“#amount”).val(dataRecord.amount);
$(“#dtSold”).val(dataRecord.dtSold);

// find the index by searching for an item with specific value.
var stateItems = $(“#state”).jqxDropDownList(‘getItems’);
$.each(stateItems, function (index) {
if (this.label == dataRecord.state) {
indexToSelect = index;
return false;
}
});
$(“#state”).jqxDropDownList(‘selectIndex’, indexToSelect);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = {vehicleID: $(“#vehID”).val(), fleetId: “1″, acountID: “1″, rego: $(“#rego”).val(), dtPurchased: $(“#dtPurchased”).val(), vin: $(“#vin”).val(), manufacturer: $(“#manufacturer”).val(), model: $(“#model”).val(), colour: $(“#colour”).val(), yearmonth: $(“#yearmonth”).val(), amount: $(“#amount”).val(), dtSold: $(“#dtSold”).val(), state: $(“#state”).val()
};
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

$(“#Add”).click(function () {
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, {});
//$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
});

$(“#csvExport”).jqxButton();
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
});
}

[ShreyanshParticipant]

Uploading the code snippet after debugging, with watch results for the variable, I hope this can help you to suggest me in better manner:

/* Import */
$(“#upload”).change(function () {
debugger;
var url = $(“#upload”).val(); url = “C:\fakepath\Vehicle Register.csv”
var source = { source = Object {datatype: “csv”, datafields: Array[12], url: “url”}
datatype: “csv”,
datafields: [
{name: ‘vehicleId’, type: ‘string’},
{name: ‘rego’, type: ‘string’},
{name: ‘dtPurchased’, type: ‘string’},
{name: ‘vin’, type: ‘string’},
{name: ‘manufacturer’, type: ‘string’},
{name: ‘model’, type: ‘string’},
{name: ‘color’, type: ‘string’},
{name: ‘yearmonth’, type: ‘string’},
{name: ‘amount’, type: ‘string’},
{name: ‘dtSold’, type: ‘string’},
{name: ‘state’, type: ‘string’},
{name: ‘Edit’, type: ‘button’}
],
url: ‘url’ url = “C:\fakepath\Vehicle Register.csv”
};
var dataAdapter = new $.jqx.dataAdapter(source); dataAdapter = i.jqx.dataAdapter {_source: Object, _options: Object, records: Array[0], _downloadComplete: Array[0], _bindingUpdate: Array[0]}, source

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{

[ShreyanshParticipant]

problem solved for me…

[Author]

Posts