jQuery UI Widgets › Forums › Lists › ListBox › Progress bar in List box Item

Tagged: , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Progress bar in List box Item Posts
  • January 6, 2015 at 12:33 pm Progress bar in List box Item #65024

    Sairam
    Participant

    Hi,

    I am trying to show progress bar in each list box item and I was able to do this using the List Box renderer property. However, when I select a listbox item, the progress bars disappear. While debugging the code, I found that the the progress bars disappear in jqxListbox.js, which was called automatically on selecting a list item. Looks like a bug in JqxListBox.js.

    I have attached my code below.

    `<!DOCTYPE HTML>
    <html>
    <head>
    <title>Test</title>
    <link rel=”stylesheet” href=”js/jqwidgets/styles/jqx.base.css” type=”text/css” />

    <script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”js/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”js/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”js/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”js/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”js/jqwidgets/jqxprogressbar.js”></script>

    <script type=”text/javascript”>
    var deviceIndex = 0;
    var dataSetIndex = 0;

    var data = [
    {
    deviceId: 1,
    deviceName: “Device 1”,
    bay: “Bay A”,
    dataSet: [
    {
    dataSetId: 1,
    dataSetName: “Data Set 1”,
    Path: “5%”
    }
    ]
    }
    ];

    $(document).ready(function () {
    // Create jqxListBoxes
    // Devices
    $(“#ProjectDevices”).jqxListBox({ autoHeight: true, source: data, displayMember: “deviceName”, valueMember: “deviceId”, itemHeight: 70, width: 300,
    renderer: function (index, label, value) {
    var dataRecord = data[index];
    var table = ‘<table><tr><td colspan=2>’ + dataRecord.deviceName + ‘</td></tr><tr><td>’ + dataRecord.bay + ‘|</td></tr></table>’;
    return table;
    }
    });

    //Dataset
    $(“#DataSet”).jqxListBox({ autoHeight: true, displayMember: “dataSetName”, valueMember: “dataSetId”, itemHeight: 70, width: 300, height: 250,
    renderer: function (index, label, value) {
    if (this.source != null) {
    var dataRecord = this.source[index];
    var table = ‘<table><tr><td>’ + dataRecord.dataSetName + ‘</td></tr><tr><td><div style=”margin-top: 10px;” class=”dataSetProgress” id=”jqxProgressBar’ + index + ‘”></div></td></tr></table>’;
    return table;
    }
    return;
    }
    });

    //eventHandler
    $(‘#ProjectDevices’).on(‘select’, function (event) {
    deviceIndex = event.args.index;

    updateDataSet(event.args.index);
    document.getElementById(‘AddDataSet’).disabled = false;
    });
    });

    var updateDataSet = function (index) {
    var dataSet = data[index].dataSet;

    $(“#DataSet”).jqxListBox({ source: dataSet });
    $(“#DataSet”).jqxListBox(‘refresh’);

    $(“.dataSetProgress”).jqxProgressBar({ value: 10, showText: true });

    deviceIndex = index;
    };

    function AddDataSet() {
    data[deviceIndex].dataSet.push({ ‘dataSetId’: 100, ‘dataSetName’: ‘New’, ‘Path’: ’14’, ‘publishingSignals’: ‘[]’ });

    updateDataSet(deviceIndex);
    }

    </script>
    </head>
    <body>
    <div id=”jqxTabs”>
    <div id=’content’>
    <table style=”border: solid 1px black;”>
    <thead style=”background-color: lightGray”>
    <tr>
    <th>
    Devices
    </th>
    <th>
    Add/Edit Dataset<input type=”button” value=”Add” id=”AddDataSet” disabled onclick=”javascript:AddDataSet();” />
    </th>
    </tr>
    </thead>
    <tr style=”vertical-align: top;”>
    <td>
    <div id=’ProjectDevices’>
    </div>
    </td>
    <td>
    <div id=’DataSet’>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>

    January 6, 2015 at 2:50 pm Progress bar in List box Item #65031

    Peter Stoev
    Keymaster

    Hi Sairam,

    It’s not possible to display widgets in the ListBox.

    Best Regards,
    Peter Stoev

    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.