Custom Drawing in WijDialog

Wijmo widgets are built with jQuery, HTML5, CSS5 and use RaphaelJS library for creating vector graphics on the web. Hence, it allows you to create line, rectangle, circle etc. on top of the Wijmo widgets. This blog demonstrates how you can do custom drawing like drawing a line/rectangle on WijDialog widget. Basically, you need to get the container element of the WijDialog widget, create line/rectangle using its canvas and append them in the container. Quite simple !! However, you need to be careful because WijDialog allows users to change its position/size so the custom drawing should move in sync with the parent i.e. WijDialog. Here is the complete code which draws a line along with a rectangle on top of WijDialog and move them in sync :

$(document).ready(function () {  
  $('#dialog').wijdialog({  
    autoOpen: true,  
    captionButtons: {  
    refresh: { visible: false }  
   }  
  });  
  //obtain the outest container of the dialog  
  var canvas = $("#dialog").data("wijmo-wijdialog").uiDialog;  

  //create the container where the line will be drawn in and append it to the dialog container.  
  var lineContainer = $("<div id='div1'></div>").appendTo(canvas);  

 //locate the line container so that it can be moved along with dialog.  
  lineContainer.css("position", "absolute");  
  lineContainer.css("left", "10px");  
  lineContainer.css("top", "50px");  
  lineContainer.css("width", "100px");  
  lineContainer.css("height", "20px");  

  // draw line by Raphael  
  var rpLine = Raphael(lineContainer[0], 100, 10).path("M0 0L100 0");  
  rpLine.attr("stroke-width", 10);  
  rpLine.attr("stroke", "red");  

  //draw line by html  
  var htLine = $("<div style='width:100px; height:10px; position:relative;background-color:blue'></div>");  
  htLine.appendTo(lineContainer);  
});

You can also use this jsFiddle to play around with the code. :-)