Updates on custom dialog

Question

hello,I am trying to update to remote data using a custom dialog. To render the data in the demos a : "this.state = extend({}, {}, props, true);"was used. Is it possible to change it to : " this.state = extend({}, {DataManager}, props, true);" to submit the data to the updateUrl?

Gunasekar Kuppusamy · Answer

Hi N, 

Greetings from Syncfusion support.

We have validated you query "Is it possible to change it to : " this.state = extend({}, {DataManager}, props, true);" to submit the data to the updateUrl?" 

We can't make the mentioned changes. We suggest you use the below code




this.state = extend({}, {}, props, true);If you expecting to send additional parameters to the server, please refer the below documentation

Documentation: https://ej2.syncfusion.com/react/documentation/data/how-to/#sending-additional-parameters-to-server

Otherwise please share the following details, 



Share the reason for modifying the above extend method code.
If possible, provide a sample or code snippets
The package version that you are using.
Please share the exact details that you require.The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

Regards,
Gunasekar

N · Answer

Hi,

How would you refresh the page after adding a new card?

Im using an Adaptor to complete all crud applications but after we add the card we need to refresh the page in order to click on the card to edit.

thank you.

Gunasekar Kuppusamy · Answer

Hi N,

Good day to you.

We have validated your reported query "How would you refresh the page after adding a new card?"

By default, the newly added cards are shown in the DOM without any further delay.

but you can manually refresh the kanban component after inserted the new card by using the refresh public method in the actionComplete event.

We have created a sample for your reference.

Code snippets:

OnActionComplete(args) {    if (args.requestType === 'cardCreated') {
        var kanbanInstance = this.kanbanObj;
      setTimeout(function() {
          debugger
        kanbanInstance.refresh();
      }, 300);
    }
  }

<KanbanComponent id="kanban" keyField="Status" dataSource={this.data}actionComplete={this.OnActionComplete.bind(this)}>
. . .
</KanbanComponent>

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

Please check the solution and let us know if the sample meets your requirement.

Regards,

Gunasekar

N · Answer

Hi. When i refresh it, the page reloads and the toggles i collapsed reopens. Is there a way around this?

Gunasekar Kuppusamy · Answer

Hi N,

Yes, you can achieve this requirement. By using the enablePersistence property, you can maintain the columns collapsed state when the page is refreshed.

We have prepared a sample for your reference

Code snippets:

<KanbanComponent id="kanban" keyField="Status" enablePersistence="true">. . .
</KanbanComponent>

Sample: https://stackblitz.com/edit/react-mqprcc-lf98bc?file=index.js

Please check the solution and let us know if the sample meet your requirement.

Regards,

Gunasekar

N · Answer

Hi, Do you know how to make the header of the Kanban fixed on that position on scroll?Thank you

Gunasekar Kuppusamy · Answer

Hi Tony,  

Greetings from Syncfusion support.

We have validated your query “Do you know how to make the header of the Kanban fixed on that position on scroll?”  
 Solution 1:
This can be achieved by adding the CSS style properties like position, top, z-index to the class “e-kanban-header”. We have prepared a sample for your reference,

Code Snippet:

Index.css 




.e-kanban-header { 
  position: sticky; 
  top: 0; 
  z-index: 1; 
} 
 
Sample: https://stackblitz.com/edit/react-wm56bm-jwtzsf?file=index.css 
 
Solution 2:By setting a fixed height to the Kanban content, you can get the fixed header while scrolling into the Kanban rows. Please check the below code,  
 
Code snippet: 




.e-kanban .e-kanban-content { 
        height: 500px; 
    } 
 
Sample: https://stackblitz.com/edit/react-6ibj1w?file=index.css 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, Gunasekar