jQWidgets Forums

Tagged: grid, jqxgrid, one, row, validator

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 12 months ago.

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

Author

validator on jqxgrid is shown behide header and footer of grid Posts

June 21, 2013 at 6:31 am validator on jqxgrid is shown behide header and footer of grid #23538

Sacrifice

Member

Hi, Jqwidget team.

when I set autoheight: true. if it has just only one row on grid. validator will not display.

How can I set it to show on? on the header or the footer is ok.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxcheckbox.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.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> 
     
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var viewModel = [
//                { Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio", Salary: 100 },
//                {Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock", Salary: 100 },
                { Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller", Salary: 100 },
                { Title: "Vice President", Company: "Berglunds snabbkop", Name: "Robert King", Salary: 100 }
            ];
            // prepare the data
            var source =
            {
                localdata: viewModel,
                datafields: [
                    { name: 'Title', type: 'string' },
                    { name: 'Company', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Salary', type: 'float' }
                ]
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            var numberValidation = function (cell, value) {
                if (parseInt(value) < 0) {
                    return { result: false, message: cell.column + " should be positive number" };
                }
                return true;
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 720,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                autorowheight: true,
                autoheight: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Title', datafield: 'Title', width: 150 },
                  { text: 'Company', datafield: 'Company', cellsalign: 'right', align: 'right'},
                  { text: 'Name', datafield: 'Name', align: 'right', cellsalign: 'right', width: 190 },
                  { text: 'Salary', datafield: 'Salary', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 120, columntype: 'numberinput', cellsformat: 'f2', validation: numberValidation }
                ]
            });
        });
    </script>
</head>
<body class='default'>
  <span style="font-size: 12px; font-family: Verdana;">Note: To run a sample that includes data binding, you must open it via "http://..." protocol since Ajax makes http requests.</span>
  <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

June 24, 2013 at 5:22 am validator on jqxgrid is shown behide header and footer of grid #23643

Dimitar

Participant

Hello Sacrifice,

Thank you for your feedback. The issue comes from the fact that there is no place for the validator to appear. In the case of more than one grid row, the validator works properly.

Best Regards,
Dimitar

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.