filtering

[N]

hello, 

how would you use remote data and filter through those cards using data Manager?

[Vinitha Jeyakumar]

Hi N, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your query “how would you use remote data and filter through those cards using data Manager?” 

 

You can filter the collection of cards from the remote data and display it on the Kanban board by using the query property. In the below sample, you can filter the cards based on the ‘where’ query and display the filtered data to the Kanban board. Please refer the below code snippet, 

 

Code snippet: 

export class RemoteData extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.dataManger = new DataManager({ 

      url: 'https://js.syncfusion.com/ejServices/wcf/Northwind.svc/Tasks', 

      crossDomain: true 

    }); 

    this.statusData = [ 

      { id: 'None', value: 'None' }, 

      { id: 'To Do', value: 'Open' }, 

      { id: 'In Progress', value: 'InProgress' }, 

      { id: 'Testing', value: 'Testing' }, 

      { id: 'Done', value: 'Close' } 

    ]; 

    this.value = 'None'; 

    this.fields = { text: 'id', value: 'value' }; 

  } 

  dialogOpen(args) { 

    args.cancel = false; 

  } 

  statusSelect(args) { 

    let filterQuery = new Query(); 

    if (args.itemData.value !== 'None') { 

      filterQuery = new Query().where('Status', 'equal', args.itemData.value); 

    } 

    this.kanbanObj.query = filterQuery; 

  } 

  render() { 

    return ( 

<div className="kanban-control-section"> 

    <div className="col-lg-12 control-section"> 

        <div className="control-wrapper"> 

            <KanbanComponent id="kanban" 

                             ref={kanban => 

                { 

                this.kanbanObj = kanban; 

                }} 

                keyField="Status" 

                dataSource={this.dataManger} 

                cardSettings={{ contentField: 'Summary', headerField: 'Id' }} 

                allowDragAndDrop={true} 

                dialogOpen={this.dialogOpen.bind(this)} 

                > 

                <ColumnsDirective> 

                    <ColumnDirective headerText="To Do" keyField="Open" /> 

                    <ColumnDirective headerText="In Progress" 

                                     keyField="InProgress" /> 

                    <ColumnDirective headerText="Testing" keyField="Testing" /> 

                    <ColumnDirective headerText="Done" keyField="Close" /> 

                </ColumnsDirective> 

            </KanbanComponent> 

        </div> 

    </div> 

 

    <div className="col-lg-3 property-section"> 

        <div className="property-panel-section"> 

            <p className="property-panel-header">Filtering</p> 

            <div className="property-panel-content"> 

                <table className="e-filter-table"> 

                    <tr> 

                        <td className="e-filter-label"> 

                            <div>Status</div> 

                        </td> 

                        <td> 

                            <div> 

                                <DropDownListComponent id="status_filter" 

                                                       ref={kanban => 

                                    { 

                                    this.statusObj = kanban; 

                                    }} 

                                    dataSource={this.statusData} 

                                    select={this.statusSelect.bind(this)} 

                                    value={this.value} 

                                    fields={this.fields} 

                                    placeholder="Select a status" 

                                    /> 

                            </div> 

                        </td> 

                    </tr> 

                </table> 

            </div> 

        </div> 

    </div> 

</div> 

    ); 

  } 

} 

 

render( 

<RemoteData />, document.getElementById('sample')); 

 

 

Sample: https://stackblitz.com/edit/react-5mwywp 

 

Documentation: https://ej2.syncfusion.com/react/documentation/kanban/how-to/filter-cards/ 

 

Demos: https://ej2.syncfusion.com/react/demos/#/material/kanban/remote-data 

 

Please check the above sample, code snippet, documentation, demos and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha. 

 

[N]

hi 

Thank you for getting back to me.

I'm using a SQL  and pulling the data through a localhost server server. The code above works perfectly  when using your URL but when I enter mine it doesn't. Any idea why? Could it be my SQL query?

[Vinitha Jeyakumar]

Hi N, 

 

 

Good day to you, 

 

 

We have further validated your query “I'm using a SQL  and pulling the data through a localhost server” 

 

Your requirement to filter the cards which are loaded from the remote data using SQL database can be done by using the Query string. We have also prepared a sample for your reference, 

 

Code snippet: 

Server side(HomeController.cs) 

public JsonResult LoadData(Params param)  // Here we can filter the cards using where query. 

        { 

            var data = db.ScheduleEventDatas.ToList();   

            var model = from r in db.ScheduleEventDatas orderby r.Subject where r.Subject == "Inprogress" select r; 

            return Json(model); 

            //return Json(data, JsonRequestBehavior.AllowGet); 

             

 

        } 

 

Sample: https://stackblitz.com/edit/react-eoy9ny-wwzs3e?file=index.js 

 

Service: https://www.syncfusion.com/downloads/support/forum/168417/ze/Kanban_filter-1682379404 

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha.