I have made a table in database under CEBC database.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Nop.Core.Domain.Emp
{
public class Emp :BaseEntity
{
public string NAME { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Nop.Data.Mapping.Emp
{
public class EmpMap : NopEntityTypeConfiguration<Nop.Core.Domain.Emp.Emp>
{
public EmpMap()
{
this.ToTable("EMP");
this.HasKey(m => m.Id);
this.Property(m => m.NAME).IsRequired();
}
}
}
using Nop.Web.Framework;
using Nop.Web.Framework.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Nop.Admin.Models.Emp
{
public partial class EmpModel : BaseNopEntityModel
{
public string NAME { get; set; }
}
}
using FluentValidation;
using Nop.Admin.Models.Emp;
using Nop.Services.Localization;
using Nop.Web.Framework.Validators;
namespace Nop.Admin.Validators.Emp
{
public class EmpValidator : BaseNopValidator<EmpModel>
{
public EmpValidator(ILocalizationService localizationService)
{
RuleFor(x => x.NAME).NotEmpty().WithMessage(localizationService.GetResource("Admin.Promotions.Discounts.Fields.Name.Required"));
}
}
}
namespace Nop.Admin.Infrastructure
{
public class AutoMapperStartupTask : IStartupTask
{
public void Execute()
{
//dbentity to model mapping
Mapper.CreateMap<Emp, EmpModel>();
//model to dbentity mapping
Mapper.CreateMap<EmpModel, Emp>();
}
}
}
namespace Nop.Admin.Extensions
{
public static class MappingExtensions
{
public static TDestination MapTo<TSource, TDestination>(this TSource source)
{
return Mapper.Map<TSource, TDestination>(source);
}
public static TDestination MapTo<TSource, TDestination>(this TSource source, TDestination destination)
{
return Mapper.Map(source, destination);
}
#region Emp
public static EmpModel ToModel(this Emp entity)
{
return entity.MapTo<Emp, EmpModel>();
}
public static Emp ToEntity(this EmpModel model)
{
return model.MapTo<EmpModel, Emp>();
}
#endregion Emp
}
}
namespace Nop.Services.Emp
{
public interface IEmpService
{
void InsertEmp(Nop.Core.Domain.Emp.Emp entity);
IPagedList<Nop.Core.Domain.Emp.Emp> GetAllEmpg(int pageIndex, int pageSize);
void MarkAsDeleted(int Id);
void EmpUpdate(Core.Domain.Emp.Emp entity);
List<Core.Domain.Emp.Emp> GetAllEmp();
Core.Domain.Emp.Emp GetById(int id);
}
}
namespace Nop.Services.Emp
{
public class EmpService:IEmpService
{
private readonly IRepository<Core.Domain.Emp.Emp> _empRepository;
private readonly IEventPublisher _eventPublisher;
public EmpService(IRepository<Core.Domain.Emp.Emp> empRepository, IEventPublisher eventPublisher)
{
this._empRepository = empRepository;
this._eventPublisher = eventPublisher;
}
public void InsertEmp(Core.Domain.Emp.Emp entity)
{
_empRepository.Insert(entity);
_eventPublisher.EntityInserted(entity);
}
public IPagedList<Core.Domain.Emp.Emp> GetAllEmpg(int pageIndex, int pageSize)
{
var query = _empRepository.Table;
var Items = new PagedList<Core.Domain.Emp.Emp>(query.ToList(), pageIndex, pageSize);
return Items;
}
public void MarkAsDeleted(int Id)
{
var data = _empRepository.Table.Where(pg => pg.Id == Id).SingleOrDefault();
_empRepository.Delete(data);
_eventPublisher.EntityDeleted(data);
}
public void EmpUpdate(Core.Domain.Emp.Emp entity)
{
var data = _empRepository.Table.Where(pg => pg.Id == entity.Id).SingleOrDefault();
data.NAME = entity.NAME;
_empRepository.Update(entity);
_eventPublisher.EntityUpdated(entity);
}
public List<Core.Domain.Emp.Emp> GetAllEmp()
{
return this._empRepository.Table.ToList();
}
public Core.Domain.Emp.Emp GetById(int id)
{
return this._empRepository.GetById(id);
}
}
}
namespace Nop.Web.Framework
{
public class DependencyRegistrar : IDependencyRegistrar
{
public virtual void Register(ContainerBuilder builder, ITypeFinder typeFinder)
{
builder.RegisterType<EmpService>().As<IEmpService>().InstancePerRequest();
}
}
}
Inline edit and delete in kendo gride.
using Nop.Admin.Models.Emp;
using Nop.Core;
using Nop.Services.Localization;
using Nop.Services.Emp;
using Nop.Services.Security;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Nop.Admin.Extensions;
using Nop.Web.Framework.Kendoui;
using Nop.Services.Customers;
using Nop.Admin.Models.Catalog;
using Nop.Services.Catalog;
using Nop.Core.Domain.Catalog;
using Nop.Services.Media;
namespace Nop.Admin.Controllers
{
public class EmpController : Controller
{
// GET: Emp
private readonly IEmpService _empService;
private readonly ILocalizationService _localizationService;
private readonly IWorkContext _workContext;
private readonly IWebHelper _webHelper;
private readonly IPermissionService _permissionService;
private readonly ICustomerService _customerService;
private readonly IProductService _productService;
private readonly IPictureService _pictureService;
public EmpController(
ILocalizationService localizationService, IWorkContext workContext, IWebHelper webHelper,
IPermissionService permissionService, IEmpService empService, ICustomerService customerService,
IProductService productService, IPictureService pictureService
)
{
this._localizationService = localizationService;
this._workContext = workContext;
this._webHelper = webHelper;
this._permissionService = permissionService;
this._empService = empService;
this._customerService = customerService;
this._productService = productService;
this._pictureService = pictureService;
}
[HttpGet]
public ActionResult Index()
{
var m = this._empService.GetAllEmp().Select(n => n.ToModel()).ToList();
return View(m);
}
[HttpPost]
public ActionResult IndexKendoData(DataSourceRequest command)
{
var gridModel = new DataSourceResult();
var data =_empService.GetAllEmpg(command.Page - 1, command.PageSize);
gridModel.Data = data.Select(x => new { Id = x.Id, Name = x.NAME});
return Json(gridModel, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Create()
{
EmpModel emp = new EmpModel();
TryUpdateModel(emp);
_empService.InsertEmp(emp.ToEntity());
return RedirectToAction("Index");
}
[HttpPost]
public void Edit(EmpModel emp)
{
_empService.EmpUpdate(emp.ToEntity());
}
[HttpPost]
public void Delete(int Id)
{
_empService.MarkAsDeleted(Id);
}
}
}
veiw for inline edit
@model IEnumerable<Nop.Admin.Models.Emp.EmpModel>
@{
var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="options k-button-add">
<a href="#" class="k-button" name="viewEmp">Add New Employee<span class="infoIconinBtn"><img src="~/Administration/Content/images/small-info-icon.png" alt="" class="img-responsive" /> </span></a>
<input type="button" id="delete-selected" class="k-button" value="Delete" />
</div>
<div id="CreateEmp" style="display:none;">
@Html.Partial("CreatePV", new Nop.Admin.Models.Emp.EmpModel() { NAME =null })
</div>
<div id="Emp-grid"></div>
@Html.TextBox("cal")
<script id="delete-confirmation" type="text/x-kendo-template">
<p class="delete-message">Are you sure to delete this picture?</p>
<button class="delete-confirm k-button">Yes</button>
<button class="delete-cancel k-button">No</button>
</script>
</body>
</html>
<script type="text/javascript">
var selectedIds = [];
$(function ()
{
$("a[name='viewEmp']").click(function () {
var window = $('#CreateEmp');
if (!window.data('kendoWindow')) {
window.kendoWindow({
modal: true,
title: 'New Emp',
actions: ['Close'],
width: 800,
draggable: false,
resizable: false,
visible: false,
height: 250
});
}
window.data('kendoWindow').center().open();
return false;
});
$('#cal').kendoDatePicker();
$("#Emp-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("IndexKendoData", "Emp"))",
type: "POST",
dataType: "json"
}
,update: {
url:"@Html.Raw(Url.Action("Edit", "Emp"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "@Html.Raw(Url.Action("Delete", "Emp"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Name: { editable: true, type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type == "destroy" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 5,
serverPaging: true,
serverFiltering: false,
serverSorting: true
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
pageable: {
refresh: true,
pageSizes: 5,
buttonCount: 5
},
editable: {
confirmation: true,
mode: "inline"
},
scrollable: false,
columnMenu: true,
groupable: true,
columns: [
{
field: "Id",
template: "#=Id#",
hidden: true
},
{
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50,
filterable: false,
sortable: false
},
{
field: "Name",
title: "Name",
filterable: true
},
{
title: "Action",
command: [{
name: "edit",
text: "@T("Admin.Common.Edit")"
},
{
name: "destroy",
text: "@T("Admin.Common.Delete")"
}
],
}
]
});
$('#mastercheckbox').click(function () {
$('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
});
$('#delete-selected').click(function(e) {
if (confirm('Do you want to delete it ?')) {
if (selectedIds.length == 0) {
return false;
}
e.preventDefault();
var postData = {
abc: selectedIds
};
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("Deletemultiselect", "Emp"))",
data: postData,
complete: function (data) {
//reload grid
var grid = $('#Emp-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
return false;
}
else {
var grid = $('#Emp-grid').data('kendoGrid');
grid.dataSource.read();
}
});
$('#Emp-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function (e) {
var $check = $(this);
if ($check.is(":checked") == true) {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked == -1) {
//add id to selectedIds.
selectedIds.push($check.val());
}
}
else {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked > -1) {
//remove id from selectedIds.
selectedIds = $.grep(selectedIds, function (item, index) {
return item != $check.val();
});
}
}
});
});
</script>
through popup edit and delete in kendo gride.
using Nop.Admin.Models.Emp;
using Nop.Core;
using Nop.Services.Localization;
using Nop.Services.Emp;
using Nop.Services.Security;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Nop.Admin.Extensions;
using Nop.Web.Framework.Kendoui;
using Nop.Services.Customers;
using Nop.Admin.Models.Catalog;
using Nop.Services.Catalog;
using Nop.Core.Domain.Catalog;
using Nop.Services.Media;
namespace Nop.Admin.Controllers
{
public class EmpController : Controller
{
// GET: Emp
private readonly IEmpService _empService;
private readonly ILocalizationService _localizationService;
private readonly IWorkContext _workContext;
private readonly IWebHelper _webHelper;
private readonly IPermissionService _permissionService;
private readonly ICustomerService _customerService;
private readonly IProductService _productService;
private readonly IPictureService _pictureService;
public EmpController(
ILocalizationService localizationService, IWorkContext workContext, IWebHelper webHelper,
IPermissionService permissionService, IEmpService empService, ICustomerService customerService,
IProductService productService, IPictureService pictureService
)
{
this._localizationService = localizationService;
this._workContext = workContext;
this._webHelper = webHelper;
this._permissionService = permissionService;
this._empService = empService;
this._customerService = customerService;
this._productService = productService;
this._pictureService = pictureService;
}
[HttpGet]
public ActionResult Index()
{
var m = this._empService.GetAllEmp().Select(n => n.ToModel()).ToList();
return View(m);
}
[HttpPost]
public ActionResult IndexKendoData(DataSourceRequest command)
{
var gridModel = new DataSourceResult();
var data =_empService.GetAllEmpg(command.Page - 1, command.PageSize);
gridModel.Data = data.Select(x => new { Id = x.Id, Name = x.NAME});
return Json(gridModel, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Create()
{
EmpModel emp = new EmpModel();
TryUpdateModel(emp);
_empService.InsertEmp(emp.ToEntity());
return RedirectToAction("Index");
}
[HttpPost]
public ActionResult Edit(EmpModel emp)
{
_empService.EmpUpdate(emp.ToEntity());
return RedirectToAction("Index");
}
[HttpPost]
public void Delete(int Id)
{
_empService.MarkAsDeleted(Id);
}
[HttpPost]
public JsonResult Deletemultiselect(List<int> abc)
{
for (int i = 0; i < abc.Count; i++)
{
_empService.MarkAsDeleted(abc[i]);
}
return Json(new { Result = true }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public PartialViewResult Editp(int Id)
{
EmpModel vm = _empService.GetById(Id).ToModel();
return PartialView("EditPV", vm);
}
}
}
@model IEnumerable<Nop.Admin.Models.Emp.EmpModel>
@{
var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="options k-button-add">
<a href="#" class="k-button" name="viewEmp">Add New Employee<span class="infoIconinBtn"><img src="~/Administration/Content/images/small-info-icon.png" alt="" class="img-responsive" /> </span></a>
<input type="button" id="delete-selected" class="k-button" value="Delete" />
</div>
<div id="CreateEmp" style="display:none;">
@Html.Partial("CreatePV", new Nop.Admin.Models.Emp.EmpModel() { NAME =null })
</div>
<div id="EditEmp" style="display:none;">
</div>
<div id="Emp-grid"></div>
@Html.TextBox("cal")
<script id="delete-confirmation" type="text/x-kendo-template">
<p class="delete-message">Are you sure to delete this picture?</p>
<button class="delete-confirm k-button">Yes</button>
<button class="delete-cancel k-button">No</button>
</script>
</body>
</html>
<script type="text/javascript">
var selectedIds = [];
$(function ()
{
$("a[name='viewEmp']").click(function () {
var window = $('#CreateEmp');
if (!window.data('kendoWindow')) {
window.kendoWindow({
modal: true,
title: 'New Emp',
actions: ['Close'],
width: 800,
draggable: false,
resizable: false,
visible: false,
height: 250
});
}
window.data('kendoWindow').center().open();
return false;
});
$('#cal').kendoDatePicker();
$("#Emp-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("IndexKendoData", "Emp"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "@Html.Raw(Url.Action("Delete", "Emp"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Name: { editable: true, type: "string" },
}
}
},
requestEnd: function (e) {
if (e.type == "destroy" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: 5,
serverPaging: true,
serverFiltering: false,
serverSorting: true
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
pageable: {
refresh: true,
pageSizes: 5,
buttonCount: 5
},
editable: {
confirmation: true,
mode: "inline"
},
scrollable: false,
columnMenu: true,
groupable: true,
columns: [
{
field: "Id",
template: "#=Id#",
hidden: true
},
{
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50,
filterable: false,
sortable: false
},
{
field: "Name",
title: "Name",
filterable: true
},
{
title: "Action",
command: [
{ name: "Edit", text: "", imageClass: "k-icon k-edit", click: Update },
{
name: "destroy",
text: "@T("Admin.Common.Delete")"
}
],
}
]
});
$('#mastercheckbox').click(function () {
$('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
});
$('#delete-selected').click(function(e) {
if (confirm('Do you want to delete it ?')) {
if (selectedIds.length == 0) {
return false;
}
e.preventDefault();
var postData = {
abc: selectedIds
};
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("Deletemultiselect", "Emp"))",
data: postData,
complete: function (data) {
//reload grid
var grid = $('#Emp-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
return false;
}
else {
var grid = $('#Emp-grid').data('kendoGrid');
grid.dataSource.read();
}
});
$('#Emp-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function (e) {
var $check = $(this);
if ($check.is(":checked") == true) {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked == -1) {
//add id to selectedIds.
selectedIds.push($check.val());
}
}
else {
var checked = jQuery.inArray($check.val(), selectedIds);
if (checked > -1) {
//remove id from selectedIds.
selectedIds = $.grep(selectedIds, function (item, index) {
return item != $check.val();
});
}
}
});
function Update(e)
{
var window = $('#EditEmp');
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("Editp", "Emp"))",
data: { Id: dataItem.Id },
success: function (data) {
window.empty().append(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
if (!window.data('kendoWindow')) {
window.kendoWindow({
modal: true,
title: 'Edit Employee',
actions: ['Close'],
width: 430,
draggable: false,
resizable: false,
visible: false,
});
}
window.data('kendoWindow').center().open();
setTimeout(function () {
$('.k-overlay').css('display', 'block');
}, 500);
}
});
</script>
plane gride
$("#serviceCallManagement-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("ServiceCallListKendoData","ServiceCallDetails"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: false,
serverSorting: false,
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
scrollable: false,
selectable: false,
columns:
[
{
field: "AccountNo",
title: "Account No.",
width:200
},
{
field: "accountName",
title: "account Name"
},
{
field: "ServiceTicketNo",
title: "Service Ticket No."
},
{
field: "ServiceCodeName",
title: "Service Code"
},
{
field: "EquipmentName",
title: "Equipment Name"
},
{
field: "EquipmentName",
title: "Equipment Name"
},
{
field: "CallLogUtc",
title: "Ticket Created",
template: "#= kendo.toString(kendo.parseDate(CallLogUtc, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},
{
field: "ResolutionUtc",
title: "Scheduled Date"
},
{
field: "ServiceResolutionStatusName",
title: "Status"
}
]
} );
how to add templet fied in kendo gride
{
field: "ModelName",
title: "Model Name",
template: '<a href="/admin/Modelmaster/Edit/#=Id#">#=ModelName#</a>'
},
add kendo confirm popup in mvc
<script id="delete-confirmation2" type="text/x-kendo-template">
<div style="width:200px">
<p class="delete-message">Do you want to delete(s) it?</p>
<button class="delete-confirm k-button">Yes</button>
<button class="delete-cancel k-button">No</button>
</div>
</script>
javascript code
$('#delete-selected').click(function()
{
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation2").html())
.center().open();
kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function() {
if ($(this).hasClass("delete-confirm")) {
$.ajax({
cache: false,
type: "POST",
url: "@(Url.Action("Deletemultiselect", "ModelMaster"))",
data: {Mid:selectedIds},
complete: function (data) {
var grid = $('#Modelmaster-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
kendoWindow.data("kendoWindow").close();
return false;
}
else
{
var grid = $('#Modelmaster-grid').data('kendoGrid');
grid.dataSource.read();
kendoWindow.data("kendoWindow").close();
}
})
});
gride no record
, dataBound: function ()
{
if ($('#serviceCallManagement-grid').find("tr").length==1) {
$('#serviceCallManagement-grid').find('tbody')
.append('<tr class="kendo-data-row"><td colspan="10" style="text-align:center"><b>No Results Found!</b></td></tr>');
}
}
filter
filterable: true,
adding colour in gride cell
dataBound: function ()
{
var grid = this;
grid.tbody.find('>tr').each(function(){
var dataItem = grid.dataItem(this);
if(!dataItem.Status)
{
(this).cells[5].style.color = "#bb0000";
$(this).addClass('disableRow');
}
else{
(this).cells[5].style.color = "#068700";
}
})
}
for search
function additionalData() {
return {
OrdermanagementSearch: $('#txtSearch').val(),
};
}
//search button
$('#btnSearch').click(function () {
//search
var grid = $('#orderManagement-grid').data('kendoGrid');
grid.dataSource.page(1); //new search. Set page size to 1
//grid.dataSource.read(); we already loaded the grid above using "page" function
return false;
});
$('#txtSearch').keydown(function (event) {
if (event.keyCode == 13) {
$("#btnSearch").click();
return false;
}
});
complet gride code
$(function () {
$('#AID').change(function () {
if ($('#AID :selected').text() != "Select") {
$('#btnTicket').removeAttr('disabled');
$.ajax({
cache: false,
type: "Get",
url: "/OrderManagement/GetAccountNumber",
data: { Id: $(this).val() },
success: function (data) {
$('#lbacountnumber').text(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
}
else {
$('#lbacountnumber').text('');
$('#btnTicket').attr('disabled', 'disabled');
}
});
$('#txtSearch').val('Search');
$('#txtSearch').focus(function () {
$(this).val('');
});
$('#txtSearch').blur(function () {
if ($(this).val().length == 0)
$('#txtSearch').val('Search');
});
$("#orderManagement-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("OrdermanagementListKendoData", "OrderManagement"))",
type: "POST",
dataType: "json",
data: additionalData
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: false,
serverSorting: false,
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
sortable: {
mode: "single",
allowUnsort: false
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
scrollable: false,
selectable: true,
change: onChange,
columns:
[
{
field: "Id",
template: "#=Id#",
hidden: true
},
{
field: "AccountId",
template: "#=AccountId#",
hidden: true
},
{
field: "SalesOrderNumber",
title: "Sales Order No.",
template: '<a href="/admin/SalesOrder/Index/#=Id#">#=SalesOrderNumber#</a>'
},
{
field: "AccountNo",
title: "Account No.",
},
{
field: "AccountName",
title: "Account Name",
filterable: true
},
{
field: "OrderPlacedDate",
title: "Order Placed Date",
template: "#= (OrderPlacedDate == null) ? '' : kendo.toString(OrderPlacedDate, 'MM/dd/yyyy') #",
type: "date",
format: "{0:MM/dd/yyyy}",
filterable: true,
},
{
field: "DeliveryDate",
title: "Order Delivery Date",
template: "#= (DeliveryDate == null) ? '' : kendo.toString(DeliveryDate, 'MM/dd/yyyy') #",
type: "date",
format: "{0:MM/dd/yyyy}",
filterable: true,
},
{
field: "PlaceToDeliver",
title: "Place To Deliver",
filterable: true,
},
{
field: "Status",
title: "Status",
filterable: true,
}
], dataBound: function ()
{
if ($('#orderManagement-grid').find("tr").length==1) {
$('#orderManagement-grid').find('tbody')
.append('<tr class="kendo-data-row"><td colspan="7" style="text-align:center"><b>No Results Found!</b></td></tr>');
}
var grid = this;
grid.tbody.find('>tr').each(function(){
var dataItem = grid.dataItem(this);
if(dataItem.Status=="Order Placed")
(this).cells[7].style.color = "#bb0000";
else if(dataItem.Status=="Awaiting Approval")
(this).cells[7].style.color = "#0000FF ";
else
(this).cells[7].style.color = "#068700";
})
}
} );
function onChange(e) {
var grid = $('#orderManagement-grid').data('kendoGrid');
var selectedItem = grid.dataItem(grid.select());
location.href= "/SalesOrder/Index/"+selectedItem.AccountId+"?OrderId="+selectedItem.Id;
}
function additionalData() {
return {
OrdermanagementSearch: $('#txtSearch').val(),
};
}
$('#btnSearch').click(function () {
var grid = $('#orderManagement-grid').data('kendoGrid');
grid.dataSource.page(1);
return false;
});
$('#txtSearch').keydown(function (event) {
if (event.keyCode == 13) {
$("#btnSearch").click();
return false;
}
});
});
how to add image in kendo gride.
{
field: "Automatic",
title: "Automatic",
template: '#if(Automatic){#<span class="checkimg"></span>#} else {##}#',
filterable: true,
},
filterable ingride
$("#equipment-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("IndexKendoData", "Equipment"))",
type: "POST",
dataType: "json",
data: additionalData
},
destroy: {
url: "@Html.Raw(Url.Action("MarkedAsDeleted", "Equipment"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
//'AcDocumentType.AcDocumentTypeName': { editable: false, type: "string" } ,
EquipmentID: { editable: false, type: "string" } ,
//StartDate: { editable: true, type: "date" } ,
//EndDate: { editable: true, type: "date" } ,
CostPrice: { editable: false, type: "number" }
}
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: false,
serverSorting: false
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
sortable: {
mode: "single",
allowUnsort: false
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
scrollable: false,
selectable: true,
change: onChange,
columns: [
{
field: "Id",
title:"Check",
attributes: { style: "text-align:center" },
template: "<a href='Equipment/Edit/#=Id#'><input type='checkbox' value='#=Id#' class='checkboxGroups'/></a>",
width: 50,
filterable: false,
attributes: {
"class": "tbldefault"},
altRowTemplate:'<a href="Equipment/Edit/#=Id#"><tr><td></td></tr></a>'
},
{
field: "EquipmentID",
title: "@T("Admin.Equipment.Fields.EquipmentID")",
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=EquipmentID#</a>'
},
{
field: "SerialNo",
title: "@T("Admin.Equipment.Fields.SerialNo")",
width: 100,
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=SerialNo#</a>'
},{
field: "PictureId",
title:"Image",
template: '<a href="Equipment/Edit/#=Id#"><img src="#=PictureId#" /></a>'
},{
field: "ManufacturerName",
title: "@T("Admin.Equipment.Fields.ManufacturerID")",
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=ManufacturerName#</a>'
},{
field: "ModelName",
title: "@T("Admin.Equipment.Fields.ModelID")",
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=ModelName#</a>'
}, {
field: "ModelTypeName",
title: "@T("Admin.Equipment.Fields.ModelTypeID")",
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=ModelTypeName#</a>'
},{
title: "Account Address"
}, {
field: "StatusName",
title: "@T("Admin.Equipment.Fields.StatusID")",
filterable: true,
template: '<a href="Equipment/Edit/#=Id#">#=StatusName#</a>'
}, {
field: "CostPrice",
//title: "@T("Admin.Equipment.Fields.SellPrice")",
title: "Cost($)",
filterable: {
operators: {
number: {
eq: "Is equal to",
neq: "Is not equal to",
gte: "Is after or equal to",
gt: "Is after",
lte: "Is before or equal to",
lt: "Is before",
}
}
},
template: '<a href="Equipment/Edit/#=Id#">#=CostPrice#</a>'
},{
title: "Action",
command: [{
name: "Delete", text:"", imageClass: "k-icon k-delete", click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
//*******
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();
kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function() {
if ($(this).hasClass("delete-confirm")) {
var dataSource = $("#equipment-grid").data("kendoGrid").dataSource;
dataSource.remove(dataItem);
dataSource.sync();
}
kendoWindow.data("kendoWindow").close();
})
.end()
}
}],
//width: 200
}
]
} );
});
function onChange(e) {
var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
var isAction = eventTarget.parent().hasClass('k-button k-button-icontext k-grid-delete');
var grid = $('#equipment-grid').data('kendoGrid');
var selectedItem = grid.dataItem(grid.select());
var equipmentId = selectedItem.Id;
if(!isAction)
{
var equipmentDetailsActionUrl = '@Html.Raw(Url.Action("Edit", "Equipment", new { Id = "equipmentidplaceholder" }))';
equipmentDetailsActionUrl = equipmentDetailsActionUrl.replace("equipmentidplaceholder", equipmentId);
setLocation(equipmentDetailsActionUrl);
}
else
{
$.ajax({
cache:false,
type: "POST",
url: "@(Url.Action("MarkedAsDeleted", "Equipment"))",
data: { "Id":equipmentId },
success: function (data) {
$('#equipment-grid').data('kendoGrid').dataSource.read();
$('#equipment-grid').data('kendoGrid').dataSource.page(1);
$('#equipment-grid').data('kendoGrid').refresh();
},
error:function (xhr, ajaxOptions, thrownError){
alert('Failed to add product picture.');
}
});
}
}
function additionalData() {
return {
SearchEquipment: $('#@Html.FieldIdFor(model => model.SearchEquipment)').val(),
}
}
Example of kendo gride for some field edit
$("#EquipmentLocation-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("KendoDataLocation", "Barcode", new { Id = Model.equipmentLocationModel.EquipmentId }))",
type: "POST",
dataType: "json",
data: additionalData
},update: {
url:"@Html.Raw(Url.Action("EditLocation", "Barcode"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "@Html.Raw(Url.Action("DeleteLocation", "Barcode"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Location: { editable: false, type: "string" },
AccountName: { editable: false, type: "string" },
AccountAddress: { editable: false, type: "string" },
WarehouseName: { editable: false, type: "string" },
RouteNo: { editable: false, type: "string" },
PriorityService: { editable: false, type: "string" },
FromDate: { editable: true, type: "date" },
ToDate: { editable: true, type: "date" },
}
}
},
requestEnd: function (e) {
if (e.type == "destroy" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// showError(e.errors);
this.cancelChanges();
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: false,
serverSorting: false,
},
filterable: {
extra:false,
operators: {
string:{ contains: "Contains"}
}
},
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
editable: {
confirmation: true,
mode: "inline"
},
scrollable: false,
selectable: true,
change: onChange,
columns: [{
field: "Id",
template: "#=Id#",
hidden: true,
width:"5%"
},{
field: "Location",
title: "Location",
template: '#if(IsCustomerLocation){#Account#} else if(IsWarehouse){#Warehouse#} else if(IsRoute){#Route#} #',
template: '#if(OnHold){#<input type="checkbox" checked="checked" value="#=OnHold#" name="cb" disabled="disabled" />#} else{#<input type="checkbox" value="#=OnHold#" name="cb" disabled="disabled" />#} #',
filterable: true,
width:"10%"
},{
field: "AccountName",
title: "Account Name",
filterable: true,
width:"10%"
},{
field: "AccountAddress",
title: "Account Address",
//template: '#if(IsCustomerLocation){#AccountAddress#} else {#----#}#',
filterable: true,
width:"15%"
},{
field: "WarehouseName",
title: "Warehouse Name",
// template: '#if(IsWarehouse){#WarehouseName#} else {#----#}#',
filterable: true,
width:"10%"
},{
field: "RouteNo",
title: "Route No",
//template: '#if(IsRoute){#RouteNo#} else {#----#}#',
filterable: true,
width:"5%"
},{
field: "PriorityService",
title: "Priority Service",
//template: '#if(PriorityService){#Yes#} else {#No#}#',
filterable: true,
width:"5%"
},{
field: "FromDate",
title: "From Date",
type: "date",
format: "{0:MM/dd/yyyy}",
filterable: true,
width:"15%"
},{
field: "ToDate",
title: "To Date",
type: "date",
format: "{0:MM/dd/yyyy}",
filterable: true,
width:"15%"
},{
title: "Action",
width:"10%",
command: [{
name: "edit",
text: "",
imageClass: "k-icon k-edit", click: function (e) {
//showError(e.errors);
}
}, {
name: "Delete", text:"", imageClass: "k-icon k-delete", click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
//*******
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
width:500,
height:200
});
kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();
kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function() {
if ($(this).hasClass("delete-confirm")) {
var dataSource = $("#EquipmentLocation-grid").data("kendoGrid").dataSource;
dataSource.remove(dataItem);
dataSource.sync();
}
kendoWindow.data("kendoWindow").close();
})
.end()
}
}]
}
],
dataBound: function ()
{
var cnt = $('#EquipmentLocation-grid').data('kendoGrid').dataSource.total();
if (cnt == 0) {
$('#EquipmentLocation-grid').find('tbody')
.append('<tr class="kendo-data-row"><td colspan="6" style="text-align:center"><b>No Results Found!</b></td></tr>');
}
}
});
//search button
$('#btnSearch').click(function () {
//search
var grid = $('#EquipmentLocation-grid').data('kendoGrid');
grid.dataSource.page(1); //new search. Set page size to 1
//grid.dataSource.read(); we already loaded the grid above using "page" function
return false;
});
$("#@Html.FieldIdFor(model => model.SearchEquipmentLocation)").keydown(function (event) {
if (event.keyCode == 13) {
$("#btnSearch").click();
return false;
}
});
function additionalData() {
return {
SearchEquipmentLocation: $('#@Html.FieldIdFor(model => model.SearchEquipmentLocation)').val()
};
}
function showError(message){
var window = $('#errorMessage');
if (!window.data('kendoWindow')) {
window.kendoWindow({
modal: true,
title: 'Confirm',
actions: ['Close'],
width:500,
height:200
});
}
window.data('kendoWindow').center().open();
return false;
}
function onChange(e) {
//var grid = $('#Notes-grid').data('kendoGrid');
//var selectedItem = grid.dataItem(grid.select());
//var NoteId = selectedItem.Id;
//setLocation(NoteDetailsActionUrl);
}
Example date validation in kendo datepicker
function startChange() {
var fromDate = start.value(),
toDate = end.value();
if (fromDate) {
fromDate = new Date(fromDate);
fromDate.setDate(fromDate.getDate());
end.min(fromDate);
$("#EndDate").data("kendoDatePicker").value(fromDate);
} else if (toDate) {
start.max(new Date(toDate));
} else {
toDate = new Date();
start.max(toDate);
end.min(toDate);
}
}
function endChange() {
var toDate = end.value(),
fromDate = start.value();
if (toDate) {
toDate = new Date(toDate);
toDate.setDate(toDate.getDate());
start.max(toDate);
} else if (fromDate) {
end.min(new Date(fromDate));
} else {
toDate = new Date();
start.max(toDate);
end.min(toDate);
}
}
var start = $("#StartDate").kendoDatePicker({
change: startChange,
min: new Date(),
}).data("kendoDatePicker");
var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
// $("#StartDate").data("kendoDatePicker").value(todayDate);
$("#StartDate").data("kendoDatePicker");
var end = $("#EndDate").kendoDatePicker({
change: endChange
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
// $("#EndDate").data("kendoDatePicker").value(todayDate);
$("#EndDate").data("kendoDatePicker");
END DATE PICKER.
$(".breadcrumbList li:first-child").after('<li><a href="/Admin/Account/">Account</a></li>');
how to display image in gride
{
field: "PictureUrl",
title: "Product Image",
template: '<img src="#=PictureUrl#" height=50 width=50 />',
},
controller
string pictureUrl = relatedProductConversions.ProductPictures.FirstOrDefault() == null ? string.Empty : _pictureService.GetPictureUrl(relatedProductConversions.ProductPictures.FirstOrDefault().Picture);
pictureUrl = setPictureUrl(pictureUrl);
private string setPictureUrl(string pictureUrl)
{
if (pictureUrl == string.Empty)
{
pictureUrl = "/Content/images/thumbs/default-image_75.gif";
}
else
{
Uri pictureUri = new Uri(pictureUrl);
string hostNameOnlyUrl = pictureUri.Scheme + Uri.SchemeDelimiter + pictureUri.Host + ":" + pictureUri.Port;
//pictureUrl = pictureUrl.Replace("content/", "Administration/content/");
//pictureUrl = pictureUrl.Replace("thumbs/", string.Empty);
pictureUrl = pictureUrl.Replace(hostNameOnlyUrl, string.Empty);
}
return pictureUrl;
}
How to add image in kendo gride
{
title: "Website",
field: "IsPublish",
template: '#if(IsPublish){#<img src="@Url.Content("~/Administration/Content/images/icnwebsitePublished.png")" />#} else {# <img src="@Url.Content("~/Administration/Content/images/icnwebsiteNotPublished.png")" /> #}#',
},
----------------------
_cycleCountService.GetWarehoueEmployees(0, int.MaxValue).ToList().ConvertAll(m => new Metadata() { Value = m.Id, Text = m.SystemName });
how to remove edit button from kendo gride
, dataBound: function ()
{
$("#RePackagingSummary-grid tbody tr .k-grid-edit").each(function () {
var currentDataItem = $("#RePackagingSummary-grid").data("kendoGrid").dataItem($(this).closest("tr"));
if (currentDataItem.Sid != 1) {
$(this).remove();
}
});
}
how to disable edit button from kendo gride
, dataBound: function ()
{
$("#RePackagingSummary-grid tbody tr .k-grid-edit").each(function () {
var currentDataItem = $("#RePackagingSummary-grid").data("kendoGrid").dataItem($(this).closest("tr"));
if (currentDataItem.Sid != 1) {
$(this).addClass("k-state-disabled");
}
});
}
how to hide delete & edit button in kendor gride
imageClass: "k-icon k-delete",
dataBound: function () {
$("#Address-grid tbody tr").each(function () {
var currentDataItem = $("#Address-grid").data("kendoGrid").dataItem($(this).closest("tr"));
if (currentDataItem.IsDefault) {
$(this).find(".k-icon").hide();
}
});
}
---------------------------------------------------------------------------
how to hide delete button & checkbox from a gride
$("#Banner-grid tbody tr").each(function () {
var currentDataItem = $("#Banner-grid").data("kendoGrid").dataItem($(this).closest("tr"));
if (currentDataItem.IsPublish) {
$(this).find(".k-delete,.checkboxGroups").hide();
}
});
-------------------------------------------------------------------------------------------------------------------
if($('#RePackagingSummary-grid').find("tr td").text()=="No Results Found!")
window.location.href=window.location.href;
how to disable all rows in a kendo gride
dataBound: function () {
var grid = this;
grid.tbody.find('>tr').each(function(){
var dataItem = grid.dataItem(this);
$(this).addClass('disableRow');
$(this).find(':input').attr('disabled', 'disabled');
//$(this).find(':select').attr('disabled', 'disabled');
//$(this).find(':img').attr('disabled', 'disabled');
})
}
summaryVM.USER = _cycleCountService.GetWarehoueEmployees(0, int.MaxValue).ToList()
click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
alert(dataItem.ResultId)
}
gride refresh
var grid = $('#grid').data('kendoGrid');
grid.dataSource.page(1);
---------------------------------------------------------------------------------
_vendorAddressDetailService.GetAllVendorAddressDetails(command.Page - 1, command.PageSize, vendorid);
var gridModel = new DataSourceResult
{
Data = addresses.Select(x => new
{
Id = x.Id,
StreetAddress1 = x.StreetAddress1,
StreetAddress2 = x.StreetAddress2,
StreetName = string.Format("{0},{1}", x.StreetAddress1, x.StreetAddress2),
City = x.City,
ZipCode = x.ZipCode,
CountryName = x.Country.Name,
StateName = x.State.Name,
IsDefault = x.IsDefault
}).OrderByDescending(b => b.IsDefault).ToList(),
Total = addresses.Count()
};
----------------------------------------------------------------------------------$('body').on('keydown', '[data-role="datepicker"]', function () {
return false;
});
template: "#='$'+CostPrice #",
Add bedcrom in each page
<div class="breadcrumb-bg">
<ol class="breadcrumb bread-primary">
<li><a href="@Url.Action("Index", "VendorPortal")">Home</a></li>
<li><a href="@Url.Action("Info", "VendorPortal")">Vendor Details</a></li>
<li class="active">Financial</li>
</ol>
</div>
how to validate a number field in kendo gride .
CostPrice: { editable: true, type: "number",validation: { required: true}}
how to validate a date field in kendo gride.
var date = new Date();
var currentYear = date.getFullYear();
var mindate = "01/01/" + currentYear;
var maxdate = "12/31/" + currentYear;
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Date: { editable: true, type: "date", format: "{0:MM/dd/yyyy}", validation: { required: true, min: new Date(mindate), max: new Date(maxdate) } },
Month: { editable: false, type: "string" },
HolidayName: {
editable: true, type: "string", validation: {
required: true,
maxlength:
function (input) {
if (input.val().length > 80) {
input.attr("data-maxlength-msg", "Max length is 80");
return false;
}
return true;
}
}
},
Id: { editable: false, type: "number" }
}
}
},
public ActionResult FillGride(DataSourceRequest command)
{
var discounts1 = _discountService.GetAllDiscounts(null, null, true);
var discounts = from DiscountsQuery in discounts1
from DiscountTypeQuery in _cPDiscountService.GetAllDiscountType()
from DiscountStatusQuery in _cPDiscountService.GetAllDiscountStatus()
where DiscountsQuery.DiscountTypeId == DiscountTypeQuery.Id && DiscountsQuery.StatusId == DiscountStatusQuery.Id
select new { DiscountsQuery.Id, DiscountsQuery.Name, DiscoutType = DiscountTypeQuery.TypeName, DiscountsQuery.DiscountAmount, DiscountsQuery.StartDateUtc, DiscountsQuery.EndDateUtc,DiscountsQuery.UsePercentage,DiscountsQuery.DiscountPercentage, DiscountStatusQuery.StatusName, PrimaryStoreCurrencyCode = _currencyService.GetCurrencyById(_currencySettings.PrimaryStoreCurrencyId).CurrencyCode, };
var gridModel = new DataSourceResult
{
Data = discounts,
Total = discounts.Count()
};
return Json(gridModel);
}
how to add date picker
$('#StartDate').kendoDatePicker();
how to add time picker
$('#StartTime').kendoTimePicker({ format: "h:mm tt" });
numaric validation
function fxdecimal(value) {
var RE = /^\d*\.?\d*$/;
if (RE.test(value)) {
return true;
} else {
return false;
}
}
$('#DisplayOrder').keyup(function () {
if (fxdecimal($(this).val()) == false) {
check1 = 1;
$('#lbDo').text('Please enter number only.');
$('#DisplayOrder').val('');
$('#DisplayOrder').focus();
return false;
}
else
{
check1 = 0;
$('#lbDo').text('');
}
});
--------------------------
template: '#if(Published){#<a href="Edit/#=Id#" style="cursor:pointer";"><img src="@Url.Content("~/Administration/Content/images/icnwebsitePublished.png")" /></a>#} else {# <a href="Edit/#=Id#"><img src="@Url.Content("~/Administration/Content/images/icnwebsiteNotPublished.png")" /></a> #}#',
},
-----------------------------------
$("#MaximumDiscountedQuantity").kendoNumericTextBox({
format: "#",
decimals: 0,
min: 0//<--- set min as 0
});
-----------------------------------------------------------
how to pass a list in kendo gride
$("#Upload-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("FillUploadGride", "Banner"))",
type: "POST",
dataType: "json",
data: { Ids: @Html.Raw(Json.Encode(Model.BannerIds)) }
}
},
public JsonResult FillUploadGride(DataSourceRequest command,List<int> Ids)
{
var gridModel = new DataSourceResult();
var data = _bannerService.GetAllBanner(command.Page - 1, command.PageSize);
var query = (from x in data
select new
{
x.Id,
x.PictureId,
Image = GetUrl(_pictureService.GetPictureUrl(_pictureService.GetPictureById(x.PictureId.Value))),
x.Title,
}
);
gridModel.Data = query;
gridModel.Total = query.Count();
return Json(gridModel, JsonRequestBehavior.AllowGet);
}
----------------------------------------------------------------------------------
how to click on a image in kendo gride it is open a new page
title: "Image",
field: "PictureId",
template: '<a href="#=Image#" target="_blank" class="img-responsive gridImage"><img alt="#=PictureId#" src="#=Image#" width="100" height="100" /><a/>',
----------------------------------------------------------------------------------
how to open dynamic popup
<div id='serialNoExists' style='display:none;'>
<div>
<h5>
</h5>
</div>
<div class="options submitStyle k-button-add">
<input id="closeSerialNoExists" type="button" value="OK" class="k-button" />
</div>
</div>
function openPopUp(title, message) {
var window = $('#serialNoExists');
window.find('h5').html(message);
window.kendoWindow({
modal: true,
title: title,
actions: ['Close'],
width: 400
});
window.data('kendoWindow').center().open();
}
$('#closeSerialNoExists').click(function () {
var window = $('#serialNoExists');
window.data('kendoWindow').close();
});
@if (TempData["IsSerialNoExists"] != null
&& TempData["IsSerialNoExists"] != string.Empty)
{
<text>
openPopUp('Message', 'Serial no. already exists.');
</text>
}
------------------------------------
dataBound: function () {
var cnt = $('#products-grid').data('kendoGrid').dataSource.total();
if (cnt == 0) {
$('#products-grid').find('tbody')
.append('<tr class="kendo-data-row"><td colspan="12" style="text-align:center"><b>No Results Found!</b></td></tr>');
}
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (!dataView[i].Status) {
var uid = dataView[i].uid;
$(this.tbody).find("tr[data-uid=" + uid + "]").addClass("DeActiveRow");
$(this.tbody).find("tr[data-uid=" + uid + "]").find("input,button,textarea,select,img").attr("disabled", "disabled");
$(this.tbody).find("tr[data-uid=" + uid + "]").find("a").attr("href", "#");
var anchores = $(this.tbody).find("tr[data-uid=" + uid + "]").find("a");
$(anchores).css({cursor:"default"});
$(anchores).find('span').parent().css({cursor:"pointer"});
}
}
var grid = this;
if(dataView.length>0)
{
grid.tbody.find('>tr').each(function(){
var dataItem = grid.dataItem(this);
if(dataItem.Status)
{
$(this).find(".k-grid-Activate").hide();
}
else{
$(this).find(".k-grid-Activate").show();
}
})
}
}
});
---------------------------------------------------------------------
$(document).ready(function () {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate() - 1;
var todayDate = (month < 10 ? '0' : '') + month + '/' +
(day < 10 ? '0' : '') + day + '/' +
d.getFullYear();
$("#DOB").kendoDatePicker(
{
format: "MM/dd/yyyy",
max: new Date(todayDate)
}).attr('readonly', 'true').keypress(function (event) {
if (event.keyCode == 8) {
event.preventDefault();
};
});
});
-----------------------------------------------------------
$('#txtLoadStartTime').data("kendoTimePicker").enable(false);
---------------------------------------------------------------
$(".breadcrumb-bg li:first-child").after('<li><a href="#">Home</a></li>');
$(".breadcrumb-bg li:nth-child(2)").replaceWith('<li><a href="/B2CCustomer/CustomerLogin">Login</a></li>');
$(".breadcrumb-bg li:nth-child(3)").replaceWith('<li><a href="/B2CCustomer/ForgotPassword">Forgot Password</a></li>');
$(".breadcrumb-bg li:last-child").remove();
----------------------------------------------------------------------
how to rename kendo file control
$("#Pictures").closest(".k-upload").find("span").text("Upload a picture");
No comments:
Post a Comment