Highlight errors within the rows of a grid table
Summary | This article describes how to change the background colour in the row of a grid table, when an error is displayed, in AskiaDesign by using JavaScript. |
Applies to | AskiaDesign |
Written for | Scriptwriters and survey authors |
Keywords | error; highlight; grid; table; script; javascript; display; design; askiadesign |
Download the example QEX file
This piece of JavaScript code changes the background colour in the row of table, when there an error is displayed. This code only works with question tables formatted with as response-blocks.
Usage
Copy and paste the code into the label on the screen (make sure that the option "validation by alert" is selected in the internet settings, JavaScript tab).
<script language="javascript"> ///<summary> ///Indicates the background color of the appropriate row of a question table when an error is displayed ///</summary> var ERROR_STYLE_BACKGROUND="#ff0000"; ///<summary> ///Attach a behaviour when an error is displayed ///</summary> ///<param name="oErrorStackItem">ErrorStackItem which causes the error</param> ErrorStack.onError=function(oErrorStackItem){ changeTableRowStyle(oErrorStackItem,false); } ///<summary> ///Attach a behaviour when the error disappear ///</summary> ///<param name="oErrorStackItem">ErrorStackItem which causes the event</param> ErrorStack.onClear=function(oErrorStackItem){ changeTableRowStyle(oErrorStackItem,true); } ///<summary> ///Change the color of the appropriate row of a question table when an error is displayed ///</summary> ///<param name="oErrorStackItem">ErrorStackItem which provoke the event</param> ///<param name="isRestore">Roll back to the default style or apply the style of error</param> function changeTableRowStyle(oErrorStackItem,isRestore){ var q=oErrorStackItem.question; if (!q.isClosed)return; var ctrl=q.childNodes[0].htmlControl; var pNode=ctrl.parentNode; while(pNode.tagName!="TR" && pNode.tagName!="BODY"){ if (pNode.tagName!="TR")pNode=pNode.parentNode; } if (pNode.tagName!="TR")return; //Change the style of each TD for (var i=0;i<pNode.childNodes.length;i++){ if (pNode.childNodes[i].tagName!="TD")continue; //Keep the default style in memory to restore it after if (!isRestore)pNode.childNodes[i].setAttribute("oldStyle",pNode.childNodes[i].style.background); var strRestoreStyle=(!pNode.childNodes[i].getAttribute("oldStyle"))?"":pNode.childNodes[i].getAttribute("oldStyle"); pNode.childNodes[i].style.background=(!isRestore)?ERROR_STYLE_BACKGROUND:strRestoreStyle; } } </script>