Dynamically changing resources from remote data

[Stefano Capobianco]

Hi support, i've the schedule control inside my web page and i would like to select a resource from a list box. 

This is my schedule control

                            <ej-schedule id="Schedule1" width="100%" height="525px" views="views" current-view="Week" show-all-day-row="false"

                                         read-only="false" locale="@_locale" show-delete-confirmation-dialog="false" cell-width="50px"

                                         orientation="Horizontal" enable-load-on-demand="true"

                                         show-appointment-navigator="false" show-quick-window="false"

                                         action-begin="ScheduleBegin"

                                         query-cell-info="ScheduleCellHover"

                                         appointment-window-open="AppointmentOpen"

                                         appointment-deleted="AppointmentDelete"

                                         appointment-hover="AppointmentHover"

                                         before-context-menu-open="ScheduleBeforeContextMenuOpen"

                                         action-complete="ScheduleComplete">

                                <e-context-menu-settings enable="true">

                                    <e-menu-items>

                                        <e-appointment-collection>

                                            <e-appointment id="open" text="Modifica Appuntamento" />

                                            <e-appointment id="delete" text="Cancella Appuntmento" />

                                        </e-appointment-collection>

                                        <e-cells-collection>

                                            <e-cells id="customoption" text="Crea Appuntamento" />

                                        </e-cells-collection>

                                    </e-menu-items>

                                </e-context-menu-settings>

                                <e-time-scale enable="true" major-slot="60" minor-slot-count="4"></e-time-scale>

                                <e-resources>

                                    <e-resource field="UserId" title="Medico" name="Owners" allow-multiple="false">

                                        <e-resource-settings id="Id" text="FullName">

                                            <e-datamanager url="/Security/Users/GetDoctors"></e-datamanager>

                                        </e-resource-settings>

                                    </e-resource>

                                </e-resources>

                                <e-group resources="Group"></e-group>

                                <e-appointment-settings apply-time-offset="false" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"'

                                                        all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"' resource-fields='"UserId"'>

                                    <e-datamanager url="/Waitingroom/Schedulings/ScheduleAppointments"

                                                   crud-url="/Waitingroom/Schedulings/Crud"

                                                   cross-domain="true"></e-datamanager>

                                </e-appointment-settings>

                            </ej-schedule>

The list box are filled, from remote data, with a list and a static value:

                                <ej-drop-down-list id="selectDoctor" width="100%" read-only="false"

                                                   locale="@_locale" action-complete="LBComplete" change="LBChange">

                                    <e-datamanager url="/Security/Users/GetDoctors" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

                                    <e-drop-down-list-fields text="FullName" value="Id" id="Id" />

                                </ej-drop-down-list>

        function LBComplete(args) {

            var listBox = $('#selectDoctor').data("ejDropDownList");

            var maxElem = listBox.getListData().length + 1;

            $('#selectDoctor').ejDropDownList("addItem", { text: "ALL", value: maxElem, Id: maxElem });

            listBox.selectItemByValue(maxElem);

        }

The ALL value is used to fille the schedule resource with all value in remote table. 

The list box act as a filter. How can i refresh the grid with the new parameters?

Thanks

Stefano Capobianco

[Nevitha Ravi]

Hi Stefano, 

We have prepared a sample for your requirement which can be downloaded from the following link.  

http://www.syncfusion.com/downloads/support/forum/137171/ze/sample-322309137 

<div> 

    <ej-drop-down-list id="selectResource" width="50%" watermark-text="Select resource" datasource="@ViewBag.dropData" show-checkbox="true" multi-select-mode="VisualMode" popup-hide="dropValueChange"></ej-drop-down-list> 

</div> 

<script> 

    function dropValueChange(args) { 

        var schObj = $("#Schedule1").ejSchedule("instance"); 

        var resData = args.model.dataSource; 

        var obj = (args.text).split(','); 

        var newResList = []; 

        for (var i = 0; i < obj.length; i++) { 

            filterData1 = new ej.DataManager(resData).executeLocal(new ej.Query().where("text", ej.FilterOperators.equal, obj[i])); 

            newResList.push(filterData1[0]); 

        } 

        schObj.model.resources[0].resourceSettings.dataSource = newResList; 

        schObj.refresh(); 

    } 

</script> 

In the above sample we have used check box template to allow multiselection on dropdownlist values and on closing the popup we have changed the schedule resource data. If you want to select either only one data or all data, please refer the below JSplayground working sample link. 

http://jsplayground.syncfusion.com/5qpxxuba 

 

Regards, 

Nevitha.