jQuery UI Widgets Forums Grid problem label "no data to display"

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 10 years, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • problem label "no data to display" #46527

    al3dv
    Participant

    Hi All, I have a problem with my grid!
    when I have no record in the center of the grid it show me a label “no data to display”.

    when I open a insert-detail view (jqxWindow) (for example) the label moving on the left of the grid?

    Why?

    thanks and sorry for my poor english

    problem label "no data to display" #46528

    Peter Stoev
    Keymaster

    Hi al3dv,

    Would you post a demo of that behavior?

    Best Regards,
    Peter Stoev

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

    problem label "no data to display" #46617

    al3dv
    Participant

    sorry for the late….this is my page.
    when click “add button” the label “no data to display” move on the left.

    thanks in advance

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Il Gestionale</title>
    <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.pager.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.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/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.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/jqxinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtooltip.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.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.filter.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
    <script type=”text/javascript” src=”scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”generatedata.js”></script>
    <style>
    html, body{width: 100%; height: 100%; overflow: hidden;}
    </style>

    <script type=”text/javascript”>
    window.onresize = function(event) {
    $(“#jqxgrid”).jqxGrid({height: $(window).height()-25});
    }

    $(document).ready(function () {
    var theme = getDemoTheme();

    var dynamic_height = $(window).height() – 25;

    var hideLinkColum = true;
    var manageCustomer = false;

    var query = window.location.search.substring(1);

    var vars = query.split(“&”);
    for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split(“=”);
    if (pair[0] == ‘clienti’) {
    manageCustomer = pair[1];
    }
    if (pair[0] == ‘showLinkColum’) {
    hideLinkColum = pair[1];
    }
    }

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘codice’, type: ‘string’ },
    { name: ‘descrizione’, type: ‘string’ }
    ],
    url: ‘_data.php’,
    updaterow: function (rowid, rowdata, commit) {

    var data = “update=true”;
    data = data + “&codice=” + rowdata.codice;
    data = data + “&descrizione=” + rowdata.descrizione;
    $.ajax({
    dataType: ‘json’,
    url: ‘_data.php’,
    data: data,
    success: function (data, status, xhr) {
    commit(true);
    }
    });

    },
    deleterow: function (rowid, commit) {

    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, rowid);
    var codice = dataRecord.codice;
    var data = “delete=true&codice=” + codice;
    $.ajax({
    dataType: ‘json’,
    url: ‘_data.php’,
    data: data,
    success: function (data, status, xhr) {
    commit(true);
    }
    });

    },
    addrow: function (rowid, rowdata, position, commit) {
    var data = “new=true”;
    data = data + “&codice=” + rowdata.codice;
    data = data + “&descrizione=” + rowdata.descrizione;
    $.ajax({
    dataType: ‘json’,
    url: ‘_data.php’,
    data: data,
    success: function (data, status, xhr) {
    rowdata.customerID = data;
    commit(true);
    }
    });

    }
    };

    var addfilter = function () {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = ”;
    var filtercondition = ‘contains’;
    var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtervalue = ”;
    filtercondition = ‘starts_with’;
    var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter1);
    filtergroup.addfilter(filter_or_operator, filter2);
    // add the filters.
    $(“#jqxgrid”).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
    // apply the filters.
    $(“#jqxgrid”).jqxGrid(‘applyfilters’);
    }

    // initialize the input fields.

    $(“#codice”).jqxInput({ theme: theme});
    $(“#descrizione”).jqxInput({ theme: theme });

    $(“#codice”).width(80);
    $(“#codice”).height(23);
    $(“#descrizione”).width(250);
    $(“#descrizione”).height(23);

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: ‘99%’,
    height: dynamic_height,
    source: dataAdapter,
    theme: theme,
    filterable: true,
    sortable: true,
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
    var addButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”);
    var editButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Edit</span></div>”);
    var deleteButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”);
    var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”);
    container.append(addButton);
    container.append(editButton);
    container.append(deleteButton);
    container.append(reloadButton);
    statusbar.append(container);
    addButton.jqxButton({ theme: theme, width: 80, height: 20 });
    editButton.jqxButton({ theme: theme, width: 80, height: 20 });
    deleteButton.jqxButton({ theme: theme, width: 80, height: 20 });
    reloadButton.jqxButton({ theme: theme, width: 80, height: 20 });

    // add new row.
    addButton.click(function (event) {
    $(“#popupWindow”).jqxWindow({ position: ‘center’ });
    editrow = -1;
    $(“#codice”).val(“”);
    $(“#descrizione”).val(“”);
    $(“#codice”).jqxInput({ disabled: false});
    $(“#popupWindow”).jqxWindow(‘open’);
    });

    editButton.click(function (event) {

    editrow = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    $(“#popupWindow”).jqxWindow({ position: ‘center’ });
    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
    $(“#codice”).val(dataRecord.codice);
    $(“#descrizione”).val(dataRecord.descrizione);
    $(“#codice”).jqxInput({ disabled: true});
    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    });

    deleteButton.click(function (event) {
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    var row = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    if (row >= 0 && row < rowscount) {
    $(“#jqxgrid”).jqxGrid(‘deleterow’, row);
    } else {
    alert(‘Rimuovere il filtro!’);
    }
    });

    reloadButton.click(function (event) {
    $(“#jqxgrid”).jqxGrid({ source:dataAdapter});
    });
    },
    ready: function () {
    addfilter();
    },
    autoshowfiltericon: true,
    columns: [
    { text: ‘Codice’, datafield: ‘codice’, width: 80},
    { text: ‘Descrizione’, datafield: ‘descrizione’}
    ]
    });

    $(“#jqxgrid”).on(“celldoubleclick”, function (){

    if (hideLinkColum == true) {
    return;
    }
    var row = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
    //var codice = dataRecord.codice;
    //parent.document.getElementById(“um_id”).value=dataRecord.codice;
    parent.$(‘#um_id’).val(dataRecord.codice);
    //parent.um_id.value=dataRecord.codice;
    //parent.cognome.value=dataRecord.cognome;
    //parent.nome.value=dataRecord.nome;
    parent.$(‘#eventWindow’).jqxWindow(‘close’);

    });

    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    width: 400, height: 165, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
    });
    $(“#popupWindow”).on(‘open’, function () {
    //$(“#popupWindow”).style.visibility=”visible”;
    if (document.getElementById(‘popupWindow’).style.visibility==”hidden”){
    document.getElementById(‘popupWindow’).style.visibility=”visible”
    }
    $(“#codice”).jqxInput(‘selectAll’);
    });

    $(“#Cancel”).jqxButton({width: ’80px’, height: ’25px’, theme: theme });
    $(“#Save”).jqxButton({width: ’80px’, height: ’25px’, theme: theme });

    $(“#Save”).click(function () {
    var check = $(‘#inputForm’).jqxValidator(‘validate’);

    if (check == true) {

    var row = { codice: $(“#codice”).val(),
    descrizione: $(“#descrizione”).val(),
    };
    var rowID;

    if (editrow != -1) {
    rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    } else {
    $(‘#jqxgrid’).jqxGrid(‘addrow’, null, row);
    }

    $(“#popupWindow”).jqxWindow(‘hide’);
    }
    });

    $(‘#inputForm’).jqxValidator({
    rules: [
    { input: ‘#codice’, message: ‘Codice e obbligatorio’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#descrizione’, message: ‘Descrizione e obbligatoria!’, action: ‘keyup, blur’, rule: ‘required’ }],
    theme: theme
    });

    $(‘#inputForm’).jqxValidator( { scroll: false } );

    });
    </script>
    </head>
    <body class=’default'”>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    <div id=”popupWindow” style=”visibility:hidden”>
    <div>Gestione Anagrafica Unita di Misura</div>
    <div style=”overflow: hidden;” align=”center”>
    <div>
    </br>
    <form id=”inputForm” action=”./” >
    <table name=”mainTable” id=”mainTable”>
    <tr>
    <td align=”right”>Codice:</td>
    <td align=”left”><input id=”codice” maxlength=”5″/></td>
    </tr>
    <tr>
    <td align=”right”>Descrizione:</td>
    <td colspan=”2″ align=”left”><input id=”descrizione” /></td>
    </tr>
    </table>
    </form>
    </div>
    </br>
    <div>
    <div id=’Cancel’ style=’float: right;margin-right:5px;’>

    <div style=’float: left; margin: 4px;’>
    Cancel</div>
    </div>
    <div id=’Save’ style=’float: right;margin-right:5px;’>

    <div style=’float: left; margin: 4px;’>
    Save</div>
    </div>
    </div>
    </div>
    </body>
    </html>

    problem label "no data to display" #46717

    al3dv
    Participant

    Hi All, no news? 🙁

    problem label "no data to display" #46722

    Peter Stoev
    Keymaster

    Hi al3dv,

    Sorry, we were unable to test the provided code locally.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.