jQWidgets Forums
Forum Replies Created
-
Author
-
December 16, 2013 at 6:34 am in reply to: In Grid want to add file upload In Grid want to add file upload #46560
How Can i get files after submit? How can i get the data after submit…..
December 12, 2013 at 11:26 am in reply to: In Grid want to add file upload In Grid want to add file upload #46402My main issues is How can i add input file button in grid… Is there any way i am asking…otherwise i will move to another grid solution.In my site i have used only your grid… that why i am asking your reply is very late. can you provide me good example urgenty…
December 11, 2013 at 9:21 am in reply to: In Grid want to add file upload In Grid want to add file upload #46331Can please give code like i can upload image through grid. When i will add new row. Value in input type file is get cleared… I want upload image button on each row… How can i edit that? this thing i want to know.
December 11, 2013 at 9:18 am in reply to: In Grid want to add file upload In Grid want to add file upload #46329<!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 data1 = {};
var theme = ”;
var datasources = [{id:1,value:’a’},{id:1,value:’b’},{id:1,value:’c’}];
var dataSource =
{
datatype: “array”,
datafields: [ { name: ‘label’, type: ‘string’ },{ name: ‘value’, type: ‘string’ }],
localdata: datasources
};
var dataAdapter = new $.jqx.dataAdapter(dataSource, {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)”/>’ }];
// prepare the data
var gridSource =
{
datatype: “array”,
localdata: {} ,
datafields: [
{ name: ‘SourceName’, type: ‘string’},
{ name: ‘datatype’, value: ‘dataCode’, values: { source: dataAdapter.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) {
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: dataAdapter, 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++;
});
//$(“input[name^=a]”).jqxInput({placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1, theme: theme, source: data });});
</script>
</head>
<body class=’default’>
<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>
</form>
</body>
</html> -
AuthorPosts