jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Lengthy record are trimmed in a row
This topic contains 8 replies, has 2 voices, and was last updated by Vishal 11 years, 5 months ago.
-
Author
-
I have a column where the row length is large du
e to which the last element in the row are trimmed
Hi Vishal,
Do you set the “width” setting of all your Grid columns?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I have already set the width as —
{ text: 'Test Scenarios', datafield: 'testScenario', width:'80%',align: 'left'
Hi Peter,
I have removed the width also but still result is same.Please advice.
Hi Vishal,
Please, send a full sample so we can see what’s the appropriate width for your row or if there’s something else which needs to be set.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi
Hi Peter ,
please find the view which we are using to generate the the JQX grid in the Right Pane.
JSP Code:<%@page import=”java.io.File”%>
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″ import=”com.tcs.lifeCycle.service.*”
import=”jquery.datatables.controller.*”
import=”jquery.datatables.hashmapDatagrid.*” import=”java.util.HashMap”
import=”java.util.List”%>
<%@taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<script type=”text/javascript”>
jQuery(document).ready( function() {
var sheetName=jQuery(‘#hiddenTestScenarioId’).val();
jQuery(‘#manualDataContent’).html(‘Test Scenario For ‘+sheetName);
generateGridTestCaseData();
jQuery(“#testCaseBack”).jqxButton({ width: ’50’, theme: “custom” });});
function generateGridTestCaseData(){
var clickedValue= <%=request.getParameter(“clickedvalue”)%>;
//prepare the data
var tsData = new Array();
var row = {};
row[“testScenarioName”] = “Sce”+clickedValue;
row[“testScenario”] = “| <Start> | Obtain the Claim | Check Claim Type | Convert Paper Claim to Scanned form | start-EligibilityVerify | Check MRN with membership database | Check If matching | Check Service Dates | Check If within the period | Verify Member Health Plan for benefits | Check If allowable | Reject the Claim | end-EligibilityVerify | start-Initialization | Split into institutional and professional claims | Number of service lines | Lock the claim for processing | Process Diagnostic Codes | ICD9 Code with DOS greater than 2013 | Reject Claim | end-Initialization | Payment Process | end-main”;
tsData[0] = row;
var source =
{
datatype: “array”,
datafields: [
{ name: ‘testScenarioName’, type: ‘string’,},
{ name: ‘testScenario’, type: ‘string’,}
],
localdata: tsData
};
function setGlobalFilter (filtervalue) {
var cgTableObject=jQuery(“#jqxgridTestCasetestData”);
var columns = cgTableObject.jqxGrid(‘columns’);
var filtergroup, filter;
cgTableObject.jqxGrid(‘clearfilters’);
if (filtervalue == null || filtervalue == ”) {
return;
}
for ( var i = 0; i < columns.records.length; i++) {
if (!columns.records[i].hidden && columns.records[i].filterable) {
filtergroup = new jQuery.jqx.filter();
filtergroup.operator = ‘or’;
filter = filtergroup.createfilter(‘stringfilter’, filtervalue, ‘contains’);
filtergroup.addfilter(1, filter);
cgTableObject.jqxGrid(‘addfilter’, columns.records[i].datafield, filtergroup);
}
}
cgTableObject.jqxGrid(‘applyfilters’);
}var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgridTestCasetestData”).on(‘bindingcomplete’, function () {
$(“#jqxgridTestCasetestData”).jqxGrid(‘autoresizecolumns’);
});//initialize jqxGrid
jQuery(“#jqxgridTestCasetestData”).jqxGrid(
{
height:270,
width: 775,
autoheight: true,
source: dataAdapter,
theme: “custom”,
pageable: true,
sortable: true,
showfilterrow: false,
filterable: true,
enabletooltips: true,
editable: false,
showtoolbar: true,
enableellipsis: false,columns:[ { text: ‘<span title=”Test Scenario Name”><B> Test Scenario Name </B></span>’, datafield: ‘testScenarioName’, align: ‘left’,pinned: ‘true’},
{ text: ‘Test Scenarios’, datafield: ‘testScenario’,align: ‘left’}
],
rendertoolbar: function (toolbar) {
var container = jQuery(“<div style=’margin: 5px;’></div>”);
var span = jQuery(“<span style=’float: left; margin-top: 0px; margin-left: 550px;’>Search</span>”);
var input =jQuery(“<input class=’jqx-input jqx-widget-content jqx-rc-all’ id=’searchField’ type=’text’ style=’height: 15px; float: right; width: 150px;’ />”);
toolbar.append(container);
container.append(span);
container.append(input);
input.on(‘keydown’, function (event) {
var searchText=input.val();
setGlobalFilter(searchText);
});
}
});
}
</script>
</head>
<body>
<div id=”manualDataContent” class=”contentboxheader”
style=”height: 23px; width: 770px;”>Test Scenarios</div>
<div class=”contentbox”
style=”height: 295px; width: 776px; margin-top: -8px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px;”><div class=’default’>
<div id=’jqxWidget’
style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgridTestCasetestData”></div>
</div>
<div align=”center”>
<input id=”testCaseBack” type=”button” value=”Back”
onclick=”backFlow();” style=”FONT-SIZE: small;” />
</div>
</div></div>
</body>
</html>Hi Vishal,
Another option is to update the “< " and ">” special characters from your data cell
&lt; and &gt;
Example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var tsData = new Array(); var row = {}; row["testScenarioName"] = "Sce"; row["testScenario"] = "| &lt;Start&gt; | Obtain the Claim | Check Claim Type | Convert Paper Claim to Scanned form | start-EligibilityVerify | Check MRN with membership database | Check If matching | Check Service Dates | Check If within the period | Verify Member Health Plan for benefits | Check If allowable | Reject the Claim | end-EligibilityVerify | start-Initialization | Split into institutional and professional claims | Number of service lines | Lock the claim for processing | Process Diagnostic Codes | ICD9 Code with DOS greater than 2013 | Reject Claim | end-Initialization | Payment Process | end-main"; tsData[0] = row; var source = { datatype: "array", datafields: [ { name: 'testScenarioName', type: 'string'}, { name: 'testScenario', type: 'string'} ], localdata: tsData }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgridTestCasetestData").on('bindingcomplete', function () { $("#jqxgridTestCasetestData").jqxGrid('autoresizecolumns'); }); //initialize jqxGrid $("#jqxgridTestCasetestData").jqxGrid( { height:270, width: 775, autoheight: true, source: dataAdapter, theme: "custom", pageable: true, showfilterrow: false, enabletooltips: true, editable: false, enableellipsis: false, columns:[ { text: '<span title="Test Scenario Name"><B> Test Scenario Name </B></span>', datafield: 'testScenarioName', align: 'left',pinned: 'true'}, { text: 'Test Scenarios', datafield: 'testScenario',align: 'left', width: 800} ] }); }); </script> </head> <body> <div id="jqxgridTestCasetestData"> </div> </body> </html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for the support.It has resolved my issue.
Thanks
Vishal -
AuthorPosts
You must be logged in to reply to this topic.