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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Lengthy record are trimmed in a row #48072

    Vishal
    Participant

    I have a column where the row length is large duthis image shows a row having large record and last element of the row are trimmed.e to which the last element in the row are trimmed

    Lengthy record are trimmed in a row #48073

    Peter Stoev
    Keymaster

    Hi Vishal,

    Do you set the “width” setting of all your Grid columns?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Lengthy record are trimmed in a row #48074

    Vishal
    Participant

    Hi Peter,

    I have already set the width as —
    { text: 'Test Scenarios', datafield: 'testScenario', width:'80%',align: 'left'

    Lengthy record are trimmed in a row #48090

    Vishal
    Participant

    Hi Peter,

    I have removed the width also but still result is same.Please advice.

    Lengthy record are trimmed in a row #48091

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Lengthy record are trimmed in a row #48103

    Vishal
    Participant

    Hi

    Lengthy record are trimmed in a row #48104

    Vishal
    Participant

    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>

    Lengthy record are trimmed in a row #48111

    Peter Stoev
    Keymaster

    Hi Vishal,

    Another option is to update the “< " and ">” special characters from your data cell &amplt; and &ampgt;

    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"] = "| &amplt;Start&ampgt; | 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Lengthy record are trimmed in a row #48207

    Vishal
    Participant

    Hi Peter,

    Thanks for the support.It has resolved my issue.

    Thanks
    Vishal

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

You must be logged in to reply to this topic.