Filtering ressources

Question

Hello,Our team is currently working on a scheduler with the ressources on the left like you can see in this examplehttps://stackblitz.com/edit/angular-rxd66j?file=main.ts1st Question:How can I add on the top of the ressources an excel filter like it is done with the columns of the component  ejs-grid. The goal is to filter / sort the list of ressources.2nd Question:We want to use the scheduler with a grid at the bottom to drag an appointment from it and add it to the scheduler. With the allowRowDragAndDrop option, we can perform the action. But if we add a splitter  (ejs-splitter) to cut the page into 2 with differents proportions of the grid or the scheduler dépending on the user's screen size, the row which is being dragged become insivible as soon as we move through the splitter.How can we make it work so that the 3 components ejs-scheduler, ejs-grid, ejs-splitter can work together?Thank you,Thomas

Ravikumar Venkatesan · Accepted Answer

Hi Thomas,Thanks for the update.Sample: https://stackblitz.com/edit/ej2-angular-schedule-external-grid-drag-and-drop?file=app.component.htmlQ1. First, is it possible to implement the resource
filtering like it is done inside ej-grid (excel filter) And we want to use the
filter inside the white space (pointed by the black arrow)We regret to let you know that currently, we didn’t have support
for resource filtering like ej-grid(excel filter). So, you can render the
filter template as mentioned in your snip with help of the headerIndentTemplate
of the Schedule, and there and you can implement the custom logic for resource
filtering based on the requirement.API: https://ej2.syncfusion.com/angular/documentation/api/schedule/#headerindenttemplateQ2: And for the 2nd part, with the given css we can now
see the element dropping from the scheduler to the grid. But we cannot resize
the splitter to the top (over the scheduler)We have resolved your reported problem by adding a custom
CSS class to the splitter pane while drag start and removing the custom CSS
class once the drag is finished as shown in the below code snippet.[app.component.ts]

public onRowDragStart(event: RowDragEventArgs) {
      let splitterPanes: HTMLElement[] = [].slice.call(document.querySelectorAll('.e-splitter.e-splitter-vertical .e-pane.e-scrollable'));
      if (splitterPanes.length > 0) {
        splitterPanes[splitterPanes.length - 1].classList.add('e-custom-row-drag');
      }
    }
   
    public onRowDrop(event: RowDragEventArgs) {
      let splitterPanes: HTMLElement[] = [].slice.call(document.querySelectorAll('.e-custom-row-drag'));
      if (splitterPanes.length > 0) {
        splitterPanes[splitterPanes.length - 1].classList.remove('e-custom-row-drag');
      }
    }

[app.component.css]

.e-splitter.e-splitter-vertical .e-pane.e-scrollable.e-custom-row-drag { 
    overflow: unset !important; 
  }

Regards,Ravikumar Venkatesan

Ravikumar Venkatesan · Answer

Hi Thomas,Greetings from Syncfusion support.Q1: The goal is to filter / sort the list of ressourcesQ2: We want to use the scheduler with a grid at the
bottom to drag an appointment from itWe have validated your queries at our end and we have
prepared a sample based on your requirements you can find the sample from the
below link.Sample: https://stackblitz.com/edit/ej2-angular-schedule-external-drag-from-grid-sample?file=app.component.htmlNote: You can resolve the Grid drag clone invisible
problem with help of the below CSS styles.[app.component.css]

.e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, 
  .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal,
  .e-splitter.e-splitter-horizontal .e-pane.e-scrollable,
  .e-splitter.e-splitter-vertical .e-pane.e-scrollable { 
    overflow: unset !important; 
  }
   
  .e-splitter .e-split-bar.e-split-bar-horizontal,
  .e-splitter .e-split-bar.e-split-bar-vertical { 
    z-index: unset !important; 
  }

Kindly try the shared sample and let us know if you need
any further assistance on this.Regards,Ravikumar VenkatesanIf this post is helpful, kindly consider accepting it as the
solution so that other members can locate it more quickly.

Thomas Monier · Answer

Hello,Thank you for your time and response,We implemented the provided example inside our solution but there are still some issues regarding the 2 questions.First, is it possible to implement the ressource filtering like it is done inside ej-grid (excel filter)And we want to use the filter inside the white space (pointed by the black arrow)ex:  With the dropdown and the same filter options.And for the 2nd part, with the given css we can now see the element dropping from the scheduler to the grid.but we cannot resize the splitter to the top (over the scheduler)ex: Is possible to do it?Thank you,Thomas