1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Bug with Dialog Template not being fully removed causing inability to edit a card multiple times

Bug with Dialog Template not being fully removed causing inability to edit a card multiple times

We have a plain Kanban as shown below.  Using a dialog template we discovered that when you open and cancel the dialog, the container was being left behind and on subsequent opening, the edited card contents were not being populated.  This was solved by using onDialogClose and removing the items as shown below.  Just posting this for resolution and awareness OR advising how we are doing it wrong, lol:

var kanban = new ej.kanban.Kanban({
           dataSource: dataManager,
           query: new ej.data.Query().addParams('filter', true),
           keyField: 'status',
           columns: [
               { headerText: 'Open', keyField: 'Open' },
               { headerText: 'In Progress', keyField: 'InProgress' },
               { headerText: 'On Going', keyField: 'OnGoing' },
               { headerText: 'Completed', keyField: 'Completed' }
           ],
           cardSettings: {
               contentField: 'details',
               headerField: 'summary'
           },
           dataBound: dataBound,
           enableTooltip: true,
           tooltipTemplate: '#tooltipTemplate',
           dialogSettings: {
               template: '#dialogTemplate',
               model: {
                   height: 800,
                   width: 1000,
                   isModal: true,
                   allowDragging: true,
                   closeOnEscape: true,
                   enableResize: true
               },
               fields: [
                   {key: 'category', validationRules: {required: true}},
                   {key: 'strategic_goal', validationRules: {required: true}},
                   {key: 'summary', validationRules: {required: true}},
                   {key: 'status', validationRules: {required: true}},
                   {key: 'user', validationRules: {required: true}},
               ]
           },
           dialogOpen: onDialogOpen,
           dialogClose: onDialogClose,
           actionFailure: actionFailure
       });
       kanban.appendTo('#Kanban');

/***** FUNCTIONS *****/
       function dataBound(args){
           kanban.hideSpinner();
       }

       function onDialogClose(args){
           $('.e-popup-content.e-dropdown').remove();
           $('#category_popup').remove();
       }

3 Replies
BS Balasubramanian Sattanathan Syncfusion Team October 2, 2020 01:05 PM UTC

Hi Mark, 

Greetings from Syncfusion Support. 

We have validated your reported scenario “Bug with Dialog Template not being fully removed causing inability to edit a card multiple times” and tried to replicate your problem at our side by preparing the below sample. But unfortunately, we are unable to reproduce it. And we have prepared a sample based on your requirement by using the dialogOpen event like the below code snippet. So we would suggest you to refer the below sample and UG for more details. 

Code snippet: 
function onDialogOpen(args) { 
  if (args.requestType !== 'Delete') { 
    var curData = args.data; 
    var filledTextBox = new ej.inputs.TextBox({}); 
    filledTextBox.appendTo(args.element.querySelector('#Id')); 
    var numericObj = new ej.inputs.NumericTextBox({ 
      value: curData.Estimate, placeholder: 'Estimate', 
    }); 
    numericObj.appendTo(args.element.querySelector('#Estimate')); 
    var statusDropObj = new ej.dropdowns.DropDownList({ 
      value: curData.Status, popupHeight: '300px', 
      dataSource: statusData, fields: { text: 'Status', value: 'Status' }, placeholder: 'Status' 
    }); 
    statusDropObj.appendTo(args.element.querySelector('#Status')); 
    var assigneeDropObj = new ej.dropdowns.DropDownList({ 
      value: curData.Assignee, popupHeight: '300px', 
      dataSource: assigneeData, fields: { text: 'Assignee', value: 'Assignee' }, placeholder: 'Assignee' 
    }); 
    assigneeDropObj.appendTo(args.element.querySelector('#Assignee')); 
    var priorityObj = new ej.dropdowns.DropDownList({ 
      value: curData.Priority, popupHeight: '300px', 
      dataSource: priorityData, fields: { text: 'Priority', value: 'Priority' }, placeholder: 'Priority' 
    }); 
    priorityObj.appendTo(args.element.querySelector('#Priority')); 
    var textareaObj = new ej.inputs.TextBox({ 
      placeholder: 'Summary', 
      multiline: true 
    }); 
    textareaObj.appendTo(args.element.querySelector('#Summary')); 
  } 
} 
 

Kindly try the above sample and let us know the below details if the problem is not resolved. 
  • Share the Kanban related code snippet with issue replication step
  • Share a video demo illustrating the problem or replicate your problem in the above sample which would help us to provide the solution at earliest.

Regards, 
Balasubramanian S 


MA Mark October 12, 2020 06:18 PM UTC

I have verified your code works.  It is the same as we have and I think the issue comes down to the chaining.  We have the kanban which uses the dialogTemplate that loads the tab component that then loads the grid component that we are then using a dialogTemplate  for add / edit that is then loading an autocomplete component that then has a custom dialog popped for verifying adding a new item.  

It has to do with this whole chain that leaves the artifact which may very well be a one off for us that we have solved.  Thank you and please disregard.

BS Balasubramanian Sattanathan Syncfusion Team October 13, 2020 02:05 PM UTC

Hi Mark, 

Thanks for the update. 

We have validated your reported scenario “I think the issue comes down to the chaining” at our side and we suspect that you could face the problem due to the components not destroyed properly. So we would suggest you to destroy the components properly at your side. Kindly let us know the below details to proceed further. 
  • Replicate your problem in the above shared sample or
  • Share the video demo illustrating the problem
  • Share a sample(if possible) with replication steps illustrating the problem which would help us to provide the solution at the earliest

Regards, 
Balasubramanian S 


Loader.
Up arrow icon