Data select by date, show all data.

[kotfare]

Data select by date (from Rest Api/ Url), display all. After all this data need to be able to drag and drop on the calendar. Can you share some information about it?  I have tried to explain in the photo attached.

[Ravikumar Venkatesan]

Hi kotfare,

Greetings from Syncfusion support.

We have validated your query “Data select by date, show all data” at our end. We have prepared a sample based on your requirement. In the initial load, we have loaded the TreeView data using Ajax post by passing a today date to the server and filtering the TreeView data based on it. You can able to change the TreeView data by changing the date of the date picker on the change event of the date picker we have passed the selected date to the server end through Ajax post and the data is filtered at the server end and the result data assigned to the TreeView.

You can enable the TreeView drag and drop by setting up the treeview allowDragAndDrop to true and setting up the dragArea property. After that, you can drag the TreeView item and drop it into the Schedule content area. The nodeDragStop event of the Treeview is triggered once the Treeview item is dropped to the Schedule content area. You can get the dropped Schedule cell details with help of the getCellDetails method and get the resource details using getResourcesByIndex methods of the Schedule. You can get the dragged TreeView item data by filtering the TreeView data source based on the dragged item id value. Based on these details you can form an appointment data and you can pass it to the openEditor method of the Schedule. From the editor window, you can add the appointment to the Schedule by pressing the Save button.

Sample: https://stackblitz.com/edit/ej2-ts-schedule-external-drag-and-drop-with-remote-data?file=index.ts

[index.ts]

let taskData: Record<string, any>[] = [];

let paramData: Record<string, any> = { 'TaskDate': resetTime(new Date()) };

// Loading treeview data on initial load based on today date

const ajax = new Ajax({ type: 'POST', url: 'http://localhost:54738/Home/LoadTasks', mode: false });

ajax.onSuccess = (data) => { taskData = JSON.parse(data); };

ajax.send(JSON.stringify(paramData));

 

let scheduleObj: Schedule = new Schedule({

    width: '100%',

    height: '650px',

    currentView: 'Day',

    cssClass: 'schedule-drag-drop',

    views: [

        { option: 'Day' }

    ],

    group: {

        enableCompactView: false,

        resources: ['Truks']

    },

    resources: [

        {

            field: 'TrukID', title: 'Truk',

            name: 'Truks', allowMultiple: false,

            dataSource: [

                { Text: 'Truk 1', Id: 1, Color: '#9674fa' },

                { Text: 'Truk 2', Id: 2, Color: '#7faa01' },

                { Text: 'Truk 3', Id: 3, Color: '#ffc302' },

                { Text: 'Truk 4', Id: 4, Color: '#f8393a' }

            ],

            textField: 'Text', idField: 'Id', colorField: 'Color'

        }

    ],

    eventSettings: {

        dataSource: []

    },

    actionBegin: onActionBegin

});

scheduleObj.appendTo('#Schedule');

 

let datepicker: DatePicker = new DatePicker({

    placeholder: "Choose a date",

    value: new Date(),

    change: (args: ChangedEventArgs) => {

        if (args.value) {

            // Loading treeview data on date change based on selected date

            paramData = { TaskDate: resetTime(args.value) };

            ajax.send(JSON.stringify(paramData));

            treeObj.fields.dataSource = taskData;

        }

    }

});

datepicker.appendTo('#TaskDatepicker');

 

let treeObj: TreeView = new TreeView({

    fields: { dataSource: taskData, id: 'Id' },

    allowDragAndDrop: true,

    nodeDragStop: onTreeDragStop,

    nodeDragStart: () => {

        document.body.classList.add('e-disble-not-allowed');

    },

    nodeTemplate: '#treeTemplate',

    cssClass: 'treeview-external-drag',

    dragArea: '.drag-sample-wrapper'

});

treeObj.appendTo('#Tree');

 

let isTreeItemDropped: boolean = false;

let draggedItemId: string = '';

 

function onActionBegin(event: ActionEventArgs): void {

    if (event.requestType === 'eventCreate' && isTreeItemDropped) {

        // Removing the dropped treeview item from treeview datasource

        let treeViewData: Record<string, any>[] = treeObj.fields.dataSource as Record<string, any>[];

        const filteredPeople: Record<string, any>[] = treeViewData.filter((item: any) => item.Id !== parseInt(draggedItemId, 10));

        treeObj.fields.dataSource = filteredPeople;

        let elements: NodeListOf<HTMLElement> = document.querySelectorAll('.e-drag-item.treeview-external-drag');

        for (let element of [].slice.call(elements)) {

            remove(element);

        }

    }

}

 

// Triggered after the dragged treeview item dropped

function onTreeDragStop(event: DragAndDropEventArgs): void {

    document.body.classList.remove('e-disble-not-allowed');

    let treeElement: Element = <Element>closest(event.target, '.e-treeview');

    let classElement: HTMLElement = scheduleObj.element.querySelector('.e-device-hover');

    if (classElement) {

        classElement.classList.remove('e-device-hover');

    }

    if (!treeElement) {

        event.cancel = true;

        let scheduleElement: Element = <Element>closest(event.target, '.e-content-wrap') || <Element>closest(event.target, '.e-all-day-row');

        if (scheduleElement) {

            let treeviewData: Record<string, any>[] = treeObj.fields.dataSource as Record<string, any>[];

            if (event.target.classList.contains('e-work-cells')) {

                // Filtering the dragged item data from treeview datasource.

                const filteredData: Record<string, any>[] = treeviewData.filter((item: any) => item.Id === parseInt(event.draggedNodeData.id as string, 10));

                // Getting the dropped cell details

                let cellData: CellClickEventArgs = scheduleObj.getCellDetails(event.target);

                // Getting the resource details from the dropped cell details

                let resourceDetails: ResourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex);

                // Forming a appointment data

                let eventData: Record<string, any> = {

                    Subject: filteredData[0].Subject,

                    StartTime: cellData.startTime,

                    EndTime: cellData.endTime,

                    IsAllDay: cellData.isAllDay,

                    Description: filteredData[0].Description,

                    TrukID: resourceDetails.resourceData.Id

                };

                // Opening a editor window to add a appointment to the Schedule based on the dropped treeview item data.

                scheduleObj.openEditor(eventData, 'Add', true);

                isTreeItemDropped = true;

                draggedItemId = event.draggedNodeData.id as string;

            }

        }

    }

}

[HomeController.cs]

        public JsonResult LoadTasks(TaskParams TaskParam)

        {

            // Filtering tree view data based on the selected date value

            var data = db.TaskListDatas.Where(Task => DateTime.Equals(Task.TaskDate, TaskParam.TaskDate)).ToList();

            return Json(data, JsonRequestBehavior.AllowGet);

        }

        public class TaskParams

        {

            public DateTime TaskDate { get; set; }

        }

Kindly try the shared sample and let us know if you need any further assistance.

API:

Schedule: https://ej2.syncfusion.com/documentation/api/schedule/#schedule

TreeView: https://ej2.syncfusion.com/documentation/api/treeview

Demo: https://ej2.syncfusion.com/demos/#/material/schedule/external-drag-drop.html

UG: https://ej2.syncfusion.com/documentation/schedule/appointments/#drag-and-drop-items-from-external-source

Note: Before running the stackblitz sample run the shared service sample.

Regards,

Ravikumar Venkatesan

Attachment: ej2treeviewdataservice_e0f1e7ab.zip