jQWidgets Forums
This topic contains 22 replies, has 5 voices, and was last updated by stvhui 11 years, 2 months ago.
-
Hi,
I want add file upload option grid…I have added input file tag and try to render it.. It is displaying browse option but
when click or edit on other cell or i have added any new row uploaded file info is get cleared…I am trying to resolve last to 5-6 days not yet resolve…
I want add file upload option… add new row can also upload file. How can i do it?<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
<link rel=”stylesheet” href=”./contacts/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”./contacts/scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”./contacts/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var data = new Array();
var source_name =
[
‘Source Name1’
];
var data_type =
[
‘DataType’
];
var mainsite =
[
‘www.testsite.com’
];
var contact_name =
[
‘Contact Name’
];
var phone_number =
[
‘Phone Number’
];
var email =
[
‘test@test.com’
];
var generalnotes =
[
‘Enter Notes here’
];
// prepare the data
var data1 = {};
var theme = ‘classic’;
var generaterow = function (i) {var row = {};
row[“SourceName”] = source_name[i];
row[“DataType”] = data_type[i];
row[“mainSite”] = mainsite[i];
row[“ContactName”] = contact_name[i];
row[“Phone”] =phone_number[i];
row[“Email”] =email[i];
row[“GeneralNotes”] =generalnotes[i];
return row;
}
for (var i = 0; i < source_name.length; i++) {
var row = generaterow(i);
data1[i] = row;
}var theme = ”;
var datasources = [
<?php
include ‘config.php’;$rs = mysql_query(‘SELECT id,fullname FROM T_datasources’);
while($row = mysql_fetch_object($rs)){
?>{‘value’:<?php echo $row->id?>,’label’:'<?php echo $row->fullname?>’},
<?php
}
?>
];var countriesSource =
{
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ },
{ name: ‘value’, type: ‘string’ }
],
localdata: datasources
};
var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
autoBind: true
});
var demodata = [
{ dataCode: “1”,SourceName:’Source Name’,datatype:’Please Choose’,mainSite:’http://www.test.com’,ContactName:’ContactName’,Phone:’1234567890′,Email:’test@test.com’,GeneralNotes:'<input type=”file” name=”a” readonly onchange=”onFileSelected(event)”/>’ }
];
var demodata1 = [
{ dataCode: “1”,SourceName:’Source Name’,datatype:’Please Choose’,mainSite:’http://www.test.com’,ContactName:’ContactName’,Phone:’1234567890′,Email:’test@test.com’,GeneralNotes:'<input type=”file” name=”a[]” readonly onchange=”onFileSelected(event)” />’ }
];// prepare the data
var gridSource =
{
datatype: “array”,
localdata: {} ,
datafields: [
// name – determines the field’s name.
// value – the field’s value in the data source.
// values – specifies the field’s values.
// values.source – specifies the foreign source. The expected value is an array.
// values.value – specifies the field’s value in the foreign source.
// values.name – specifies the field’s name in the foreign source.
// When the adapter is loaded, each record will have a field called “Country”. The “Country” for each record comes from the countriesAdapter where the record’s “dataCode” from gridAdapter matches to the “value” from countriesAdapter.
{ name: ‘SourceName’, type: ‘string’},
{ name: ‘datatype’, value: ‘dataCode’, values: { source: countriesAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘dataCode’, type: ‘string’},
{ name: ‘mainSite’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘Phone’, type: ‘string’},
{ name: ‘Email’, type: ‘string’},
{ name: ‘GeneralNotes’, type: ‘html’}], addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
};
var uploadrenderer = function () { return ‘<input class=”FileColumn4″ name=”FileColumn4″ type=”file” />’; }
var gridAdapter = new $.jqx.dataAdapter(gridSource);
$(“#jqxgrid”).jqxGrid(
{
width: 1200,
source: gridAdapter,
theme: theme,
autoheight: true,
editable: true,
columns: [
{ text: ‘Source Name’, editable: true, datafield: ‘SourceName’, width: 200,valign: ‘top’ },{
text: ‘Data Type’, datafield: ‘dataCode’, displayfield: ‘datatype’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: countriesAdapter, displayMember: ‘label’, valueMember: ‘value’ });
}},
{ text: ‘main Site’, editable: true, datafield: ‘mainSite’, width:200 },
{ text: ‘Contact Name’, editable: true, datafield: ‘ContactName’, width: 200 },
{ text: ‘Phone’,editable: true, datafield: ‘Phone’, type: ‘html’},
{ text: ‘Email’,editable: true, datafield: ‘Email’, type: ‘html’},
{ text: ‘General Note’,editable: false, datafield: ‘GeneralNotes’,width: 250 }]
});$(“#addrowbutton”).jqxButton();
// create new row.
var aa=0;
$(“#addrowbutton”).on(‘click’, function () {
$(“input[name^=a]”).each(function() {
//alert($(this).attr(‘src’));
});
var id = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
$(“#jqxgrid”).jqxGrid(‘addrow’, id, {});
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, aa, ‘GeneralNotes’, ‘<input type=”file” name=”a’+aa+'” readonly />’);
aa++;
});
var countries = new Array(“Afghanistan”, “Albania”, “Algeria”, “Andorra”, “Angola”, “Antarctica”, “Antigua and Barbuda”, “Argentina”, “Armenia”, “Australia”, “Austria”, “Azerbaijan”, “Bahamas”, “Bahrain”, “Bangladesh”, “Barbados”, “Belarus”, “Belgium”, “Belize”, “Benin”, “Bermuda”, “Bhutan”, “Bolivia”, “Bosnia and Herzegovina”, “Botswana”, “Brazil”, “Brunei”, “Bulgaria”, “Burkina Faso”, “Burma”, “Burundi”, “Cambodia”, “Cameroon”, “Canada”, “Cape Verde”, “Central African Republic”, “Chad”, “Chile”, “China”, “Colombia”, “Comoros”, “Congo, Democratic Republic”, “Congo, Republic of the”, “Costa Rica”, “Cote d’Ivoire”, “Croatia”, “Cuba”, “Cyprus”, “Czech Republic”, “Denmark”, “Djibouti”, “Dominica”, “Dominican Republic”, “East Timor”, “Ecuador”, “Egypt”, “El Salvador”, “Equatorial Guinea”, “Eritrea”, “Estonia”, “Ethiopia”, “Fiji”, “Finland”, “France”, “Gabon”, “Gambia”, “Georgia”, “Germany”, “Ghana”, “Greece”, “Greenland”, “Grenada”, “Guatemala”, “Guinea”, “Guinea-Bissau”, “Guyana”, “Haiti”, “Honduras”, “Hong Kong”, “Hungary”, “Iceland”, “India”, “Indonesia”, “Iran”, “Iraq”, “Ireland”, “Israel”, “Italy”, “Jamaica”, “Japan”, “Jordan”, “Kazakhstan”, “Kenya”, “Kiribati”, “Korea, North”, “Korea, South”, “Kuwait”, “Kyrgyzstan”, “Laos”, “Latvia”, “Lebanon”, “Lesotho”, “Liberia”, “Libya”, “Liechtenstein”, “Lithuania”, “Luxembourg”, “Macedonia”, “Madagascar”, “Malawi”, “Malaysia”, “Maldives”, “Mali”, “Malta”, “Marshall Islands”, “Mauritania”, “Mauritius”, “Mexico”, “Micronesia”, “Moldova”, “Mongolia”, “Morocco”, “Monaco”, “Mozambique”, “Namibia”, “Nauru”, “Nepal”, “Netherlands”, “New Zealand”, “Nicaragua”, “Niger”, “Nigeria”, “Norway”, “Oman”, “Pakistan”, “Panama”, “Papua New Guinea”, “Paraguay”, “Peru”, “Philippines”, “Poland”, “Portugal”, “Qatar”, “Romania”, “Russia”, “Rwanda”, “Samoa”, “San Marino”, ” Sao Tome”, “Saudi Arabia”, “Senegal”, “Serbia and Montenegro”, “Seychelles”, “Sierra Leone”, “Singapore”, “Slovakia”, “Slovenia”, “Solomon Islands”, “Somalia”, “South Africa”, “Spain”, “Sri Lanka”, “Sudan”, “Suriname”, “Swaziland”, “Sweden”, “Switzerland”, “Syria”, “Taiwan”, “Tajikistan”, “Tanzania”, “Thailand”, “Togo”, “Tonga”, “Trinidad and Tobago”, “Tunisia”, “Turkey”, “Turkmenistan”, “Uganda”, “Ukraine”, “United Arab Emirates”, “United Kingdom”, “United States”, “Uruguay”, “Uzbekistan”, “Vanuatu”, “Venezuela”, “Vietnam”, “Yemen”, “Zambia”, “Zimbabwe”);
$(“input[name^=a]”).jqxInput({placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1, theme: theme, source: countries });});
</script>
</head>
<body class=’default’>
<form action=”” method=”post”
enctype=”multipart/form-data”>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
<div style=”font-size: 13px; “margin-top: 20px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif;” id=”eventLog”></div>
</div>
<div style=”margin-left: 10px; float: left;”>
<div>
<input id=”addrowbutton” type=”button” value=”Add New Row” />
</div>
</div>
<input type=”submit” name=”123″ value=”Submit”>
</form>
</body>
</html>
You must be logged in to reply to this topic.