Skip to content

Commit 8652355

Browse files
rajendranr-5483rajendranr-5483
committed
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

‎aspnetmvc/Kanban/Swimlane_images/swimlane_img6.PNG‎

32.2 KB
Loading

‎aspnetmvc/Kanban/Swimlane_images/swimlane_img7.PNG‎

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)