How to prevent misalignment while rendering Schedule inside Tab control ?
The following steps helps you to prevent misalignment while rendering Schedule inside Tab control.
Step 1: Create an MVC application and include the default Schedule and Tab control in it by referring the following links,
Step 2: Define the ItemActive event for Tab with appropriate handler.
@{Html.EJ().Tab("defaultTabs").ClientSideEvents(c=>c.ItemActive("onItemActive")).Items(data => {
data.Add().ID("worldwar").Text("World War Z").ContentTemplate(@<div> <table> <tr> <td class="movies-img" valign="top"> <img src="@Url.Content("~/Content/wwz.png")" alt="mos" /> </td> <td valign="top"> <div> <span class="movie-header">World War Z</span><br /> <span>Movie Info:</span> <p> The story revolves around United Nations employee Gerry Lane (Pitt). </p> </div> </td> </tr> </table> </div>); data.Add().ID("Schedule").Text("Schedule Widget").ContentTemplate(@<div> @(Html.EJ().Schedule("Schedule1").Height("525px")) </div>);
}).Render();} |
Step 3: onitemActive is a function within which the code to prevent the Scheduler misalignment is defined as shown in the below code example,
function onItemActive(args) { if (args.activeIndex == 1) { // 1 denotes the Scheduler tab index var obj = $("#Schedule1").data("ejSchedule"); obj.refreshScroller();// it will refresh the scroller and prevent misalignment } } |
Sample: http://www.syncfusion.com/downloads/support/directtrac/172826/ze/Sample-1170746550
Step 4: Run the sample and Schedule will render properly inside the tab as shown below.
Figure 1: Schedule placed within the Tab control