jQWidgets Forums

Tagged: datagrid data binding

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Binding data to grid on click of button Posts
July 7, 2014 at 4:33 am Binding data to grid on click of button #56815

priyanknaik88
Participant

Hi Peter,

<%@taglib uri=”http://www.springframework.org/tags/form” prefix=”form”%>
<%@ taglib prefix=”fmt” uri=”http://java.sun.com/jsp/jstl/fmt”%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

<title>Project Plan</title>

<link rel=”stylesheet” type=”text/css” media=”screen”
href=”<c:url value=”/resources/css/RAMP-stylesheet.css” />” />

<link rel=”stylesheet”
href=”jqwidgets-3.2.1/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript”
src=”jqwidgets-3.2.1/scripts/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”
src=”<c:url value=”/js/jquery-ui.min.js”/>”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”jqwidgets-3.2.1/scripts/demos.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript”
src=”jqwidgets-3.2.1/jqwidgets/jqxinput.js”></script>
<link rel=”stylesheet”
href=”jqwidgets-3.2.1/jqwidgets/styles/jqx.energyblue.css”
type=”text/css” />
<link rel=”stylesheet”
href=”jqwidgets-3.2.1/jqwidgets/styles/jqx.ui-sunny.css”
type=”text/css” />
<link rel=”stylesheet”
href=”jqwidgets-3.2.1/jqwidgets/styles/jqx.ui-lightness.css”
type=”text/css” />

<style type=”text/css”>

.jqx-menu-item-top-energyblue {
color: White;
font-weight: bold;
}
</style>

<script type=”text/javascript”>

var conrollerData ;// = ‘${report.resReportDetails}’;

$(document)
.ready(
function() {

$(“#location”).jqxDropDownList({
//source : pdxTypesArray,
selectedIndex : 0,
width : ‘150’,
height : ’25’,
theme : ‘ui-lightness’,
autoDropDownHeight: true
});

$(“#manager”).jqxDropDownList({
//source : pdxTypesArray,
selectedIndex : 0,
width : ‘150’,
height : ’25’,
theme : ‘ui-lightness’,
autoDropDownHeight: true
});

//get data from controler

var source =
{
url: conrollerData,
datatype: “json”,
datafields:
[
{ name: ‘type’, type: ‘string’ },
{ name: ‘resourceEmail’, type: ‘string’ },
{ name: ‘lastName’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘department’, type: ‘string’ },
{ name: ‘mainRole’, type: ‘string’ },
{ name: ‘secondRole’, type: ‘string’ },
{ name: ‘mainSkill’, type: ‘string’ },
{ name: ‘secondSkill’, type: ‘string’ },
{ name: ‘managerEmail’, type: ‘string’ },
{ name: ‘month’, type: ‘string’ },
{ name: ‘plannedFTP’, type: ‘string’ },
]
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#resourceLevelreportGrid”).jqxGrid({
width : 1270,
source : dataAdapter,
autoheight : true,
showstatusbar : true,
statusbarheight : 25,
enabletooltips : true,
editable : false,
columnsheight : 50,
theme : ‘ui-sunny’,
pageable : true,
pagermode : ‘simple’,
//filterable : true,
//showfilterrow : true,
columnsresize : true,
pagesize : 15,

columns: [
{ text: ‘Type’, dataField: ‘type’, width: 106 },
{ text: ‘Resource Email’, dataField: ‘resourceEmail’, width: 106 },
{ text: ‘Last Name’, dataField: ‘lastName’, width: 106},
{ text: ‘Location’, dataField: ‘location’, width: 106},
{ text: ‘Department’, dataField: ‘department’, width: 106},
{ text: ‘Main Role’, dataField: ‘mainRole’, width: 106 },
{ text: ‘Second Role’, dataField: ‘secondRole’, width: 106 },
{ text: ‘Main Skill’, dataField: ‘mainSkill’, width:106 },
{ text: ‘Second Skill’, dataField: ‘secondSkill’, width: 106 },
{ text: ‘Manager Email’, dataField: ‘managerEmail’, width:106 },
{ text: ‘Month’, dataField: ‘month’, width: 106 },
{ text: ‘Planned FTE’, dataField: ‘plannedFTP’, width: 101 },
]
});

//EXCEL EXPORT
$(“#btnExpExcel”).on(‘click’,
function() {

var rows = $(‘#resourceLevelreportGrid’).jqxGrid(‘getrows’);
var rowDataVal = JSON.stringify(rows) ;
$(“#rowData”).val(rowDataVal);
document.forms[0].action = “exportResourceLevelReport.htm”;
document.forms[0].submit();
});

$(“#priview”).on(‘click’, function() {

document.forms[0].action = “resourceLevelReport.htm”;
document.forms[0].submit();
conrollerData = ‘${report.resReportDetails}’;

});

});
</script>
</head>
<body id=”resourceLevelreport_Body”>
<form:form method=”post” action=”resourceLevelReport.htm”>
<div align=”left” id=”icon-bar”>
<label class=”labelpageName”><fmt:message
key=”label.resourceLevelReport” /></label>

<img name=”priview”
id=”priview” alt=”<fmt:message key=”label.save” />”

title=”<fmt:message key=”label.preview” />” width=”18px” height=”18px”
src=”<c:url value=”/resources/images/preview.png”/>”

onclick=”javascript:savePrepareData(‘null’);” />

<img name=”btnExpExcel”
id=”btnExpExcel” src=”resources/images/exportexcel.png”
title=”Export to Excel”>
</div>

<input name=”rowData” id=”rowData” type=”hidden” value=””/>

<div class=”divClass”>
<table align=”left”>
<tr>

<td><label class=”labelCss”>Location</label></td>
<td><td><input type=”text” id=”location” /></td></td>
<td width=”50″></td>
<td><label class=”labelCss”>Manager</label></td>
<td><input type=”text” id=”manager” /></td>
</tr>
</table>
</div>
<div id=”resourceLevelreportGrid”></div>
</form:form>
</body>
</html>

This is my code I want to bind the data to the grid on click of preview button can u plz correct this code.

regards
Priyank

July 7, 2014 at 11:46 am Binding data to grid on click of button #56825

Peter Stoev
Keymaster

Hi Priyank,

To bind the Grid, you have to set its “source” property to point to dataAdapter instance. To learn how to bind jqxGrid, please refer to: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.