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 f65a847

Browse files
v19.2.0.55 released
1 parent 93b7e32 commit f65a847

File tree

8 files changed

+180
-0
lines changed

8 files changed

+180
-0
lines changed

‎Content/listbox/pic/angular.svg

Lines changed: 16 additions & 0 deletions
Loading[フレーム]

‎Content/listbox/pic/javascript.svg

Lines changed: 13 additions & 0 deletions
Loading[フレーム]

‎Content/listbox/pic/no-record.png

17.1 KB
Loading[フレーム]

‎Content/listbox/pic/react.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎Content/listbox/pic/typescript.svg

Lines changed: 13 additions & 0 deletions
Loading[フレーム]

‎Content/listbox/pic/vue.svg

Lines changed: 14 additions & 0 deletions
Loading[フレーム]
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
using System.Web.Mvc;
6+
7+
namespace EJ2MVCSampleBrowser.Controllers.ListBox
8+
{
9+
public partial class ListBoxController : Controller
10+
{
11+
public ActionResult Template()
12+
{
13+
List<object> data = new List<object>();
14+
data.Add(new { text= "JavaScript", pic = "javascript", description = "It is a lightweight interpreted or JIT-compiled programming language." });
15+
data.Add(new { text= "TypeScript", pic = "typescript", description = "It is a typed superset of JavaScript that compiles to plain JavaScript." });
16+
data.Add(new { text= "Angular", pic = "angular", description = "It is a TypeScript-based open-source web application framework." });
17+
data.Add(new { text= "React", pic = "react", description = "A JavaScript library for building user interfaces. It can also render on the server using Node." });
18+
data.Add(new { text= "Vue", pic = "vue", description = "A progressive framework for building user interfaces. it is incrementally adoptable." });
19+
ViewBag.data = data;
20+
return View();
21+
}
22+
}
23+
24+
}

‎Views/ListBox/Template.cshtml

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@using Syncfusion.EJ2
2+
@section ControlsSection{
3+
<div class="col-lg-12 control-section">
4+
<div id="listbox-control">
5+
@Html.EJS().ListBox("listbox").DataSource((IEnumerable<object>)ViewBag.data).ItemTemplate(
6+
"<div class=\"list-wrapper\"><span class=\"e-avatar e-avatar-xlarge e-avatar-circle\"><img src=\"../Content/listbox/pic/${pic}.svg\" alt=\"pic\"/></span><span class=\"text\"> ${text} </span><span class=\"description\"> ${description} </span></div>").Render()
7+
</div>
8+
</div>
9+
}
10+
11+
@section Meta{
12+
<meta name="description" content="This example demonstrates the Template in ASP.NET MVC List Box control. Explore here for more details."/>
13+
}
14+
@section ActionDescription{
15+
<div id="action-description">
16+
<p>This sample demonstrates the Template of a ListBox. Here, SVG icons were used for visual representation of every list items</p>
17+
</div>
18+
}
19+
@section Description{
20+
<div id="description">
21+
<p>
22+
The <code>ListBox</code>is a graphical user interface component used to display a list of items. This sample illustrates how to integrate the item template to customize the
23+
list item's content and this can be specified by using <b>ItemTemplate</b> property.</p>
24+
<p>
25+
In this sample, data is bound to the ListBox using the <a target="_blank" href="https://help.syncfusion.com/cr/cref_files/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.DropDowns.ListBox~DataSource.html">
26+
<code>
27+
DataSource.
28+
</code>
29+
</a> property.
30+
</p>
31+
<p>
32+
More information about the ListBox can be found in the
33+
<a href="https://ej2.syncfusion.com/aspnetmvc/documentation/list-box/getting-started" target="_blank"> documentation section</a>.
34+
</p>
35+
</div>
36+
}
37+
38+
@*custom code start*@
39+
40+
<style>
41+
#listbox-control {
42+
width: 350px;
43+
margin: auto;
44+
}
45+
46+
@@media screen and (max-width: 590px) {
47+
#listbox-control {
48+
width: 100%;
49+
}
50+
}
51+
52+
.list-wrapper {
53+
height: inherit;
54+
position: relative;
55+
padding: 14px 12px 14px 78px;
56+
}
57+
58+
.list-wrapper .text,
59+
.list-wrapper .description {
60+
display: block;
61+
margin: 0;
62+
padding-bottom: 3px;
63+
white-space: normal;
64+
}
65+
66+
.list-wrapper .description {
67+
font-size: 12px;
68+
font-weight: 500;
69+
}
70+
71+
#listbox-control .e-listbox-wrapper .list-wrapper .text {
72+
font-weight: bold;
73+
font-size: 13px;
74+
}
75+
76+
.list-wrapper .e-avatar {
77+
position: absolute;
78+
left: 5px;
79+
background-color: transparent;
80+
font-size: 22px;
81+
top: calc(50% - 26px);
82+
}
83+
84+
.list-wrapper .e-avatar {
85+
width: 50px;
86+
height: 50px;
87+
background-repeat: no-repeat;
88+
margin-left: 10px;
89+
}
90+
</style>
91+
92+
@*custom code end*@
93+
94+
@section Title{
95+
<title>ASP.NET MVC List Box Template Example - Syncfusion Demos </title>
96+
}
97+
@section Header{
98+
<h1 class='sb-sample-text'>Example of Template in ASP.NET MVC List Box Control</h1>
99+
}

0 commit comments

Comments
(0)

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