Kendo MVC
Grid View
@using Kendo.Mvc.UI
@{
ViewBag.Title = "ViewLead";
Layout = "~/Views/Shared/_FinalMasterLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View Page</title>
@*<script>
function Closeabc1() {
$("#PopGridData").show();
}
function RowSelected(e) {
debugger
var gview = $("#Leadgrid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
var id = selectedItem.LeadId
var ln = selectedItem.LeadName
var jt = selectedItem.JobTitle
var ls = selectedItem.LeadSource
var lt = selectedItem.LeadTypeName
var at = selectedItem.AssignedTo
var des = selectedItem.Description
var pno = selectedItem.PhoneNo
var skyp = selectedItem.Skyp
var pa = selectedItem.PotentialAmount
var rank = selectedItem.Rank
var teritory = selectedItem.TerritoryName
var noemp = selectedItem.NoOfEmployee
var indus = selectedItem.IndustryName
var addtype = selectedItem.AddressTypeId
var addlane1 = selectedItem.AddressLine1
var country = selectedItem.CountryName
var zip = selectedItem.ZipCode
var delvryinst = selectedItem.DeleveryInstruction
var fb = selectedItem.Facebook
var li = selectedItem.LinkedIn
var wtc = selectedItem.BestWayToContact
var referedby = selectedItem.ReferredBy
var email = selectedItem.EmailId
var fax = selectedItem.Fax
var ecost = selectedItem.EstimatedCloseDate
var campaign = selectedItem.campaign
var com = selectedItem.company
var ar = selectedItem.AnnualRevenue
var addresslane2 = selectedItem.AddressLine2
var state = selectedItem.StateName
var city = selectedItem.CityName
var twitter = selectedItem.Twitter
var website = selectedItem.WebSite
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/LeadDetails/ShowPopUp',
data: '{"LeadId":"' + id + '","LeadName":"' + ln + '","jobTitle":"' + jt + '","leadsource":"' + ls + '","leadType":"' + lt + '","assigned":"' + at + '","description":"' + des + '","phoneno":"' + pno + '","skype":"' + skyp + '","potential":"' + pa + '""rank":"' + rank + '","teritory":"' + teritory + '","noempy":"' + noemp + '","industry":"' + indus + '","addresstype":"' + addtype + '","addresslane1":"' + addlane1 + '","country":"' + country + '","zip":"' + zip + '","delvryinst":"' + delvryinst + '","facebook":"' + fb + '","linkdin":"' + li + '","waytocontact":"' + wtc + '","referedby":"' + referedby + '","email":"' + email + '","fax":"' + fax + '","ecost":"' + ecost + '","campaign":"' + campaign + '","company":"' + com + '","annulrev":"' + ar + '","addresslane2":"' + addresslane2 + '","state":"' + state + '","city":"' + city + '","twitter":"' + twitter + '","website":"' + website + '"}',
dataType: "json",
});
document.getElementById("txtname").value = ln
document.getElementById("txtjobtitle").value = jt
document.getElementById("txtSource").value = ls
document.getElementById("txtType").value = lt
document.getElementById("txtAssignTo").value = at
document.getElementById("txtDescription").value = des
document.getElementById("txtPhone").value = pno
document.getElementById("txtSkype").value = skyp
document.getElementById("txtAmount").value = pa
document.getElementById("txtRank").value = rank
document.getElementById("txtTeritory").value = teritory
document.getElementById("txtEmployee").value = noemp
document.getElementById("txtIndustry").value = indus
document.getElementById("txtAddressType").value = addtype
document.getElementById("txtAddressLine1").value = addlane1
document.getElementById("txtCountry").value = country
document.getElementById("txtZipcode").value = zip
document.getElementById("txtDeliveryInstruction").value = delvryinst
document.getElementById("txtFacebook").value = fb
document.getElementById("txtLinkedIn").value = li
document.getElementById("txtWaytoContact").value = wtc
//document.getElementById("txtLeadSource").value = ln
document.getElementById("txtReferedBy").value = referedby
document.getElementById("txtEmail").value = email
document.getElementById("txtFax").value = fax
document.getElementById("txtClosingDate").value = ecost
document.getElementById("txtCampaign").value = campaign
document.getElementById("txtCompany").value = com
document.getElementById("txtAnualRevenue").value = ar
document.getElementById("txtAddressLine2").value = addresslane2
document.getElementById("txtState").value = state
document.getElementById("txtCity").value = city
document.getElementById("txtTwiter").value = twitter
document.getElementById("txtWebsite").value = website
$("#PopGridData").data("kendoWindow").open();
}
function onClose() {
$("#PopGridData").data("kendoWindow").close();
}
</script>*@
@*<script>
function onClose() {
$("#Leadgrid").show();
}
$(document).ready(function () {
$("#Leadgrid").bind("dblclick", function () {
$("#PopGridData").data("kendoWindow").center().open();
$("#Leadgrid").show();
});
});
</script>*@
<script>
var rowNumber = 0;
function resetRowNumber(e) {
rowNumber = 0;
}
function renderNumber(data) {
return ++rowNumber;
}
//function checkAll(ele) {
// debugger;
// var state = $(ele).is(':checked');
// var grid = $('#Leadgrid').data('kendoGrid');
// var Count = $('#Leadgrid').data("kendoGrid").dataSource.total();
// if (state == true) {
// $('.chkFormols').prop('checked', true);
// grid.tbody.find('tr').attr("class", "k-state-selected");
// }
// else {
// $('.chkFormols').prop('checked', false);
// grid.tbody.find('tr').removeAttr("class", "k-state-selected");
// }
//};
function SetCheckBOX(ele) {
debugger;
var state = $(ele).is(':checked');
var grid = $('#Leadgrid').data('kendoGrid');
var Count = $('#Leadgrid').data("kendoGrid").dataSource.total();
for (i = 0; i < Count; i++) {
var isChecked = grid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkFormols').is(':checked');
if (isChecked == true) {
grid.tbody.find('tr:eq(' + i + ')').attr("class", "k-state-selected");
}
else {
grid.tbody.find('tr:eq(' + i + ')').removeAttr("class", "k-state-selected");
//$("#over_hide").show();
}
}
if (state == true) {
$("#over_hide").hide();
}
else {
$("#over_hide").show();
}
};
function rbn_LeadDetailsEditbtn(ele) {
debugger;
var grid = $('#Leadgrid').data('kendoGrid');
var Count = $('#Leadgrid').data("kendoGrid").dataSource.total();
for (i = 0; i < Count; i++) {
var isChecked = grid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkFormols').is(':checked');
if (isChecked == true) {
grid.tbody.find('tr:eq(' + i + ')').attr("class", "k-state-selected");
var rw = grid.tbody.find('tr:eq(' + i + ')');
var cellValue = rw.find("td:eq(" + 1 + ")").text();
alert(cellValue);
var url = "/LeadDetails/EditLead?id=" + cellValue;
window.location.href = url;
$.ajax({
method: "POST",
dataType: 'text',
url: '/LeadDetails/EditLead1/',
data: { id: cellValue },
success: function (data) {
if (data) {
window.location.href = "EditLead";
}
else {
window.location.href = "url";
}
}
});
}
else {
grid.tbody.find('tr:eq(' + i + ')').removeAttr("class", "k-state-selected");
}
}
}
function rbn_LeadViewConvert(ele) {
debugger;
var grid = $('#Leadgrid').data('kendoGrid');
var Count = $('#Leadgrid').data("kendoGrid").dataSource.total();
for (i = 0; i < Count; i++) {
var isChecked = grid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkFormols').is(':checked');
if (isChecked == true) {
grid.tbody.find('tr:eq(' + i + ')').attr("class", "k-state-selected");
var rw = grid.tbody.find('tr:eq(' + i + ')');
var cellValue = rw.find("td:eq(" + 1 + ")").text();
alert(cellValue);
$.ajax({
method: "POST",
dataType: 'text',
url: '/LeadDetails/ConvertLead1/',
data: { id: cellValue },
success: function (data) {
if (data) {
window.location.href = "ConvertLead";
}
else {
window.location.href = "url";
}
}
});
}
else {
grid.tbody.find('tr:eq(' + i + ')').removeAttr("class", "k-state-selected");
}
}
location.reload();
}
</script>
@*<script type="text/javascript">
$(document).ready(function () {
$('tr').dblclick(function () {
alert('dblclick');
});
});
</script>*@
<style>
.Newtoolbar {
height:28px;
width:236px;
background-color:#f1f1f1;
border:1px solid #ccc;
float:right;
}
.Newtoolbar_Box {
height:20px;
width:20px;
border:1px solid #ccc;
padding:2px;
margin:3px;
float:left;
}
/* Tooltip container */
.Mytooltip {
position: relative;
display: inline-block;
}
.Mytooltip a {
color: #4a8bf5;
}
/* Tooltip text */
.Mytooltip .Mytooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 9999;
top:25px;
left:-100px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.Mytooltip:hover .Mytooltiptext {
visibility: visible;
}
</style>
<script>
$(document).ready(function () {
$("#div_toolOption").hide();
});
function SetOption(ele) {
debugger;
$("#div_toolOption").slideToggle(1000);
};
</script>
</head>
<body>
<div class="bodee1">
@Html.Partial("_LeadViewRibbonMenu")
</div>
<div style="padding:10px;">
<div style="width:100%;height:27px;text-align:center;" id="div_toolOption">
<div class="Newtoolbar">
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-tag" style="cursor:pointer"></span>
<span class="Mytooltiptext">Schedule Follow Up</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-star" style="cursor:pointer"></span>
<span class="Mytooltiptext">Add Event</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-tasks" style="cursor:pointer"></span>
<span class="Mytooltiptext">Add Task</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-earphone" style="cursor:pointer"></span>
<span class="Mytooltiptext">Log Call</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-envelope" style="cursor:pointer"></span>
<span class="Mytooltiptext">Send Email</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-edit" style="cursor:pointer"></span>
<span class="Mytooltiptext">Add Note</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-paperclip" style="cursor:pointer"></span>
<span class="Mytooltiptext">Add Document</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-option-horizontal" style="cursor:pointer"></span>
<span class="Mytooltiptext">More Details</span>
</div>
</div>
<div class="Newtoolbar_Box">
<div class="Mytooltip">
<span class="glyphicon glyphicon-trash" style="cursor:pointer"></span>
<span class="Mytooltiptext">Delete</span>
</div>
</div>
</div>
<div id="over_hide" style="width:235px;height:27px;background-color:rgba(255, 255, 255, 0.42);position:absolute;z-index:99999;right:29px;"></div>
</div>
<div>
@(Html.Kendo().Grid<CRM.Models.ViewLeadModel>()
.Name("Leadgrid")
.Columns(columns =>
{
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' name='chkStatus' type='checkbox' class='chkFormols' onclick='SetCheckBOX(this)'>").Width(50);
//.HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' />").Width(50);
//columns.Template(t => { }).Title("SL No").ClientTemplate("#= renderNumber(data) #");
columns.Bound(o => o.LeadId).Hidden();
columns.Bound(o => o.ClientId).Hidden();
columns.Bound(o => o.Title).Title("Salutation");
columns.Bound(o => o.LeadName).Title("Lead Name");
columns.Bound(o => o.JobTitle).Hidden();
columns.Bound(o => o.BestWayToContact).Hidden();
columns.Bound(o => o.Company);
columns.Bound(o => o.LeadStatus).Hidden();
columns.Bound(o => o.LeadTypeId).Hidden();
columns.Bound(o => o.ReferredBy).Hidden();
columns.Bound(o => o.AssignedTo).Hidden();
columns.Bound(o => o.Description).Hidden();
columns.Bound(o => o.CreatedOn).Hidden();
columns.Bound(o => o.PhoneNo);
columns.Bound(o => o.EmailId);
columns.Bound(o => o.LeadSource).Hidden();
columns.Bound(o => o.SourceName).Title("LeadSource");
columns.Bound(o => o.Rating);
columns.Bound(o => o.StatusId).Hidden();
columns.Bound(o => o.StatusName).Title("Status");
columns.Bound(o => o.Skype).Hidden();
columns.Bound(o => o.Fax).Hidden();
//columns.Bound(o => o.PotentialAmount);
columns.Bound(o => o.EstimatedCloseDate).Hidden();
columns.Bound(o => o.Rank).Hidden();
columns.Bound(o => o.CampaignId).Hidden();
columns.Bound(o => o.TerritoryId).Hidden();
columns.Bound(o => o.CustomerId).Hidden();
columns.Bound(o => o.IndustryId).Hidden();
//columns.Bound(o => o.NoOfEmployee);
columns.Bound(o => o.AnnualRevenue).Hidden();
columns.Bound(o => o.AddressTypeId).Hidden();
//columns.Bound(o => o.AddressLine1);
columns.Bound(o => o.AddressLine2).Hidden();
columns.Bound(o => o.CityId).Hidden();
columns.Bound(o => o.StateId).Hidden();
columns.Bound(o => o.CountryId).Hidden();
columns.Bound(o => o.ZipCode).Hidden();
columns.Bound(o => o.DeleveryInstruction).Hidden();
columns.Bound(o => o.Facebook).Hidden();
columns.Bound(o => o.Twitter).Hidden();
columns.Bound(o => o.LinkedIn).Hidden();
columns.Bound(o => o.WebSite).Hidden();
columns.Bound(o => o.StatusName).Hidden();
columns.Template(@<text></text>).ClientTemplate("<span class='glyphicon glyphicon-option-horizontal' style='cursor:pointer' onclick='SetOption(this)'></span>").Title("Options");
})
.Events(ev => ev.DataBound("resetRowNumber"))
// .HtmlAttributes(new { style = "height: 100%" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5)
)
.Selectable()
.Sortable()
.Filterable()
//.Scrollable()
//.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => { model.Id(o => o.LeadId); })
.Read(read => read.Action("ViewLead1", "LeadDetails"))
)
)
</div>
</div>
@(Html.Kendo().Window().Name("PopGridData")
.Title("Display Grid Data")
.Visible(false)
.Modal(true)
.Content(@<text>
<div style="width:100%" id="fieldlist">
@Html.Partial("PRV_CreateLead")
</div>
</text>)
.Draggable()
.Width(800)
.Height(500)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
//.Events(ev => ev.Close("Closeabc1"))
)
</body>
</html>
No comments:
Post a Comment