Kanban queries related to Data persistence, custom popup and Paging

[Nithin A R]

Hi,

I just started using syncfusion kanban one week back. We need to integrate this in our project. We are looking to buy the product but before that, we are trying to use kanban and see the functionalities. While doing this, we found few queries,

• I am using DataManager to get data from backend (UrlAdaptor) where I have set url for fetching all data and crudUrl for all CRUD operations. So my problem is whenever I drag/drop or update data from edit popup, I have to reload all the data again which does not makes sense. We may have to load 3000 to 5000's of data. I tried to use enablePersistence='true' but no luck with that. Can you tell us like how can we achieve this without having to get all data again after each drag/drop or update from modal popup. This is the biggest obstacle for us.
• When using custom popup, we have few fields which are dropdowns, img fields,etc and using some other tool to bind them. So when we click on save, it is not getting refreshed in kanban view. I understand that we need to bind exact property names as provided in kanban view but in case of dropdown where we usually store ID as [value] or for ex, say an image byte array, if we change the contact, then we need to refresh the image as well. In this case, I was not able to refresh only that particular card. Can you suggest how this can be achieved? PS: My custom popup is a different component which gets loaded as a child component. As a temporary fix, I have created my own save button and on click of that, I am binding all data which I have loaded in kanban view and then doing kanbanObj.UpdateCard(data). 
• Is there a way to paginate kanban board? As mentioned in my previous point, we have to load 3000 - 5000 records. 

[Indrajith Srinivasan]

Hi Nitin, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries, 

 

Query 1 : “I am using DataManager to get data from backend (UrlAdaptor) where I have set url for fetching all data and crudUrl for all CRUD operations. So my problem is whenever I drag/drop or update data from edit popup, I have to reload all the data again which does not makes sense. We may have to load 3000 to 5000's of data. I tried to use enablePersistence='true' but no luck with that. Can you tell us like how can we achieve this without having to get all data again after each drag/drop or update from modal popup. This is the biggest obstacle for us.” 

 

By default, the data fetched from remote data and bound to the Kanban component using url property of DataManager.  You can perform CRUD operation in Kanban can be mapped from the server-side controller actions using the properties insertUrl, updateUrl, removeUrl and crudUrl.  

  

InsertUrl – You can perform insertion operation on server-side.  

UpdateUrl – You can update the data on server-side.  

RemoveUrl – You can remove the data on server-side.  

CrudUrl – You can perform bulk data operation on server-side.   

 

Sample: https://stackblitz.com/edit/angular-q2q18j-jdnj4p?file=app.component.ts 

 

Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/KanbanCRUD1614723762-1881694881 

 

Note : First you need to run the service project. And then run the sample.   

  

Kindly try the above solution and get back to us if you need any further assistance.  

 

If you are still facing the reported issue, can you please share us the few more details regarding the reported query “I have to reload all the data again which does not makes sense.” ? 

• Can you please share us the video demo of the issue reproducing scenario ?
• Have you faced any time delay after the cards drag and drop action ?

The above details will be helpful for us to assist you better. 

 

Query 2: ”When using custom popup, we have few fields which are dropdowns, img fields,etc and using some other tool to bind them. So when we click on save, it is not getting refreshed in kanban view. I understand that we need to bind exact property names as provided in kanban view but in case of dropdown where we usually store ID as [value] or for ex, say an image byte array, if we change the contact, then we need to refresh the image as well. In this case, I was not able to refresh only that particular card. Can you suggest how this can be achieved? PS: My custom popup is a different component which gets loaded as a child component. As a temporary fix, I have created my own save button and on click of that, I am binding all data which I have loaded in kanban view and then doing kanbanObj.UpdateCard(data). ”  

 

Can you please share us few more details regarding the reported query “we usually store ID as [value] or for ex, say an image byte array, if we change the contact, then we need to refresh the image as well”. We have also provided template support for the Kanban dialogs. Have you faced any issue while using the below Kanban templates ? .Check the below documentation for reference. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/dialog/#dialog-template 

 

Query 3: ” Is there a way to paginate kanban board? As mentioned in my previous point, we have to load 3000 - 5000 records.” 

 

 

Currently, pagination is not supported in the Kanban component. You can enable the scrollbars, when loading the large data. We have considered “Pagination support in the Kanban component” as a feature request from our end and logged the report for the same, and the feature will be included in any of the upcoming releases.    

   

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/25188/ 

 

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith 

[Nithin A R]

Hi Indrajith,

Query 1: If you look in the backend code provided by you, In HomeController -> UpdateData() -> Line no. 81 ->   var data = db.ScheduleEventDatas.ToList();return Json(data, JsonRequestBehavior.AllowGet);

I am talking about this line. I don't want to return entire data again for drag&drop/updating just one card. Is there any way to achieve this without sending all data again from backend when Updating?

