Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Phil Wallingford on Jan 07, 2009 06:44
open dhtmlx forum
Progress Meter

Has anyone used these components to implement a progress meter? Or could anyone point me at a good solution?

Thanks.

Phil
Answer posted by Support on Jan 07, 2009 14:44
There is no easy way to use components as progress bar ( technically slider can be used for such task , it has all necessary API , but it look and feel are not very appropriate )
Answer posted by Paul Hemmer on Feb 09, 2009 15:02
I recently was able to implement a reasonable progress indicator inside a grid cell. The entire XML for the grid was built by a stored procedure in the database and it uses AJAX to asynchronously update. One of the field values in the recordset used to build the XML content is "percent_complete" and is updated by other areas in the data-layer during processing.   While generating the XML content in my stored procedure (MSSQL Server) I did this:

                select @xml = @xml + '    <cell><![CDATA[' + dbo.fn_HTMLProgressIndicator(@percent_complete) + ']]></cell>'

where the cell gets CDATA - allowing HTML content inside the cell. The content is the result of a user-defined function (see below.)  I made three images (gif files), a left "end cap", a middle, and a right "end cap" - just little red rectangles with some shading for the end points. The function simply draws the left, draws the middle with a the img tag WIDTH equal to the "percent complete".. This visually stretches the middle image which itself is only 1px wide. Finally I draw a right "end cap" image.  The result is a graphical red bar comprised of the three image elements, and the red bar grows in width as the "percent_complete" value in the recordset grows and AJAX reloads the grid. (of course you could simply and simply draw a 1x1 red gif file stretched to a width and the result is more or less the same)

CREATE FUNCTION [dbo].[fn_HTMLProgressIndicator]
(@value int)
RETURNS nvarchar(1000)
AS
BEGIN
    -- return HTML to draw a visual progress indicator - a stretched red bar with X% displayed to the left.

    declare @return nvarchar(1000)

    select @return=''
    select @return=@return + cast(@value as nvarchar) + '% <img src="../images/progress_left.gif" >'
    select @return=@return + '<img src="../images/progress_mid.gif"  width=' + cast(@value as nvarchar) + 'px;>'
    select @return=@return + '<img src="../images/progress_right.gif" ></span>'


    return @return
END


Answer posted by Paul Hemmer on Feb 09, 2009 15:07
I recently was able to implement a reasonable progress indicator inside a grid cell. The entire XML for the grid was built by a stored procedure in the database and it uses AJAX to asynchronously update. One of the field values in the recordset used to build the XML content is "percent_complete" and is updated by other areas in the data-layer during processing.   While generating the XML content in my stored procedure (MSSQL Server) I did this:

                select @xml = @xml + '    <cell><![CDATA[' + dbo.fn_HTMLProgressIndicator(@percent_complete) + ']]></cell>'

where the cell gets CDATA - allowing HTML content inside the cell. The content is the result of a user-defined function (see below.)  I made three images (gif files), a left "end cap", a middle, and a right "end cap" - just little red rectangles with some shading for the end points. The function simply draws the left, draws the middle with a the img tag WIDTH equal to the "percent complete".. This visually stretches the middle image which itself is only 1px wide. Finally I draw a right "end cap" image.  The result is a graphical red bar comprised of the three image elements, and the red bar grows in width as the "percent_complete" value in the recordset grows and AJAX reloads the grid. (of course you could simply and simply draw a 1x1 red gif file stretched to a width and the result is more or less the same)

CREATE FUNCTION [dbo].[fn_HTMLProgressIndicator]
(@value int)
RETURNS nvarchar(1000)
AS
BEGIN
    -- return HTML to draw a visual progress indicator - a stretched red bar with X% displayed to the left.

    declare @return nvarchar(1000)

    select @return=''
    select @return=@return + cast(@value as nvarchar) + '% <img src="../images/progress_left.gif" >'
    select @return=@return + '<img src="../images/progress_mid.gif"  width=' + cast(@value as nvarchar) + 'px;>'
    select @return=@return + '<img src="../images/progress_right.gif" ></span>'


    return @return
END