Image in Kendo Grid Dropdown List

In this article, I would demonstrate how to insert a image in dropdown list (inside kendo grid) based on Type (CrewId) also this will help us to how to define the foreign key column in kendo grid

In this example, the grid will contain 3 columns a) Id b) CrewId [Man/Machine which is foreign key column] 3) Comments

Let’s define below Kendo Grid in Index.cshtml of HomeController. This is a basic kendo grid configuration with 2 columns as Bound columns

and another column as ForeignKey Column which contains CrewID and we have list of CreworEquipment data which is stored in ViewState.


@(Html.Kendo().Grid<UserMachine>()
.Name("MyGrid")
.HtmlAttributes(new { style = "height:100%; width:100%; " })
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden(true);
columns.ForeignKey(m => m.CrewId, (System.Collections.IEnumerable)ViewData["CrewOrEquipment"], "Id", "Name").Title("User/Equipment").Width(100);
columns.Bound(m => m.Comments).Width(175).Title("Comments");
}
)
.ToolBar(toolbar => toolbar.Template(
<text>
<a class="k-button k-button-icontext k-grid-add anch-show-hide"><span class="k-icon k-add"></span></a>
<a class="k-button k-button-icontext anch-show-hide" id="cancelAct1" href="javascript:void(0)"><span class="k-icon k-cancel"></span></a>
</text>))
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(row => row.Id);
}
)
.ServerOperation(false)
.PageSize(25)
)
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

The major part of the code is the Grid Foreign Key template which would be defined in Shared folder. Lets add file GridForeignKey.cshtml inside folder View ==> Shared ==> EditorTemplate and add the below code to the file.


@(Html.Kendo().DropDownListFor(m => m).DataValueField("Id").DataTextField("Name")
.BindTo((System.Collections.IEnumerable)ViewData["CrewOrEquipment"])
.TemplateId("contact-template"))

Now lets define below template, and this is pretty straightforward based on Id, we are setting the respective Image along with data to it.

 
<script id="contact-template" type="text/x-kendo-template"> 
# if(data.CrewType == 1) { # 
 <img alt="icon" class="k-image" src="http://icons.iconarchive.com/icons/icons-land/vista-people/16/Office-Customer-Male-Light-icon.png"> #: data.Name # 
# } # 

# if(data.CrewType == 2) { # 
 <img alt="icon" class="k-image" src="http://icons.iconarchive.com/icons/iconshock/real-vista-construction/16/hand-driller-icon.png"> #: data.Name # 
# } # 

</script> 

Finally lets define the Controller action Index with following code. As you can see we are using the ViewData in our ForeignKey column

public ActionResult Index()
{
    ViewData["CrewOrEquipment"] = GetCrewOrEquipment();
    return View();
}

Let’s run the application and once page loads, click the Plus button and now you select Crew Columns and you should be seeing the Images (crew/equipment images) based on type.

Hope this was helpful…

Building MVC 4 App with Bootstrap layout

Prerequisites: VS2013, MVC 4

First let’s create a default MVC4 application using VS.

Go to menu File –> New Project –> Installed –> Templates –> Visual C# –> Web –> Select “ASP.NET MVC 4 Web Application” –> name application as “MVC_Bootstrap”

Now just run the application and see if everything is working. Sounds good….

Now right click the MVC_Bootstrap web project –> Manage Nuget Package –> Online –> in top right search text area enter “bootstrap” and click search. (look for package created by: Twitter, Inc)

The above step, would add bunch of bootstrap css files in Content folder and  bunch of JS files in Scripts folder. Plz verify… Sounds good.

Open the _layout.cshtml file and below tags in HEAD section or you can add proper bundle configuration in App_Start/BundleConfig.cs file


<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

Things to know about Bootstrap :

css class “container-fluid”:  This is usually applied to main DIV of the body. This div should hold entire HTML for proper layout.

css class “row”: All rows should be applied with this class, this applies width in percentage. If you want to go with PX go with row-fluid.

Entire screen width is divided into 12 equal columns ( 1 to 12)

For our application we will have header and the followed by content

1) First let’s fix _Layout.cshtml page, so open this page and remove all html (HEADER, BODY & FOOTER) content inside the body tag

2) Let’s add 3 div’s as shown below. So here what we are doing is we are creating a container div and adding 3 div’s

a) header,

b) body and

c) footer

3) Each row is embedded with a column of width


<body>
 <div class="container-fluid">
<div class="row">
 <div class="col-sm-12 col-md-12 col-lg-12">
 <h6> HEADER </h6>
 </div>

</div>
 <div class="row">
 <div class="col-sm-12 col-md-12 col-lg-12">
 @RenderBody()
 </div>
 </div>
 <div class="row">
 <div class="col-sm-12 col-md-12 col-lg-12">
 <h6> FOOTER </h6>
 </div>
 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</div>
 </div>
 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</body>

Now lets add below action in HOME controller

public ActionResult MyForm()
{
            return View();
}

Add MyForm.cshtml in folder Views ==> Home

add below content to MyForm CSHTML. In this we have divided column into sum of 12 .

<div class="container-fluid">
 <div id="MyForm" class="row">
 <div class="col-sm-12 col-md-12 col-lg-12">
 <div class="row">
 <div class="col-sm-1 col-md-1 col-lg-1">
 <div class="labelClass">Name:</div>
 </div>
 <div class="col-sm-2 col-md-2 col-lg-2">
 <select id="User" name="User" style="width: 100%">
 <option>Select</option>
 <option>User1</option>
 </select>
 </div>
 <div class="col-sm-1 col-md-1 col-lg-1">
 <div class="labelClass">Lead Name:</div>
 </div>
 <div class="col-sm-2 col-md-2 col-lg-2">
 <input id="LeadName" name="LeadName" type="text" value="" style="width: 100%">
 </div>
 <div class="col-sm-1 col-md-1 col-lg-1">
 <div class="labelClass">Date:</div>
 </div>
 <div class="col-sm-2 col-md-2 col-lg-2"><input type="date" style="width: 100%" /> </div>
 <div class="col-sm-1 col-md-1 col-lg-1">
 <div class="labelClass">Country:</div>
 </div>
 <div class="col-sm-2 col-md-2 col-lg-2">
 <select id="Country" name="Country" style="width: 100%">
 <option>Select</option>
 <option>Select 1</option>
 </select>
 </div>
 </div>
 </div>
 </div>
</div>
 

Now when you run this application this all controls would be aligned properly.

Now try to resize the window to as small as you can and you would notice that the controls would auto align themselves one below another. You can also change your screen resolution and verify the same.

Happy Kooding… Hope this was helpful…..!