bind data dynamically dhtmlx calendar mvc

I currently using DHTMLX calendar in my application with MVC. Now i load all events by default as follows :

 public ActionResult Index()
            {

                var scheduler = new DHXScheduler(this);

                scheduler.LoadData = true;
                scheduler.EnableDataprocessor = true;
                ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");

                return View(scheduler);
            }

        /* public ContentResult Data()
                {  
              var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events);
               ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");              
              return (ContentResult)data;
            }*/
     public ContentResult Data(int UserId)
            {

                ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");


                if (UserId != null)
                {
                    var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events.Where(a => a.CreatedBy == UserId.ToString()));
                    ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");
                    return (ContentResult)data;
                }
                else
                {
                    var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events.Where(a => a.CreatedBy == Session["EmpId"].ToString()));
                    ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");
                    return (ContentResult)data;              
                }
            }

Now i want to load the data by selection user in dropdownlist. So, i pass the userid to controller to fetch the events created by that particualar user. My view page is following :

<!DOCTYPE html>
<html>
<head>
    <title>Timesheet Events</title>
    <style>
        body
        {
            background-color:#eee;
        }
    </style>
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>    
    <script type="text/javascript">    
     $(document).ready(function () {
            $('#ddlUsers').change(function () {
                emId = $(this).val();
                window.location.href = "/Calendar/Data?UserId=" + emId;              
            });
      });
    </script>   
</head>
<body>
    <div style="height:700px;width:900px;margin:0 auto;padding-top:10%;">
        <table>
            <tr>
                <td>
                    Select User :
                </td>
                <td style="width:30%;">
                    @Html.DropDownList("EmpId", null, "-- Choose --", new { @class = "form-control", id = "ddlUsers" })
                </td>
                <td colspan="10">
                    <div id="calendar"></div>
                </td>
            </tr>
        </table>
        @Html.Raw(Model.Render())
    </div>
</body>
</html>

Now, when i select user it pass the id to controller but not load the calendar view based on that.. can anyone help me to do this.. Thanks in advance..

Solution

I think what your #ddlUsers handler does is navigates browser to Data action, which is not what you need. Try reloading data using client-side API of dhtmlxScheduler

$('#ddlUsers').change(function () {
    var emId = $(this).val();

    scheduler.clearAll();
    scheduler.load("/Calendar/Data?UserId=" + emId;, "json");
});