using mvc dropdownList filter not loading "filtered" data

Scheduler ASP.NET MVC
#1

I’m working on an MVC 5 project where a manager can view when the people in his department are on leave.

I’m able to do an initial load from the database for all departments.

But when I select an item from the dropdownlist it won’t load that data in an new scheduler instance. Instead the Data method only outputs that AJAX call to the browser (when I get the results to the data actionresult) or it won’t load the new data (when i get the results to the index).
After spending days in the documentation figuring out how to do the filtering in this specific case.

I’m overlooking something but I’ve lost the overview to complete this on my own.
Any specific help would be greatly appreciated.

The Index Controller:
public ActionResult Index(string AfdelingsId)
{
var scheduler = new DHXScheduler();

        scheduler.Skin = DHXScheduler.Skins.Flat;

        scheduler.Config.first_hour = 6;
        scheduler.Config.last_hour = 20;

        scheduler.LoadData = true;
        scheduler.EnableDataprocessor = true;

        scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Month);

        //var nameValuepair = GetCollection();

        Afdeling afdeling = new Afdeling();
        ViewBag.AfdelingsId = new SelectList(db.Afdeling, "Id", "AfdelingNaam", afdeling.Id);

        return View(scheduler);
    }

The Data controller:
public ActionResult Data(string AfdelingsId)
{//events for loading to scheduler

        //int? afdelingsId = 3;

        //foreach (var item in formCollection.AllKeys)
        //{
        //    var value = formCollection[item];
        //}


        List<VerlofDTO> verlofAll = new List<VerlofDTO>();

        if (AfdelingsId == null)
        {
            verlofAll = VerlofViewModel.GetVerlofAll();
        }
        else
        {
            var afdId = Int16.Parse(AfdelingsId);
            verlofAll = VerlofViewModel.GetVerlofAfdeling(afdId);
        }

        return new SchedulerAjaxData(verlofAll);


    }

the View:
@using (Html.BeginForm(“Index”, “Schedules”, FormMethod.Get))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Verlof</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @*@Html.LabelFor(model => model.Medewerker.AfdelingsId, "AfdelingsId", htmlAttributes: new { @class = "control-label col-md-2" })*@
        <div class="col-md-10">
            @Html.DropDownList("AfdelingsId", null, htmlAttributes: new { @class = "form-control" })
            @*@Html.ValidationMessageFor(model => model.Medewerker.AfdelingsId, "", new { @class = "text-danger" })*@
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Vraag verlof op" class="btn btn-default"/>
        </div>
    </div>

    <div class="scheduler_container">
        @Html.Raw(Model.Render())
    </div>
</div>

}

#2

Hello,
instead of submitting the page, try reloading data on the fly. This can be done using client-side methods scheduler.clearAll and scheduler.load, e.g.function filterData(filterValue){ scheduler.clearAll(); scheduler.load("@Url.Action("Data")?AfdelingsId=" + encodeURIComponent(filterValue), "json"); }
docs.dhtmlx.com/scheduler/api__s … arall.html
docs.dhtmlx.com/scheduler/api__s … _load.html

Alternatively, if you still want submitting the page. When scheduler is initialized on the page, it calls scheduler.load method to the specified action. By default it uses actions of the same controller named Save and Data for saving and loading events, the events can be changed using scheduler.

So what you can do is to specify data loading url with all required parameters during initialization of the schedulerpublic ActionResult Index(string AfdelingsId) { var scheduler = new DHXScheduler(); // call data action with provided AfdelingsId parameter scheduler.DataAction = Url.Action("Data", new { AfdelingsId = AfdelingsId });

#3

Hi Aliaksandr,

First of all thanks for the swift reply.

Still having some issues, hope you can help.

When I try the first scenario you suggest, adjusting only the View like this no data is returned to the schedule:

add action to the button like this:

and adjust beginform like this:
@using (Html.BeginForm())

Scenario 2 (without the javascript from scenario 1) using the scheduler.DataAction = Url.Action(“Data”, new { AfdelingsId = AfdelingsId }); on the Index Controller returns data but return it 2, 3 or 4 times in the schedule when browsing through weeks, monts etc.

Scenario 3 (combining scenarios 1 and 2) does the same as scenario 2.

It seems the javascript is not working, at least the clearall doesnt work.

Hope you have any clue where to look.

Kind regards,

Daniel

#4

Figured it out.
Leave off the Javascript part, just use the serverside part but comment this line out in the Index of the controller"

//scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Month);

Now the schedule only shows entries once, even after refreshing or changing the timeview fri week to day or month and back.

#5

Hello,
the easier way would be to keep dynamic loading.
Be sure to specify form action correctly, from code you provided in previous post - it won’t trigger js function
stackoverflow.com/questions/1314 … n-redirect

Alternatively you can remove form and simply have a handler for ‘onchange’ event of dropdown

Please check this example
s3.amazonaws.com/uploads.hipcha … filter.zip