get the value of row that have a text input and file input using cellsrenderer

[ryan paulParticipant]

var PopulateGrid1 = function() {
$.ajax({
url: ‘Address1.aspx/Function1’,
dataType: ‘json’,
contentType: ‘application/json; charset=utf-8’,
type: ‘POST’,
async: false,
success: function (data) {
var temp = JSON.parse(data.d);

var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], id: ‘Column1’, datatype: ‘json’, localdata: temp.JsonString };

var remarksrenderer = function(){ return ”; }
var uploadrenderer = function(){ return ”; }

$(“#Grid1″).jqxGrid({
width: 660, theme: theme, pageable: true, pagesize: 5, height: 200, sortable: true, altrows: false, editable: false,
source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
columns: [
{ text: ‘Column1’, datafield: ‘Column1’, width: 100 },
{ text: ‘Column2’, datafield: ‘Column2’, width: 100 },
{ text: ‘TextColumn3’, datafield: ‘TextColumn3’, width: 100, cellsrenderer: remarksrenderer },
{ text: ‘FileColumn4’, datafield: ‘FileColumn4’, width: 100, cellsrenderer: uploadrenderer },
{
text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
buttonclick: function (row) {
var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
alert(“Column3 Value: ” +
// What should i place here?
” Column4 Value:” +
// What should i place here?
);
}
}
},
});
}
});
});

// i need to get all the value of the entire row
// specially the value of the text and file input generated using the cellsrenderer,

// is there a way to get the value?

[ryan paulParticipant]

var PopulateGrid1 = function() {
$.ajax({
url: ‘Address1.aspx/Function1’,
dataType: ‘json’,
contentType: ‘application/json; charset=utf-8’,
type: ‘POST’,
async: false,
success: function (data) {
var temp = JSON.parse(data.d);

var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], id: ‘Column1’, datatype: ‘json’, localdata: temp.JsonString };

var remarksrenderer = function(){ return ”; }
var uploadrenderer = function(){ return ”; }

$(“#Grid1″).jqxGrid({
width: 660, theme: theme, pageable: true, pagesize: 5, height: 200, sortable: true, altrows: false, editable: false,
source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
columns: [
{ text: ‘Column1’, datafield: ‘Column1’, width: 100 },
{ text: ‘Column2’, datafield: ‘Column2’, width: 100 },
{ text: ‘TextColumn3’, datafield: ‘TextColumn3’, width: 100, cellsrenderer: remarksrenderer },
{ text: ‘FileColumn4’, datafield: ‘FileColumn4’, width: 100, cellsrenderer: uploadrenderer },
{
text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
buttonclick: function (row) {
var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
alert(“Column3 Value: ” +
// What should i place here?
” Column4 Value:” +
// What should i place here?
);
}
}
},
});
}
});
});

[ryan paulParticipant]

it seems i have a problem in showing my codes with html tags, but you get the idea. i am creating a input text for remarks and input file for the attachments using the cellsrendere. now, how can i retrieve their value?

[DimitarParticipant]

Hello ryan paul,

Please provide us with your entire page and format the code as explained in the Code Formatting forum topic.

Best Regards,
Dimitar

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

[ryan paulParticipant]

Untitled Page

$(function() {
$.ajax({
url: ‘AddressOfFileToGetJsonData.aspx/FunctionToGetJsonData’,
dataType: ‘json’,
contentType: ‘application/json; charset=utf-8’,
type: ‘POST’,
async: false,
success: function (data) {
var temp = JSON.parse(data.d);

var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], datatype: ‘json’, localdata: temp.JsonString };

var column3renderer = function(){ return ”; }
var column4renderer = function(){ return ”; }
$(“#Grid1″).jqxGrid({
width: 660, theme: theme, pageable: true, pagesize: 5, autoheight: true,
source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
columns: [
{ text: ‘Column1’, datafield: ‘Column1’, width: 100 },
{ text: ‘Column2’, datafield: ‘Column2’, width: 100 },
{ text: ‘Column3’, datafield: ‘Column3’, width: 100, cellsrenderer: remarksrenderer },
{ text: ‘Column4’, datafield: ‘Column4’, width: 100, cellsrenderer: uploadrenderer },
{
text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
buttonclick: function (row) {
var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
alert(“Column3 Value: ” +
// What should i place here to get the value of the TextColumn3?
” Column4 Value:” +
// What should i place here to get the value of the FileColumn4?
);
}
}
},
});
}
});
});

[ryan paulParticipant]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ExecutionManagementSystem.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>	
	<link rel="stylesheet" type="text/css" href="/jqwidgets/styles/jqx.base.css" />
    
    <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/scripts/json2.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" >	
		$(function() {
			$.ajax({
				url: 'AddressOfFileToGetJsonData.aspx/FunctionToGetJsonData',
				dataType: 'json',
				contentType: 'application/json; charset=utf-8',
				type: 'POST',
				async: false,
				success: function (data) {        
					var temp = JSON.parse(data.d);
					
					var gridSource = { datafields: [{ name: 'Column1' }, { name: 'Column2' } ], datatype: 'json', localdata: temp.JsonString };
					
					var column3renderer = function(){ return '<input id="TextColumn3" name="TextColumn3" type="text" />'; }
					var column4renderer = function(){ return '<input id="FileColumn4" name="FileColumn4" type="file" />'; }			
					$("#Grid1").jqxGrid({
						width: 660, theme: theme, pageable: true, pagesize: 5, autoheight: true, 
						source: gridSource, selectionmode: 'singlecell', columnsresize: true,
						columns: [
							{ text: 'Column1', datafield: 'Column1', width: 100 },
							{ text: 'Column2', datafield: 'Column2', width: 100 },
							{ text: 'Column3', datafield: 'Column3', width: 100, cellsrenderer: remarksrenderer },
							{ text: 'Column4', datafield: 'Column4', width: 100, cellsrenderer: uploadrenderer },
							{ 
								text: '', datafield: 'Submit', columntype: 'button', width: 60, cellsrenderer: function() { return "Submit" }, 
								buttonclick: function (row) {					
									var dataRecord = $("#Grid1").jqxGrid('getrowdata', row);					
									alert("Column3 Value: " + 
										// What should i place here to get the value of the TextColumn3?
										" Column4 Value:" + 
										// What should i place here to get the value of the FileColumn4?
										);
								}
							}
						},
					});
				}
			});
		});		
	</script>	
</head>
<body>
    <form id="form1" runat="server">
    <div>
		<div id="Grid1">
        </div>
    </div>
    </form>
</body>
</html>

[DimitarParticipant]

Hello ryan paul,

First, you should change your cellsrenderers a little bit, as follows:

                    var column3renderer = function () { return '<input class="TextColumn3" name="TextColumn3" type="text" />'; }
                    var column4renderer = function () { return '<input class="FileColumn4" name="FileColumn4" type="file" />'; }

As for the buttonclick function, it should be:

							    buttonclick: function (row) {
							        var textValue = $(".TextColumn3:eq(" + row + ")").val();
							        var fileValue = $(".FileColumn4:eq(" + row + ")").val();
							        alert("Column3 Value: " + textValue + " Column4 Value:" + fileValue);
							    }

Best Regards,
Dimitar

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

[Author]

Posts