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>

<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

}

Step 4: Run the sample and Schedule will render properly inside the tab as shown below.

Figure 1: Schedule placed within the Tab control

Article ID:	Published Date:	Last Revised Date:	Platform:	Control:
7800	06/30/2017	06/30/2017	ASP.NET MVC	Schedule

Tags:

schedule-inside-tab

Did you find this information helpful?

Yes

CONTACT US