{"id":2479,"date":"2014-10-07T13:09:16","date_gmt":"2014-10-07T09:09:16","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2479"},"modified":"2023-05-05T13:58:08","modified_gmt":"2023-05-05T10:58:08","slug":"progress-bar-in-cells","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/progress-bar-in-cells\/","title":{"rendered":"DHTMLX Little-Known Features: Progress Bar in Cells"},"content":{"rendered":"

Last time we shared the information about how you can dock \/ undock cells<\/a> in accordion and layout. The next feature we are going to review is an ability to display progress bar in cells<\/a>. <\/p>\n

Progress bar is a state indicator used to show the users that some action (for example, data loading) is currently in progress and other actions with this cell are disabled.<\/p>\n

\"progress-bar-grid\"<\/p>\n

To make it work, you need to call the appropriate API method:<\/p>\n

\/\/ turning progress on<\/span>
\ndhxComponent.cells<\/span>(<\/span>id)<\/span>.progressOn<\/span>(<\/span>)<\/span>;<\/span>
\n 
\n\/\/ turning progress off<\/span>
\ndhxComponent.cells<\/span>(<\/span>id)<\/span>.progressOff<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

<\/p>\n

In the following example we place the progressOn()<\/a> call before loading data in some component, and progressOff()<\/a> in data loading callback:<\/p>\n

var<\/span> myLayout;<\/span>
\nvar<\/span> myGrid;<\/span>
\n 
\n\/\/ init layout and attach grid<\/span>
\nfunction<\/span> initControls(<\/span>)<\/span> {<\/span>
\n    myLayout =<\/span> new<\/span> dhtmlXLayoutObject(<\/span>{<\/span>
\n        parent:<\/span> "layoutObj"<\/span>,<\/span>
\n        pattern:<\/span> "2U"<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n    myGrid =<\/span> myLayout.cells<\/span>(<\/span>"a"<\/span>)<\/span>.attachGrid<\/span>(<\/span>)<\/span>;<\/span>
\n    loadGridData(<\/span>true<\/span>)<\/span>;<\/span>
\n}<\/span>
\n 
\n\/\/ load\/reload grid data<\/span>
\nfunction<\/span> loadGridData(<\/span>firstLoad)<\/span> {<\/span>
\n    mylayout.cells<\/span>(<\/span>"a"<\/span>)<\/span>.progressOn<\/span>(<\/span>)<\/span>;<\/span>
\n    if<\/span> (<\/span>firstLoad ==<\/span> true<\/span>)<\/span> {<\/span>
\n        myGrid.load<\/span>(<\/span>"server.php"<\/span>,<\/span> doOnGridLoaded)<\/span>;<\/span>
\n    }<\/span> else<\/span> {<\/span>
\n        myGrid.updateFromXML<\/span>(<\/span>"server.php"<\/span>,<\/span> true<\/span>,<\/span> false<\/span>,<\/span> doOnGridLoaded)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span>
\n 
\n\/\/ grid dataload callback<\/span>
\nfunction<\/span> doOnGridLoaded(<\/span>)<\/span> {<\/span>
\n    myLayout.cells<\/span>(<\/span>"a"<\/span>)<\/span>.progressOff<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span>
\n<<\/span>body onload=<\/span>"initControls();"<\/span>><\/span>
\n    <<\/span>div id=<\/span>"layoutObj"<\/span> style=<\/span>"width: 600px; height: 400px;"<\/span>><\/<\/span>div><\/span>
\n    <<\/span>input type=<\/span>"button"<\/span> value=<\/span>"refresh grid"<\/span> onclick=<\/span>"loadGridData();"<\/span>><\/<\/span>div><\/span>
\n<\/<\/span>body><\/span><\/div><\/div>\n

When clicking on the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.<\/p>\n

Check this article<\/a> in documentation. Feel free to leave comments and ask your questions<\/p>\n","protected":false},"excerpt":{"rendered":"

Last time we shared the information about how you can dock \/ undock cells in accordion and layout. The next feature we are going to review is an ability …<\/p>\n","protected":false},"author":2,"featured_media":3322,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,14],"class_list":["post-2479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2479"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2479\/revisions"}],"predecessor-version":[{"id":9004,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2479\/revisions\/9004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3322"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}