progress bar with jqxGrid row details

[priyamsharma2704Participant]

Hi,
I have a jqxGrid with 3 columns, Name, Created, Status. I also have rowDetails set to true.
Status column is where i render a progress bar for each row using cellsrenderer.
The issue is when I expand any row, the progress bars disappears.

var source =
        {
            dataType: "array",
            dataFields: [
                { name: "id", type: "string" },
                { name: "Name", type: "object" },
                { name: "Created", type: "string" },
                { name: "Status", type: "string" },
                { name: "Details", type: "object" }
            ],
            localData: gridData
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        // Initialize the jqxTreeGrid
        $('#jobMonitorGrid').jqxGrid({
            width: "95%",
            theme: jqxTheme,
            selectionmode: 'checkbox',
            autosavestate: true,
            autoloadstate: true,
            source: dataAdapter,
            rowdetails: true,
            rowdetailstemplate: {
                rowdetails: "<div class='row_details' style='margin-left:20px'><div>",
                rowdetailsheight: 80,
            },
            ready: function () {
                // Reapply expanded rows
                //$("#jobMonitorGrid").jqxGrid('showrowdetails', 0);
            },
            initrowdetails: inrow_details,
            columns: [
                { text: "Name", dataField: "Name" },
                { text: "Created", dataField: "Created", width: 150 },
                { text: "Status", dataField: "Status", width: 200, cellsrenderer:statusCellRenderer }
            ],

        });

var inrow_details = function (index, parent_element) {
var details = gridData[index][“Details”];
var html = <div>;
for (var key in details) {
html += <div> ${key} : ${details[key]}</div>;
}
html += <div>;
var row_details = $($(parent_element).children(0));

row_details.html(html);
};

var gridData = [
{
id: “1”, Name: “Static Env”,
Created: “16 min ago”,
Status: “90”,
Details: { “desc”: “static struc”, “time”: “29sec”, “Path”: “C:awd” },
},
{ id: “2”, Name: “Modal Env”, Created: “10 min ago”, Status: “75”, Details: { “desc”: “static struc”, “time”: “29sec”, “Path”: “C:awd” }, },
{ id: “3”, Name: “Harmonic Env”, Created: “12 min ago”, Status: “80”, Details: { “desc”: “static struc”, “time”: “29sec”, “Path”: “C:awd” }, },
{ id: “4”, Name: “Static 2”, Created: “20 min ago”, Status: “95”, Details: { “desc”: “static struc”, “time”: “29sec”, “Path”: “C:awd” }, },
{ id: “5”, Name: “Modal 2”, Created: “18 min ago”, Status: “85”, Details: { “desc”: “static struc”, “time”: “29sec”, “Path”: “C:awd” }, }
];

function statusCellRenderer(row, columnfield, value, defaulthtml, columnproperties) {
// Generate a unique ID for the progress bar
const progressBarId = progressBar_${row};

// Create the container for the progress bar
const progressBarHTML = `
<div style=”width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;”>
<div id=”${progressBarId}” style=”width: 90%; height: 20px;”></div>
</div>
`;

// Initialize the jqxProgressBar after the HTML is rendered
setTimeout(() => {
$(#${progressBarId}).jqxProgressBar({
width: “90%”,
height: “60%”,
template: “info”,
value: parseInt(value, 10), // Convert percentage string to a number
showText: true,
renderText: function (text) {
return ${text}; // Display percentage text
}
});
}, 0);

return progressBarHTML;
}

• This topic was modified 8 months ago by  priyamsharma2704. Reason: code updated

[priyamsharma2704Participant]

[adminKeymaster]

Hi,

You can use the built-in progress bar column – https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/progress-column.htm?light

Best regards,
Peter Stoev

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

[priyamsharma2704Participant]

Thanks for the suggestion. I tried the example that you linked, but I found a strange behavior. It I double click on the any progress bar in the example that you attached, the bar disappears and comes back if I double click the progress bar of any other row. Is that expected ?

[priyamsharma2704Participant]

I also checked the documentation, and it does not mention ‘progressbar’ as a possible value

columntype – sets the column’s type.
Possible values:
‘number’ – readonly column with numbers.
‘checkbox’ – readonly checkbox when the editing is disabled. Checkbox input when editing is enabled.
threestatecheckbox – determines whether the checkbox has an indeterminate state when the value is null. The default value is false.
‘numberinput’ – sets a number input editor as a default editor for the column. Requires: jqxnumberinput.js
‘dropdownlist’ – sets a dropdownlist editor as a default editor for the column. Requires: jqxlistbox.js and jqxdropdownlist.js
‘combobox’ – sets a combobox editor as a default editor for the column. Requires: jqxlistbox.js and jqxcombobox.js
‘datetimeinput’ – sets a datetimeinput editor as a default editor for the column. Requires: jquery.global.js, jqxcalendar.js and jqxdatetimeinput.js
‘textbox’ – sets a textbox editor as a default editor for the column.
‘template’ – sets a custom editor as a default editor for the column. The editor should be created in the “createeditor” callback. The editor should be synchronized with the cell’s value in the “initeditor” callback. The editor’s value should be retrieved in the “geteditorvalue” callback.
‘custom’ – sets a custom editor as a default editor for a cell. That setting enables you to have multiple editors in a Grid column. The editors should be created in the “createeditor” callback – it is called for each row when the “columntype=custom”. The editors should be synchronized with the cell’s value in the “initeditor” callback. The editor’s value should be retrieved in the “geteditorvalue” callback.

[adminKeymaster]

Hi,

When you double click, it goes into edit mode to edit the value of the progress bar. This is an expected behavior. If editing is disabled for the entire data grid or this column, it would not enter into edit mode.

Best regards,
Peter Stoev

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

[Author]

Posts