Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8652355

Browse files
Merge branch 'JS-58484-kan' into 'hotfix/hotfix-v16.3.0.21'
JS-58484 - Swimlane key value pair and empty swimlane feature ug document added for MVC platform. See merge request content/asp.netmvc-docs!1206
2 parents 50be2e0 + 23bd6c5 commit 8652355

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed
32.2 KB
Loading[フレーム]
27.5 KB
Loading[フレーム]

‎aspnetmvc/Kanban/Swimlanes.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,191 @@ The following output is displayed as a result of the above code example.
6464

6565
![](Swimlane_images/swimlane_img1.png)
6666

67+
## Customized swimlane header text
68+
69+
You can change the swimlane row header text using the swimlane `Headers` property. In this property, the text is changed using the `Text` property and the corresponding value is mapped into the `Key` property based on `SwimlaneKey` datasource mapping.
70+
71+
Refer to the following code example.
72+
73+
{% tabs %}
74+
75+
{% highlight razor %}
76+
77+
@(Html.EJ().Kanban("Kanban")
78+
.DataSource((IEnumerable<object>)ViewBag.datasource)
79+
.Columns(col =>
80+
{
81+
col.HeaderText("Backlog").Key("Open").Add();
82+
col.HeaderText("In Progress").Key("InProgress").Add();
83+
col.HeaderText("Done").Key("Close").Add();
84+
})
85+
.AllowTitle(true)
86+
.KeyField("Status")
87+
.Fields(field =>
88+
{
89+
field.Content("Summary")
90+
.SwimlaneKey("Assignee")
91+
.PrimaryKey("Id");
92+
})
93+
.SwimlaneSettings(swim =>
94+
{
95+
swim.Headers(header => {
96+
header.Text("Andrew").Key("Andrew Fuller").Add();
97+
header.Text("Janet").Key("Janet").Add();
98+
});
99+
})
100+
)
101+
102+
{% endhighlight %}
103+
104+
{% highlight c# %}
105+
106+
public partial class KanbanController : Controller
107+
{
108+
List<Tasks> Task = new List<Tasks>();
109+
110+
// GET: /Kanban/
111+
public ActionResult KanbanFeatures()
112+
{
113+
Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Janet", "../content/images/kanban/3.png", 1));
114+
Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Janet", "../content/images/kanban/3.png", 4));
115+
Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Andrew Fuller", "../content/images/kanban/1.png", 2));
116+
Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Janet", "../content/images/kanban/3.png", 2));
117+
Task.Add(new Tasks(10, "InProgress", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Andrew Fuller", "../content/images/kanban/1.png", 3));
118+
ViewBag.datasource = Task;
119+
return View();
120+
}
121+
}
122+
public class Tasks
123+
{
124+
public Tasks()
125+
{
126+
}
127+
public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string Image, int RankId)
128+
{
129+
this.Id = Id;
130+
this.Status = Status;
131+
this.Summary = Summary;
132+
this.Type = Type;
133+
this.Priority = Priority;
134+
this.Tags = Tags;
135+
this.Estimate = Estimate;
136+
this.Assignee = Assignee;
137+
this.Image = Image;
138+
this.RankId = RankId;
139+
}
140+
public int Id { get; set; }
141+
public string Status { get; set; }
142+
public string Summary { get; set; }
143+
public string Type { get; set; }
144+
public string Priority { get; set; }
145+
public string Tags { get; set; }
146+
public double Estimate { get; set; }
147+
public string Assignee { get; set; }
148+
public string Image { get; set; }
149+
public int RankId { get; set; }
150+
}
151+
152+
{% endhighlight %}
153+
154+
{% endtabs %}
155+
156+
The following output is displayed as a result of the above code example.
157+
158+
![](Swimlane_images/swimlane_img6.png)
159+
160+
## Empty swimlane row on Kanban board
161+
162+
You can create an empty swimlane row by enabling the `ShowEmptySwimlane` property based on swimlane headers `Key` value mapping. If no data is present, then the empty swimlane row is rendered on the Kanban board based on the specified swimlane headers `Key`.
163+
164+
Refer to the following code.
165+
166+
{% tabs %}
167+
168+
{% highlight razor %}
169+
170+
@(Html.EJ().Kanban("Kanban")
171+
.DataSource((IEnumerable<object>)ViewBag.datasource)
172+
.Columns(col =>
173+
{
174+
col.HeaderText("Backlog").Key("Open").Add();
175+
col.HeaderText("In Progress").Key("InProgress").Add();
176+
col.HeaderText("Done").Key("Close").Add();
177+
})
178+
.AllowTitle(true)
179+
.KeyField("Status")
180+
.Fields(field =>
181+
{
182+
field.Content("Summary")
183+
.SwimlaneKey("Assignee")
184+
.PrimaryKey("Id");
185+
})
186+
.SwimlaneSettings(swim =>
187+
{
188+
swim.ShowEmptySwimlane(true)
189+
.Headers(header => {
190+
header.Text("Andrew").Key("Andrew Fuller").Add();
191+
header.Text("Janet").Key("Janet Leverling").Add();
192+
});
193+
})
194+
)
195+
196+
{% endhighlight %}
197+
198+
{% highlight c# %}
199+
200+
public partial class KanbanController : Controller
201+
{
202+
List<Tasks> Task = new List<Tasks>();
203+
204+
// GET: /Kanban/
205+
public ActionResult KanbanFeatures()
206+
{
207+
Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Andrew Fuller", "../content/images/kanban/1.png", 2));
208+
Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Janet", "../content/images/kanban/3.png", 2));
209+
Task.Add(new Tasks(10, "InProgress", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Andrew Fuller", "../content/images/kanban/1.png", 3));
210+
ViewBag.datasource = Task;
211+
return View();
212+
}
213+
}
214+
public class Tasks
215+
{
216+
public Tasks()
217+
{
218+
}
219+
public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string Image, int RankId)
220+
{
221+
this.Id = Id;
222+
this.Status = Status;
223+
this.Summary = Summary;
224+
this.Type = Type;
225+
this.Priority = Priority;
226+
this.Tags = Tags;
227+
this.Estimate = Estimate;
228+
this.Assignee = Assignee;
229+
this.Image = Image;
230+
this.RankId = RankId;
231+
}
232+
public int Id { get; set; }
233+
public string Status { get; set; }
234+
public string Summary { get; set; }
235+
public string Type { get; set; }
236+
public string Priority { get; set; }
237+
public string Tags { get; set; }
238+
public double Estimate { get; set; }
239+
public string Assignee { get; set; }
240+
public string Image { get; set; }
241+
public int RankId { get; set; }
242+
}
243+
244+
{% endhighlight %}
245+
246+
{% endtabs %}
247+
248+
The following output is displayed as a result of the above code example.
249+
250+
![](Swimlane_images/swimlane_img7.png)
251+
67252
## Drag And Drop between swim lanes
68253

69254
You can set 'AllowDragAndDrop' property of 'SwimlaneSettings' as true to enable Drag and Drop between the swim lanes.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /