KENDO CONTROLES
1. AutoComplete
Write the below code in view page
index.cshtml
@(Html.Kendo().AutoComplete()
.Name("PANNumber")
.MinLength(1)
.DataTextField("EnquiryPANNo")
.Suggest(false)
.Filter("startswith")
.DataSource(source => source
.Read(read => read.Action("EnquiryBind", "CustomerPanDetail")))
//*ControllerNameà"CustomerPanDetail" and ActionName="EnquiryBind" *//
.HtmlAttributes(new
{
maxlength = "10",
@class = "col-sm-2 form-control",
style = "width: 236px; text-transform: uppercase;"
})
)
Write the below code in controller
public List<Enquiry> LstAllEnquiry = new List<Enquiry>();
//* Method to bind the AutoComplete *//
public ActionResult EnquiryBind([DataSourceRequest] DataSourceRequest req)
{
try
{
var data = GetEnquiryData().ToList();
var query = (from a in data
select new
{
a.EnquiryId,
a.EnquiryName,
a.EnquiryPANNo
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}
//* Method to get the data of a table as a list form*//
//* Enquiry is the name of the table *//
public List<Enquiry> GetEnquiryData()
{
HttpResponseMessage GetEnquiry = client.GetAsync("api/Enquiry").Result;
if (GetEnquiry.IsSuccessStatusCode)
{
LstAllEnquiry = GetEnquiry.Content.ReadAsAsync<List<Enquiry>>().Result.ToList();
return LstAllEnquiry.Where(a => a.IsActive == true && a.IsDelete == false).ToList();
}
else
{
return null;
}
}
2. ComboBox
Write the below code in view
Index.cshtml
@(Html.Kendo().ComboBox()
.Name("cboItemGroupName")
.Filter("startswith")
.DataTextField("MaterialGroupName")
.DataValueField("MaterialGroupId")
.DataSource(ds => ds.Read("ItemGroupNameBind", "PriceMatrix"))
//*ControllerNameà" PriceMatrix " and ActionName=" ItemGroupNameBind " *//
.HtmlAttributes(new { required = "required", style = "width: 100%;", validationmessage = "*" })
.Placeholder("Select ItemGroup Name...")
)
Write the below code in controller
//* Method to bind the ComboBox *//
public ActionResult ItemGroupNameBind([DataSourceRequest]DataSourceRequest req)
{
try
{
var data = GetAllItemGroupName().ToList();
var query = (from a in data
select new
{
a.MaterialGroupId,
a.MaterialGroupName,
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
//* Method to get the data of a table as a list form*//
public List<MaterialGroup> GetAllItemGroupName()
{
HttpResponseMessage GetItem = client.GetAsync("api/MaterialGroups").Result;
if (GetItem.IsSuccessStatusCode)
{
LstAllMaterialGroup = GetItem.Content.ReadAsAsync<List<MaterialGroup>>().Result.ToList();
return LstAllMaterialGroup.Where(a => a.IsActive == true && a.IsDelete == false).OrderByDescending(a => a.InsertedOn).ToList();
}
else
{
return null;
}
}
3. MultiSelect
Write the below code in view
Index.cshtml
@(Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home"); //Set the Action and Controller names.
})
.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
})
)
Write the below code in controller
Home.cs
public List<Product> Lstpro = new List<Product>();
public ActionResult GetProducts([DataSourceRequest]DataSourceRequest req)
{
try
{
var data = GetAllProducts().ToList();
var query = (from a in data
select new
{
a. ProductID,
a. ProductName
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
//* Method to get the data of a table as a list form*//
public List<Product> GetAllProducts()
{
HttpResponseMessage GetItem = client.GetAsync("api/Product").Result;
if (GetItem.IsSuccessStatusCode)
{
Lstpro = GetItem.Content.ReadAsAsync<List<Product>>().Result.ToList();
return Lstpro.Where(a => a.IsActive == true && a.IsDelete == false).OrderByDescending(a => a.InsertedOn).ToList();
}
else
{
return null;
}
}
4. DateInput
Write the below code in view
Index.cshtml
<div id="example">
<div class="demo-section k-content">
<h4>Enter a date</h4>
<input id="dateinput" title="please enter date" style="width: 100%" />
</div>
<script>
$(document).ready(function () {
$("#dateinput").kendoDateInput();
});
</script>
</div>
5. datepicker
Code:
<div id="example">
<h4>Show e-mails from:</h4>
<input id="datepicker" value="10/10/2011" title="datepicker" style="width: 100%" />
<h4 style="margin-top: 2em;">Add to archive mail from:</h4>
<input id="monthpicker" value="November 2011" title="monthpicker" style="width: 100%" /> </div>
<script>
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker();
$("#monthpicker").kendoDatePicker({
// defines the start view
start: "year",
// defines when the calendar should return date
depth: "year",
// display month and year in the input
format: "MMMM yyyy",
// specifies that DateInput is used for masking the input element
dateInput: true
});
});
</script>
</div>
6. DateTimePicker
Code:
<div id="example">
<div class="demo-section k-content">
<h4>Remind me on</h4>
<input id="datetimepicker" title="datetimepicker" style="width: 100%;" />
</div>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true
});
});
</script>
</div>
7. ColorPicker
Code:
<div id="example">
<div class="column">
<h3 class="title">Select Wall Paint</h3>
<div id="palette"></div>
</div>
<div class="column">
<h3 class="title"><label for="picker">Choose Custom Color</label></h3>
<input id="picker" />
</div>
</div>
</div>
<script>
function preview(e) {
$("#background").css("background-color", e.value);
}
$("#palette").kendoColorPalette({
columns: 4,
tileSize: {
width: 34,
height: 19
},
palette: [
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
],
change: preview
});
$("#picker").kendoColorPicker({
value: "#ffffff",
buttons: false,
select: preview
});
</script>
88. CheckBoxList
Step:1: create table
Step:2: entity update
Step:3: in webapi folder we create a class in model directory.
public class ClaimModel
{
public List<ToolsIDCheck> ItemViewDataModel { get; set; }
}
public class ToolsIDCheck
{
public string ToolsName { get; set; }
public int Toolsno { get; set; }
public bool Selected { get; set; }
}
}
Step:3: add controller.
[HttpGet]
public ActionResult Create(string model)
{
ClaimModel obj = new ClaimModel();
obj.ItemViewDataModel = new List<ToolsIDCheck>();
List<ClaimModel> choiceList = new List<ClaimModel>();
DataSet ds2 = obj.BindTools();
foreach (DataRow dr in ds2.Tables[0].Rows) // loop for adding add from dataset to list<modeldata>
{
obj.ItemViewDataModel.Add(new ToolsIDCheck
{
Toolsno = Convert.ToInt16(dr["tool_id"]),
ToolsName = dr["tools_name"].ToString()
});
}
}
Step:4 right click on index-> add view
@model CustomerPortal.Models.ClaimModel
@using (Html.BeginForm())
{
<div class="divnewtxt">
for (var i = 0; i < Model.ItemViewDataModel.Count; i++)
{
@Html.HiddenFor(model => model.ItemViewDataModel[i].Toolsno)
@Html.HiddenFor(model => model.ItemViewDataModel[i].ToolsName)
@Html.CheckBoxFor(model => model.ItemViewDataModel[i].Selected)
@Html.DisplayFor(model => model.ItemViewDataModel[i].ToolsName)
<br />
}
} </div>
9.List Box:
@(Html.Kendo().ListBox()
.Name("optional")
.Toolbar(toolbar =>
{
toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
toolbar.Tools(tools => tools
.TransferTo()
.TransferFrom()
.TransferAllTo()
.TransferAllFrom()
);
})
.HtmlAttributes(new { title = "Item", style = "height:245px;width:49%" })
.ConnectWith("selected")
.Selectable(ListBoxSelectable.Multiple)
.Draggable()
.DropSources("selected")
.DataTextField("ItemName")
.DataValueField("ItemId")
.DataSource(source => source
.Read(read => read.Action("GetItemMaster", "ChartOfAccount"))//Read Data from the Controller Name & Action Name
)
)
// Binding Data in Controller
public ActionResult GetItemMaster([DataSourceRequest]DataSourceRequest req)
{
try
{
var data = GetAllItemMaster().ToList();
var result = (from a in data
select new
{
a.ItemId,
ItemName = a.ItemName + " [ " + a.ItemCode + " ]",
}).ToList();
if (result.ToList().Count() > 0)
{
return Json(result, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
//Get All Data from “ItemMaster” Api Controller
public List<ItemMaster> GetAllItemMaster()
{
HttpResponseMessage getContact = client.GetAsync("api/ItemMaster").Result;
if (getContact.IsSuccessStatusCode)
{
LstItemMaster = getContact.Content.ReadAsAsync<List<ItemMaster>>().Result.ToList();
return LstItemMaster.Where(a => a.IsActive == true && a.IsDelete == false).ToList();
}
else
{
return null;
}
}
10. KENDO GRID VIEW
Write the bellow Code for showing the Data in Kendo Grid:
// In Controller we have to write
Step (1): - Go to WebApplication and add controller under controller folder.
WebApplication ->Controller -> Add Controller-> name(ItemMasterController.cs)
Step (2): - Implement the code for Get Data in Kendo Grid inside the ItemMasterController.cs
namespace WebApplication.Controllers
{
public class ItemMasterController : Controller
{
private readonly RestClient _client;
HttpClient client = new HttpClient();
public List<ItemMaster> ListItem = new List<ItemMaster>();
ItemMaster item = null;
private readonly string _url = ConfigurationManager.AppSettings["url"];
public ActionResult Index()
{
return View();
}
public ItemMasterController()
{
_client = new RestClient(_url);
var url1 = ConfigurationManager.AppSettings["url"];
client.BaseAddress = new Uri(url1);
client.DefaultRequestHeaders.Accept.Add(
new MediaTypeWithQualityHeaderValue("application/json"));
}
· Create method GetAllItemGridDetails within the ItemMasterController.cs for fetching all data from the Api.
public List<ItemMaster> GetAllItemGridDetails()
{
HttpResponseMessage Getitemdetail = client.GetAsync("api/ItemMaster").Result;
if (Getitemdetail.IsSuccessStatusCode)
{
ListItem = Getitemdetail.Content.ReadAsAsync<List<ItemMaster>>().Result.ToList();
return ListItem.Where(a => a.IsActive == true && a.IsDelete == false).OrderByDescending(a => a.ItemId).ToList();
}
else
{
return null;
}
}
}
IN VIEW:
<div>
<div class="col-md-12">
<h2>Item</h2>
// ClsItemmaster Is a Model Class in Which All the Parameter of a Corresponding Table is Defined //
@(Html.Kendo().Grid<WebApplication.Models.ClsItemmaster>()
.Name("Grid") //Name of the Grid
.Columns(columns =>
{
columns.Bound(c => c.ItemName). Title("ItemName").Visible(true).Width(250);
columns.Bound(c => c.ItemCode).Title("Item Code").Visible(true).Width(250);
columns.Bound(c => c.FixedGroupTypeName).Title("ItemGroup").Visible(true).Width(250);
columns.Bound(c => c.BatchType).Title("Batch Type").Visible(true).Width(250);
columns.Bound(c => c.BrandName).Title("Brand").Visible(true).Width(200);
columns.Bound(c => c.WarehouseName).Title("Store").Visible(true).Width(200);
columns.Bound(c => c.UOMName).Title("UOM").Visible(true).Width(250);
}
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ItemId))
.PageSize(10) // Number of Items per page .Read(read => read.Action("GetAllItemGridDetails", "ItemMaster"))// We will Get all Data by Controller Name and Action Name
)
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
)
</div>
</div>
GRID VIEW WILL BE LIKE THIS:
11. Pie Chart:
CODE:
<fieldset>
@(Html.Kendo().Chart<WebApplication.Models.FixedTypeGroup>()
.Name("piechartorderd")
.Title("Stock Availability")
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.HtmlAttributes(new
{
style = "height:294px;width:320px;margin:0 auto;"
})
.DataSource(source =>
{
source.Read(read => read.Action("Tot_Percentage", "Admin"));
})
.SeriesColors(new string[] { "#d8a13f", "#922c3a" })
.Series(series => series.Pie(
model => model.percentage1 null, [null // Color expression is omitted]
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
.Template("#= category # #= kendo.format('{0:P}', percentage)#")
.Labels(labels => labels
.Template("#= value#").Position(ChartPieLabelsPosition.Center)
.Background("transparent")
.Visible(false).Distance(0)
)
.StartAngle(150)
))
<ul type="square" style="font-family:Times New Roman;font-size:medium;">
<li style="color:#d8a13f">Fixed Group Types</li>
<li style="color:#922c3a">Raw Materials</li>
</ul>
</fieldset>
//In Controller We Calculate Percentage for GetAllFixedGroupTypes & GetAllItemMasterTypes
public ActionResult Tot_Percentage()
{
try
{
var FixedGroupTypes = GetAllFixedGroupTypes().ToList();
var ItemTypes = GetAllItemMasterTypes().ToList();
var query = (from F in FixedGroupTypes
join I in ItemTypes on F.FixedGroupTypeId equals I.FixedGroupTypeId
select new
{
id = I.FixedGroupTypeId,
name = F.FixedGroupTypeName
}).ToList();
int Totalcount = (from x in query select x).Count();
int FixedCount= (from x in query where x.id==1
select x).Count();
int ItemCount= (from x in query where x.id==2
select x).Count();
float FixedPercentage = (FixedCount * 100 )/ Totalcount;
float ItemPercentage = (ItemCount * 100) / Totalcount;
List<FixedTypeGroup> objList = new List<FixedTypeGroup>();
for (int i = 0; i < 2; i++)
{
if (i == 0)
{
objList.Add(new FixedTypeGroup { percentage1 = FixedPercentage.ToString() });
}
else
{
objList.Add(new FixedTypeGroup { percentage1 = ItemPercentage .ToString()});
}
}
return Json(objList);
}
catch (Exception ex)
{
ErrorObj.ExceptionData(ex);//errors will be create in the log file
return Json(ex.Message);
}}
// Get All GetAllFixedGroupTypes
public List<FixedGroupType> GetAllFixedGroupTypes()
{
HttpResponseMessage GetContact = client1.GetAsync("api/FixedGroupType").Result;
if (GetContact.IsSuccessStatusCode)
{
LstFixedGroupType = GetContact.Content.ReadAsAsync<List<FixedGroupType>>().Result.ToList();
return LstFixedGroupType.Where(s => s.IsActive == true && s.IsDelete == false).ToList();
}
else
{
return null;
}
}
// Get All GetAllItemMasterTypes
public List<ItemMaster> GetAllItemMasterTypes()
{
HttpResponseMessage GetContact = client1.GetAsync("api/ItemMaster").Result;
if (GetContact.IsSuccessStatusCode)
{
LstItemMaster = GetContact.Content.ReadAsAsync<List<ItemMaster>>().Result.ToList();
return LstItemMaster.Where(s => s.IsActive == true && s.IsDelete == false).ToList();
}
else
{
return null;
}
}
12. Bar Chart:
CODE:
@(Html.Kendo().Chart<BusinessEntities.Sale>()
.Name("Current Stock")
.Title("Sales Details in Percentage")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("BarChartEnquiryDetails", "HmsAdminDashBoards"));
})
.SeriesColors(new string[] { "#337ab7", "#6495ED", })
.ChartArea(chartArea => chartArea
.Background("white")
)
.Series(series =>
{
series.Column(c => c.SalesPercentage);//
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories(c => c.DepartmentName)
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
.Template("#= value #")
)
)
// In Controller dynamic binding of Bar Chart
public ActionResult BarChartEnquiryDetails([DataSourceRequest] DataSourceRequest req)
{
try
{
var data = GetSaleData().ToList();
var query = (from a in data
select new
{
DepartmentName =a.DepartmentName,
SalesPercentage=a.SalesPercentage
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
// Code for GetSaleData
private List<Sale> GetSaleData()
{
try
{
sales = new Sale();
var request = new RestRequest("api/Sales", Method.GET) { RequestFormat = DataFormat.Json};
var response = _client.Execute<List<Sale>>(request);
if (response.Data == null)
throw new Exception(response.ErrorMessage);
return response.Data;
}
catch (Exception)
{
return null;}}
13. Waterfall Chart:
// Bind Data in Controller
public ActionResult BarChartEnquiryDetails([DataSourceRequest] DataSourceRequest req)
{
try
{
var data = GetSaleData().ToList();
var query = (from a in data
select new
{
DepartmentName =a.DepartmentName,
SalesPercentage=a.SalesPercentage
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
// Code for GetSaleData
private List<Sale> GetSaleData()
{
try
{
sales = new Sale();
var request = new RestRequest("api/Sales", Method.GET) { RequestFormat = DataFormat.Json};
var response = _client.Execute<List<Sale>>(request);
if (response.Data == null)
throw new Exception(response.ErrorMessage);
return response.Data;
}
catch (Exception)
{
return null;
}
}
// Code In Index View page:
@(Html.Kendo().Chart<BusinessEntities.Sale>()
.Name("WaterfallChart")
.Title("Sales Growth in Aug,2017")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("BarChartEnquiryDetails", "HmsAdminDashBoards"));
})
.SeriesColors(new string[] { "#FFA500", "#8A2BE2", "#D8BFD8", "#9932CC", "#8A2BE2", "#9370DB", "#4B0082", "#337ab7", "#03a9f4", "#006400", "#9de219", "#006634", "#4caf50", "#6495ED" })
.ChartArea(chartArea => chartArea
.Background("white")
)
.Series(series =>
{
series.Waterfall(c => c.SalesPercentage);//
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories(c => c.DepartmentName)
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
.Template("#= value #")
)
)
14. Kendo ListView:
Step 1:
Go to Model and add a model class which contains the data that u want to display in listview.
GroupClass.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication.Models
{
public class GroupClass
{
public int GroupId { get; set; }
public string GroupName { get; set;}
public string GroupOwnerImageURL { get; set; }
}
}
Step 2:
Go to controller and add a controller which contains the following code after creating controller
namespace WebApplication.Controllers
{
public class DocumentController : Controller
{
public ActionResult Index()
{
Return View ();
}
}
Step 3:
Right click on Indexà Add Viewà Give Nameàok
Step3.1:
Write the below code in view page
Index.cshtml
@using Kendo.Mvc.UI;
@using WebApplication.Models;
<form>
<script type="text/x-kendo-template" id="template2">
<div class="col-md-12" style="margin-top: 4%; margin-left: 10px;">
<div class="row" style="margin-bottom:10px;">
<div class="col-md-1">
<img src="#:GroupOwnerImageURL#" style="width: 46px; height: 40px;">
</div>
<div class="col-md-6">
<div style="font-weight: bold; font-size: medium;">
#:GroupName#
</div>
</div>
</div>
</div>
</script>
@(Html.Kendo().ListView<WebApplication.Models.GroupClass>()
.Name("listskill2")
.TagName("div")
.ClientTemplateId("template2")
.DataSource(Source => Source
.Model(model => model.Id("GroupId")
.Read(read => read.Action("GetallGroupdetails", "Document"))
//* controller Nameà “Document” , ActionNameà “GetallGroupdetails”
.ServerOperation(false)
)
.HtmlAttributes(new
{
style = "border: none 0px;"
})
)
</form>
Note: Here GroupClass is a model class which contains the field of a
particular table.
Step 4:
Write the below code in controller to bind the data in listview:
DocumentController.cs
using BusinessEntities;
using Kendo.Mvc.UI;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
using WebApplication.App_Start;
using WebApplication.Models;
using Kendo.Mvc.Extensions;
namespace WebApplication.Controllers
{
public class DocumentController : Controller
{
HttpClient client = new HttpClient();
//constructor
public DocumentController()
{
#region Get Api URI
var url1 = ConfigurationManager.AppSettings["url"];
client.BaseAddress = new Uri(url1);
client.DefaultRequestHeaders.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/json"));
#endregion
}
//* Here Master_Group is name of entity of a corresponding table and MasterGroup is name of the api through which we will fetch the data in List form.
private List<Master_Group> GetAllGroup()
{
HttpResponseMessage clientRequest = client.GetAsync("MasterGroup").Result;
if (clientRequest.IsSuccessStatusCode)
{
_master_Group = clientRequest.Content.ReadAsAsync<List<Master_Group>>().Result;
return _master_Group;
}
else
{
return null;
}
}
//* Here we are fetching only those data that we want to display in listview*//
public ActionResult GetallGroupdetails([DataSourceRequest]DataSourceRequest reqs)
{
var dim = (from a in GetAllGroup()
select new
{
a.GroupId,
a.GroupName,
a.GroupOwnerImageURL
}).ToList();
return Json(dim.ToDataSourceResult(reqs), JsonRequestBehavior.AllowGet);
}
}
}
15.
HOW TO BIND DATA IN DROP DOWN LIST:
STEP:1 – Create the database.
STEP:2- Update entity of that table name.
STEP:3- In Unit of Work directory which Is under Data Model directory (Data Model Is Under Data Access Directory), we have to create repository.
STEP:4- Under business access we have to Create an Interface and one class have to create of That Name (Whatever The Interface Name).
STEP:4- Go to WebApi Azure directory, we have to create controller in controller directory (Right Click on controller -> Add Controller->Click On Webapi2 Controller-Empty->Click On Add. (Like we give A name of Controller Is ProductController)
STEP:5- In that Controller we have to write Get, Post, Put, Delete method.
STEP:6- In Web Application we have to add one other Controller. (Right Click On Controller-> Add Controller-> Mvc5 Controller –Empty-> Click On Add).
STEP:6- In that controller we write a code for bind data in dropdown list like
public class ProductController : Controller
{
HttpClient client = new HttpClient();
public List< Product > LstAllProductClass = new List< Product >();
Product product= null;
private readonly RestClient _client;
private readonly string _url = ConfigurationManager.AppSettings["url"];
public ProductController ()
{
var url1 = ConfigurationManager.AppSettings["url"];
client.BaseAddress = new Uri(url1);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
}
public ActionResult Index()
{
return View();
}
public List<Product> GetAllProduct ()
{
HttpResponseMessage GetProduct = client.GetAsync("api/Product").Result;
if (GetProduct.IsSuccessStatusCode)
{
LstAllProductClass = GetProduct.Content.ReadAsAsync<List< Product >>().Result.ToList();
return LstAllProductClass.Where(a => a.IsActive == true && a.IsDelete == false).OrderByDescending(a => a.InsertedOn).ToList();
}
else
{
return null;
}
}
public ActionResult ProductBind([DataSourceRequest] DataSourceRequest req)
{
try
{
var data = GetAllProduct().ToList();
var query = (from a in data
select new {
a.ProductId,
a.ProductName
}).ToList();
if (query.Count > 0)
{
return Json(query, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
STEP:7- Right click on Index-> add view
STEP:8- IN Index.cshtml page means view page of that department controller we will write code for
dropdownlist like:
@(Html.Kendo().DropDownList()
.Name("productDropDownList") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the DropDownList as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the DropDownList as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Product") //Set the Action and Controller names.
.Data("onAdditionalData");
});
})
)
<script>
function onAdditionalData() {
return {
text: $("#productDropDownList").data("kendoDropDownList").filterInput.val()
ListBox };
}
</script>
16.CheckBoxList:
Step:1: create table
Step:2: entity update
Step:3: in webapi folder we create a class in model directory.
public class ClaimModel
{
public List<ToolsIDCheck> ItemViewDataModel { get; set; }
}
public class ToolsIDCheck
{
public string ToolsName { get; set; }
public int Toolsno { get; set; }
public bool Selected { get; set; }
}
}
Step:4: add controller.
[HttpGet]
public ActionResult Create(string model)
{ClaimModel obj = new ClaimModel();
obj.ItemViewDataModel = new List<ToolsIDCheck>();
List<ClaimModel> choiceList = new List<ClaimModel>();
DataSet ds2 = obj.BindTools();
foreach (DataRow dr in ds2.Tables[0].Rows) // loop for adding add from dataset to list<modeldata>
{
obj.ItemViewDataModel.Add(new ToolsIDCheck
{
Toolsno = Convert.ToInt16(dr["tool_id"]),
ToolsName = dr["tools_name"].ToString()
});
}
}
Step:5: right click on index-> add view
@model CustomerPortal.Models.ClaimModel
@using (Html.BeginForm())
{
<div class="divnewtxt">
for (var i = 0; i < Model.ItemViewDataModel.Count; i++)
{
@Html.HiddenFor(model => model.ItemViewDataModel[i].Toolsno)
@Html.HiddenFor(model => model.ItemViewDataModel[i].ToolsName)
@Html.CheckBoxFor(model => model.ItemViewDataModel[i].Selected)
@Html.DisplayFor(model => model.ItemViewDataModel[i].ToolsName)
<br />
}
} </div>
17.Slider:
Step:1: create table
Step:2: entity update
Step:3: in webapi folder we create a class in model directory.
public class Slider
{
public string src { get; set; }
public string title { get; set; }
}
Step:4: add controller.
public class HomeController : Controller
{
public ActionResult Index()
{
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Content/assets/img/"));
List<Slider> files = new List<Slider>();
foreach (string filePath in filePaths)
{ string fileName = Path.GetFileName(filePath);
files.Add(new Slider
{
title = fileName.Split('.')[0].ToString(),
src = "../Content/assets/img/" + fileName
});
}
return View(files);
}
Step:5: right click on index-> add view
@model IEnumerable<_24X7Hires.Models.Slider>
@{
ViewBag.Title = "Index";
}
<title>Basic jQuery Slider - Demo</title>
<link rel="stylesheet" href="../assets/bjqs.css">
<link href="~/Content/Style.css" rel="stylesheet" type='text/css'>
<link href="~/Content/assets/demo.css" rel="stylesheet" />
<script src="~/Content/assets/js/jquery-1.7.1.min.js"></script>
<script src="~/Content/assets/js/bjqs-1.3.min.js"></script>
<div id="container">
<h2>Slider from Folder</h2>
<div id="banner-fade">
<ul class="bjqs">
@foreach (var item in Model)
{
<li>
<img src='@Html.DisplayFor(modelItem => item.src)'
title='@Html.DisplayFor(modelItem => item.title)' alt="">
</li>
}
</ul>
</div>
@*<script class="secret-source" style="display:none;">
jQuery(document).ready(function ($) {
$('#banner-fade').bjqs({
height: 320,
width: 620,
responsive: true
});
});
</script>*@
</div>
<script src="~/Content/assets/js/libs/jquery.secret-source.min.js"></script>
<script>
jQuery(function ($) {
$('.secret-source').secretSource({
includeTag: false
});
$('#banner-fade').bjqs({
height: 320,
width: 620,
responsive: true
});
});
</script
18. Numeric TextBox:
Step: In index.cshtml we write a code for numeric Textbox
<div id="example">
<div id="add-product" class="demo-section k-content">
<p class="title">Add new product</p>
<ul id="fieldlist">
<li>
<label>
Price:
<input id="currency" type="number" title="currency" value="30" min="0" max="100" style="width: 100%;" />
</label>
</li>
<li>
<label>
Price Discount:
<input id="percentage" value="0.05" title="percentage" style="width: 100%;" />
</label>
</li>
<li>
<label>
Weight:
<input id="custom" value="2" title="custom" style="width: 100%;" />
</label>
</li>
<li>
<label>
Currently in stock:
<input id="numeric" type="number" title="numeric" value="17" min="0" max="100" step="1" style="width: 100%;" />
</label>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
// create NumericTextBox from input HTML element
$("#numeric").kendoNumericTextBox();
// create Curerncy NumericTextBox from input HTML element
$("#currency").kendoNumericTextBox({
format: "c",
decimals: 3
});
// create Percentage NumericTextBox from input HTML element
$("#percentage").kendoNumericTextBox({
format: "p0",
min: 0,
max: 0.1,
step: 0.01
});
// create NumericTextBox from input HTML element using custom format
$("#custom").kendoNumericTextBox({
format: "#.00 kg"
});
});
</script>
19. Date Picker:
Step: In index.cshtml we write a code for DateTimePicker
@(Html.Kendo().DatePicker().DateInput() // date picker with date input in proper format
.Name("dtCustomerbirth")
.Value("27/05/1996")
.HtmlAttributes(new { style = "width: 104%;background:none;", title = "datepicker", placeholder = "Enter Date", @class = "col-sm-2 form-control" })
20. Kendo Window:
Write the below code in view
Index.cshtml
@(Html.Kendo().Window().Name("AddDetails")
.Title("Groups")
.Visible(false)
.Modal(true)
.Content(@<text>
<div style="width:100%">
@Html.Partial("_CommonGroup")
// "_CommonGroup" is name of the partial page that user wants to display in window
</div>
</text>)
.Draggable()
.Width(650)
.Height(600)
.Actions(actions => actions.Close()
)
// for open a window write the below code inside script
<script>
var wnd = $("# AddDetails ").data("kendoWindow");
wnd.center().open();
</script>
Comments
Post a Comment