jQWidgets Forums
jQuery UI Widgets › Forums › Grid › displaying multiple values against one value in jqxGrid
This topic contains 6 replies, has 2 voices, and was last updated by swati 11 years, 2 months ago.
-
Author
-
is it possible to create a grid having 3 rows and 3 cols as belows
<GRID HEADING>service_level feature feature_options
<GRID 1ST ROW> Basic Chat NA
WEB NA<GRID 2ND ROW> Premium Chat NA
WEB NA
MOBILE UPLOAD ONLY,UPLOAD AND DOWNLOAD
<GRID 3RD ROW> premium plus Chat NA
web NA
mobile UPLOAD ONLY,UPLOAD AND DOWNLOAD
WITSML NA
<end of the grid>Please help me to display this format in grid…
Hi swati,
What’s the format of your data – JSON, XML, CSV, TSV, Array? Could you share it?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter
My data format is JSON.
Datas are coming from database and i am converting it to JSON and displaying it in Grid.
I am retrieving Service levels ,its features, and feature options.
For Ex. Service level -“Basic” can have features “Chat” “Web” and feature oPTIONS “NA” “NA”.
Service level -“Premium” can have features “Chat” “Web” “WITSML”and feature oPTIONS “NA” “NA””NA”
Service level -“Premium Plus” can have features “Chat” “Web” “WITSML” “Mobile” and feature oPTIONS “NA” “NA””NA” “Upload only,Upload & Download”I need to show 3 rows(Basic,Premium,Premium pLUS) with 3 cols (Service Level,feature,FeatureOptions)
My problem is how can i show multiple values coming from database in one column<html>
<head><link href=”<c:url value=”/resources/css/Admin.css” />” rel=”stylesheet”>
<link href=”<c:url value=”/resources/css/jqx.base.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script><script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcore.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcheckbox.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcore.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxbuttons.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxscrollbar.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxmenu.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.selection.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.columnsresize.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdata.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.edit.js” />”></script>
<script src=”<c:url value=”/resources/scripts/demos.js” />” ></script>
<script src=”<c:url value=”/resources/generatedata.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxnumberinput.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxwindow.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxlistbox.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdropdownlist.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.sort.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.filter.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.pager.js” />” ></script><script type=”text/javascript”>
$(document).ready(function () {
var jsonString=JSON.stringify(${featureDetails});(My data coming from database)
var source =
{
localdata:jsonString,
datatype: “json”,
datafields:
[
{ name: ‘serviceLevel’, type: ‘string’ },
//{ name: ‘SAPcompany’, type: ‘string’ },
{ name: ‘features’, type: ‘string’ },How can i show multiple feature against one servicelevel here ?<without using any drpdown>{ name: ‘featureOptions’, type: ‘string’ }<How can i show multiple featureOptions one feature here?><without using any drpdown>
],
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{width: 620,
source: dataAdapter,
pageable: true,
sortable : true,
editable: false,
selectionmode: ‘singlerow’,
//enablehover: true,
showfilterrow: true,
filterable : true,
autoheight: true,
// cellselection : true,columns: [
{ text: ‘Service Level’, datafield: ‘serviceLevel’, filtertype : ‘textbox’, filtercondition: ‘starts_with’, width: 100},
{ text: ‘Features’, datafield: ‘features’, filtertype : ‘textbox’, filtercondition: ‘starts_with’, width: 150},{ text: ‘Option Values’, datafield: ‘featureOptions’, filtertype : ‘textbox’, filtercondition: ‘starts_with’, width: 180}
]
});
</script>
</head>
<body>
<div id=”jqxgrid” style=”overflow: hidden;”></div>
</body>
</html>Hi swati,
You can use the “cellsrenderer” column callback function to draw multiple values in a Grid cell. the function is called each time a cell is drawn. Example: http://www.jqwidgets.com/community/forum/general-discussions/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comI did not find any cellsRenderer callback function example in the link you have provided.:(…kindly paste the example here
Hi swati,
Sorry, the link is: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comhi,
here are my data fields..
datafields:
[
{ name: ‘serviceLevel’, type: ‘string’ },
{ name: ‘features’, type: ‘string’ },],
am getting the data in json fromat. my problem is as i recieve 8 rows as data, i have only 3 services levels repeatedly and corresponding values for others.
how can i display only 3 service levels as 3 rows and their corresponding features as their respective features in single cell
for example:
row1 serviceLevel1 feature11
feature12
feature13row 2 serviceLevel1 feature21
feature22row3 serviceLevel2 feature31
feature32
feature33how can i do this with cells rendering.. pls help me with this..
Thank you.
-
AuthorPosts
You must be logged in to reply to this topic.