"Have you faced any time delay after the cards drag and drop action" -> There is a delay when dragging and dropping. It will go back to original position after drop and then goes to new position once Update() method is completed.

Query 2: Kindly have a look at the below URL,

Sample Link where I have modified the code provided by you. I have added my query in app->custom-dialog.component.html page. Let me know if you need more details.

Query 3: Thank you for considering the request. It would also be helpful if we can achieve this via virtual scrolling. i.e,: On scroll, get data from backend (ex: get 10 records for every scroll fixed size)

Query 4 - (New query) : We have custom filters which we need to apply on Kanban. Filters object must be sent to backend in order to fetch the filtered data. And as I have mentioned in my original query, we are using DataManager with UrlAdaptor. Our requirement is like, on click of Apply Filter button, we need to call DataManager along with filterData object so that Kanban gets refreshed with filtered data from backend. Can you suggest the possible ways to achieve this?

[Indrajith Srinivasan]

Hi Nithin, 

 

Good day to you, 

 

We have validated your reported queries. 

 

Query 1 & Query 4: “"Have you faced any time delay after the cards drag and drop action" -> There is a delay when dragging and dropping. It will go back to original position after drop and then goes to new position once Update() method is completed.” &  “We have custom filters which we need to apply on Kanban. Filters object must be sent to backend in order to fetch the filtered data. And as I have mentioned in my original query, we are using DataManager with UrlAdaptor. Our requirement is like, on click of Apply Filter button, we need to call DataManager along with filterData object so that Kanban gets refreshed with filtered data from backend. Can you suggest the possible ways to achieve this?” 

 

We are currently validating the above reported queries, and will update you with further details by 18^th May. 

 

Query 2: “Kindly have a look at the below URL, Sample Link where I have modified the code provided by you. I have added my query in app->custom-dialog.component.html page. Let me know if you need more details.” 

 

We have achieved your requirement, of updating the card data using an external dropdown. In the below shared sample, we have used the syncfusion dropdown component and with the corresponding dropdown text selected the cards dropdown value is returned. And updated the cards description based on the returned value. Check the below shared sample for reference. 

 

Sample: https://stackblitz.com/edit/angular-q2q18j-d5dicu?file=app.component.ts 

 

Can you please check the above sample and let us know if it meets your requirements ? 

 

Query 3: 

 

Thanks for your suggestion, based on the feasibility of the kanban we will consider the “virtual scrolling behavior” or “Pagination support” with the feature implementation. 

 

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Nithin, 

 

Sorru for the delay in geeting back to you, 

 

We have further validated on the reported queries, 

 

Query 1: “Line no. 81 ->   var data = db.ScheduleEventDatas.ToList();return Json(data, JsonRequestBehavior.AllowGet);I am talking about this line. I don't want to return entire data again for drag&drop/updating just one card. Is there any way to achieve this without sending all data again from backend when Updating?” 

 

We have made few improvements with the Kanban drag and drop actions, with our Volume 1 Sp1 release version 19.1.63. In which, there is no need to return the entire data, after the drag and drop action. 

 

 

//Below lines not needed 

var data = db.ScheduleEventDatas.ToList(); 

return Json(data, JsonRequestBehavior.AllowGet); 

 

 

Query 2: "Have you faced any time delay after the cards drag and drop action" -> There is a delay when dragging and dropping. It will go back to original position after drop and then goes to new position once Update() method is completed.” 

 

As suggested in the Query 1, can you please upgrade your package to the latest version (19.1.63) and check the reported issue from your end ? 

 

If you are still facing any issues,  can you please share us a video demo of the issue reproducing scenario ? 

 

Query 4: “We have custom filters which we need to apply on Kanban. Filters object must be sent to backend in order to fetch the filtered data. And as I have mentioned in my original query, we are using DataManager with UrlAdaptor. Our requirement is like, on click of Apply Filter button, we need to call DataManager along with filterData object so that Kanban gets refreshed with filtered data from backend. Can you suggest the possible ways to achieve this?” 

 

You can filter the data using the Query in DataManager with the button click action. Check the below code blocks and sample for reference. 

 

 

var dManager = new DataManager({ url: dataManager1 }) 

      .executeQuery(new Query()) 

      .then(e => { 

        var data = (e as any).result; 

        let result: Object[] = new DataManager(data).executeLocal( 

          new Query().where('Subject', 'equal', 'Open') 

        ); 

        this.kanbanObj.dataSource = result; 

}); 

 

Sample: https://stackblitz.com/edit/angular-q2q18j-8bqagt?file=app.component.ts 

 

You can also send the additional parameter to the server using the Query. Check the below documentation for reference. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/data-binding/#sending-additional-parameters-to-the-server 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith