How can I dynamically create Syncfusion Ui's KanbanComponent and set Kanban Component header in ReactJS using TypeScript?

huangapple
go评论118阅读模式
英文:

How can I dynamically create Syncfusion Ui's KanbanComponent and set Kanban Component header in ReactJS using TypeScript?

问题

以下是您要翻译的内容：

如何在React js中动态创建syncfusion Ui的KanbanComponent，并动态设置Kanban组件的标题？

  1. <ColumnsDirective>
  2.     <ColumnDirective headerText="Active" keyField="Active" allowToggle={true} template={this.columnTemplate} />
  3.     <ColumnDirective headerText="Work In Progress" keyField="workInProgress" allowToggle={true} template={this.columnTemplate} />
  4.     <ColumnDirective headerText="Approved" keyField="Approved" allowToggle={true} template={this.columnTemplate} />
  5.     <ColumnDirective headerText="Closed" keyField="Closed" allowToggle={true} template={this.columnTemplate} />
  6.     <ColumnDirective headerText="Archive" keyField="Archive" allowToggle={true} template={this.columnTemplate} />
  7. </ColumnsDirective>
  1. <KanbanComponent
  2.     dialogOpen={this.dialogOpen.bind(this)}
  3.     id="kanban"
  4.     cssClass="kanban-overview"
  5.     keyField="T_Status"
  6.     dataSource={this.getFilteredData()}
  7.     dragStop={(data: any) => {
  8.         this.props.onTasksStatusChanged(data);
  9.     }}
  10.     enableTooltip={true}
  11.     swimlaneSettings={{ keyField: "P_ProjectEngineer", allowDragAndDrop: true }}
  12.     cardSettings={{
  13.         headerField: "T_Title",
  14.         template: this.renderCardTemplate.bind(this),
  15.         selectionType: "Multiple"
  16.     }}
  17.     cardRendered={(props: any) => this.cardRenderer(props)}>
  18.     <ColumnsDirective>
  19.         {this.props.columnName.map((e: any) => {
  20.             return <ColumnDirective headerText={e} keyField={e} allowToggle={true} template={this.columnTemplate} />;
  21.         })}
  22.     </ColumnsDirective>
  23. </KanbanComponent>
英文:

How to create syncfution Ui's KanbanComponent Dynamically in React js and also how to set Kanban Component header Dynamically?

  1. &lt;ColumnsDirective&gt;
  2.                                         &lt;ColumnDirective headerText=&quot;Active&quot; keyField=&quot;Active&quot; allowToggle={true} template={this.columnTemplate} /&gt;
  3.                                         &lt;ColumnDirective headerText=&quot;Work In Progress&quot; keyField=&quot;workInProgress&quot; allowToggle={true} template={this.columnTemplate} /&gt;
  4.                                         &lt;ColumnDirective headerText=&quot;Approved&quot; keyField=&quot;Approved&quot; allowToggle={true} template={this.columnTemplate} /&gt;
  5.                                         &lt;ColumnDirective headerText=&quot;Closed&quot; keyField=&quot;Closed&quot; allowToggle={true} template={this.columnTemplate} /&gt;
  6.                                         &lt;ColumnDirective headerText=&quot;Archive&quot; keyField=&quot;Archive&quot; allowToggle={true} template={this.columnTemplate} /&gt;
  7.                                     &lt;/ColumnsDirective&gt;
  1.  &lt;KanbanComponent
  2.                    dialogOpen={this.dialogOpen.bind(this)}
  3.                                     id=&quot;kanban&quot;
  4.                                     cssClass=&quot;kanban-overview&quot;
  5.                                     keyField=&quot;T_Status&quot;
  6.                                     dataSource={this.getFilteredData()}
  7.                                     dragStop={(data: any) =&gt; {
  8.                                         this.props.onTasksStatusChanged(data);
  9.                                     }}
  10.                                     enableTooltip={true}
  11.                                     swimlaneSettings={{ keyField: &quot;P_ProjectEngineer&quot;, allowDragAndDrop: true }}
  12.                                     cardSettings={{
  13.                                         headerField: &quot;T_Title&quot;,
  14.                                         template: this.renderCardTemplate.bind(this),
  15.                                         selectionType: &quot;Multiple&quot;
  16.                                     }}
  17.                                     //dialogSettings={{ fields: fields as any }}
  18.                                     cardRendered={(props: any) =&gt; this.cardRenderer(props)}&gt;
  19.                                      &lt;ColumnsDirective&gt;
  20.                                         {this.props.columnName.map((e: any) =&gt; {
  21.                                             return &lt;ColumnDirective headerText={e} keyField={e} allowToggle={true} template={this.columnTemplate} /&gt;
  22.                                         })}
  23.                                     &lt;/ColumnsDirective&gt;
  24.                                 &lt;/KanbanComponent&gt;

