We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to prevent misalignment while rendering Schedule inside Tab control ?

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: June 30, 2017 |
Last Revised Date: June 30, 2017

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,

Schedule: http://mvc.syncfusion.com/demos/web/schedule/default

Tab: http://mvc.syncfusion.com/demos/web/tab/default


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>



                <td class="movies-img" valign="top">

                    <img src="@Url.Content("~/Content/wwz.png")" alt="mos" />


                <td valign="top">


                        <span class="movie-header">World War Z</span><br />

                        <span>Movie Info:</span>


                            The story revolves around United Nations employee Gerry Lane (Pitt).







            data.Add().ID("Schedule").Text("Schedule Widget").ContentTemplate(@<div>






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

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon