Updates on custom dialog

[N]

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]

 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]

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]

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]

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

[Gunasekar Kuppusamy]

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]

Hi, 

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

Thank you

[Gunasekar Kuppusamy]

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