答案1

得分: 0

以下是翻译好的部分：

如果您想动态设置看板组件的标题，您可以使用看板的"columns"属性。请查看以下代码和示例，

代码片段：

  1. <KanbanComponent
  2.     id="kanban"
  3.     cssClass="kanban-overview"
  4.     keyField="Status"
  5.     dataSource={data}
  6.     enableTooltip={true}
  7.     swimlaneSettings={{ keyField: 'Assignee' }}
  8.     cardSettings={{
  9.         headerField: 'Title',
  10.         template: cardTemplate.bind(this),
  11.         selectionType: 'Multiple',
  12.     }}
  13.     dialogSettings={{ fields: fields }}
  14.     cardRendered={cardRendered.bind(this)}
  15.     columns={columns}
  16. >
  17. </KanbanComponent>

列设置：

  1. let columns= [
  2. {
  3.   headerText: 'To Do',
  4.   keyField: 'Open',
  5.   allowToggle: true,
  6. },
  7. {
  8.   headerText: 'In Progress',
  9.   keyField: 'InProgress',
  10.   allowToggle: true,
  11. },
  12. {
  13.   headerText: 'In Review',
  14.   keyField: 'Review',
  15.   allowToggle: true,
  16. },
  17. {
  18.   headerText: 'Done',
  19.   keyField: 'Close',
  20.   allowToggle: true,
  21. },
  22. ],

示例: https://stackblitz.com/edit/react-pjv7rd?file=index.js

API 链接: https://helpej2.syncfusion.com/react/documentation/api/kanban#columns

谢谢，

Vinitha

英文:

If you want to set Kanban component header dynamically, you can use the columns property of the Kanban. Check the code and sample below,

Code snippet:

  1.  &lt;KanbanComponent
  2.         id=&quot;kanban&quot;
  3.         cssClass=&quot;kanban-overview&quot;
  4.         keyField=&quot;Status&quot;
  5.         dataSource={data}
  6.         enableTooltip={true}
  7.         swimlaneSettings={{ keyField: &#39;Assignee&#39; }}
  8.         cardSettings={{
  9.           headerField: &#39;Title&#39;,
  10.           template: cardTemplate.bind(this),
  11.           selectionType: &#39;Multiple&#39;,
  12.         }}
  13.         dialogSettings={{ fields: fields }}
  14.         cardRendered={cardRendered.bind(this)}
  15.         columns={columns}
  16.       &gt;         
  17.         
  18.       &lt;/KanbanComponent&gt;
  20. let columns= [
  21. {
  22.   headerText: &#39;To Do&#39;,
  23.   keyField: &#39;Open&#39;,
  24.   allowToggle: true,
  25. },
  26. {
  27.   headerText: &#39;In Progress&#39;,
  28.   keyField: &#39;InProgress&#39;,
  29.   allowToggle: true,
  30. },
  31. {
  32.   headerText: &#39;In Review&#39;,
  33.   keyField: &#39;Review&#39;,
  34.   allowToggle: true,
  35. },
  36. {
  37.   headerText: &#39;Done&#39;,
  38.   keyField: &#39;Close&#39;,
  39.   allowToggle: true,
  40. },

],

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

API Link: https://helpej2.syncfusion.com/react/documentation/api/kanban#columns

Regards,

Vinitha

huangapple
  • 本文由 发表于 2023年5月26日 14:40:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76338227.html
  • reactjs
  • syncfusion
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定