Questions on UI for ASP.NET Core Forum

1 answer

234 views

Trigger toggle event

Hello,

I know that it is possible to trigger the click event of a toolbar button like this:

$("#tlbMitglieddokumente > .k-button").click();

but how to trigger the toggle Event?

robert

Toolbar

answered on 19 Oct 2017

2 answers

137 views

how to show details from foreign key in command button

Hi,

after i try the demo http://demos.telerik.com/aspnet-core/grid/custom-command.

I have an issue showing details data from foreignkey , if you confused what im talking about , here's my code to give you some insight.

View :

<div style="padding:10px;" >

@(Html.Kendo().Grid<DevRedsMk3.Models.MasterOpportunity>()

.Name("Opportunity")

.Columns(columns =>

{

columns.Bound(p => p.OpportunityId).Title("Opportunity ID");

columns.Bound(p => p.OpportunityName).Title("Opportunity Name");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectId").Hidden(true).Title("Prospect Id");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectName").Hidden(true).Title("Prospect Name");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Type").Hidden(true).Title("Type");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Email").Hidden(true).Title("Email");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Phone").Hidden(true).Title("Phone");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Address").Hidden(true).Title("Address");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "IdNumber").Hidden(true).Title("ID Number");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Npwp").Hidden(true).Title("NPWP");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "EmployeeId", "EmployeeId").Hidden(true).Title("Sales Person");

columns.Command(command => command.Custom("Details").Click("showDetails")).Width(100);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(185);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Scrollable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

.Model(model => { model.Id(p => p.OpportunityId);

model.Field(p => p.OpportunityId).Editable(false);

})

.Read(read => read.Action("CustomCommand3_Read", "MasterOpportunity"))

.Read(read => read.Action("List", "MasterOpportunity"))

.Create(create => create.Action("Create", "MasterOpportunity"))

.Update(update => update.Action("Update", "MasterOpportunity"))

)

@(Html.Kendo().Window().Name("Details")

.Title("Opportunity Details")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(600)

)

<script type="text/x-kendo-template" id="template">

<div id="details-container">

<h2>#= OpportunityName #</h2>

<em>#= OpportunityId #</em>

<dl>

<dt>Prospect ID: #= ProspectId #</dt>

@* <dt>Name: #= ProspectName #</dt>

<dt>Type: #= Type #</dt>

<dt>Email: #= Email #</dt>

<dt>Address: #= Address #</dt>

<dt>Phone : #= Phone #</dt>

<dt>KTP: #= IdNumber #</dt>

<dt>NPWP: #= Npwp #</dt>

<dt>Sales Person: #= EmployeeId#</dt>*@

</dl>

</div>

</script>

<script type="text/javascript">

var detailsTemplate = kendo.template($("#template").html());

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var wnd = $("#Details").data("kendoWindow");

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

</div>

you can see the commented code in <div id="details-container"> , im not able to show that, so please help me with it.. :)

here's my controller :

namespace DevRedsMk3.Controllers

{

public class OpportunityController : Controller

{

private readonly dbdevredsContext _context;

public OpportunityController(dbdevredsContext context)

{

_context = context;

}

// GET: /<controller>/

public IActionResult Index()

{

var prospects = _context.MasterProspect.ToList();

ViewData["prospects"] = prospects;

ViewData["defaultMasterProspect"] = prospects.First();

var employee = _context.MasterEmployee.ToList();

ViewData["employee"] = employee;

ViewData["defaultMasterEmployee"] = employee.First();

return View();

}

public IActionResult Error()

{

return View();

}

namespace DevRedsMk3.Controllers

{

public class MasterOpportunityController : Controller

{

private readonly dbdevredsContext _context;

public MasterOpportunityController(dbdevredsContext context)

{

_context = context;

}

public IActionResult List([DataSourceRequest] DataSourceRequest request)

{

return Json(_context.MasterOpportunity.ToDataSourceResult(request));

}

//public ActionResult CustomCommand3_Read([DataSourceRequest] DataSourceRequest request)

//{

// return Json(_context.MasterEmployee.ToDataSourceResult(request));

//}

[HttpPost]

public ActionResult Update([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity master)

{

if (master != null && ModelState.IsValid)

{

_context.MasterOpportunity.Update(master);

_context.SaveChanges();

}

return Json(new[] { master }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Destroy([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)

{

_context.Remove(opportunity);

_context.SaveChanges();

return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Create([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)

{

if (opportunity != null && ModelState.IsValid)

{

_context.Add(opportunity);

_context.SaveChanges();

}

return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));

}

Grid

answered on 18 Oct 2017

1 answer

319 views

Grid checkbox selection not working

Hello,

the grid Checkbox selection is not working if I set the grid selection mode explicitly to singe or multiple:

.Selectable(s => s.Mode(GridSelectionMode.Single))
or
.Selectable(s => s.Mode(GridSelectionMode.Multiple))

If I doesn't set it it works like expected...

Is this a bug? (see Video here: https://www.screencast.com/t/RsiHfg9Oxr)

robert

Grid

answered on 16 Oct 2017

1 answer

141 views

Detail template wont show

hello,

i want to show my data in my grid using Detail template, http://demos.telerik.com/aspnet-core/grid/detailtemplate

can anyone correct my code and show me what's wrong ? ,

View :

<div>

@(Html.Kendo().Grid<DevRedsMk3.Models.MasterEmployee>()

.Name("Employees")

.Columns(columns =>

{

// columns.Bound(p => p.EmployeeId);

columns.Bound(p => p.EmployeeName);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(185);

})

.ToolBar(toolbar => toolbar.Create())

.ClientDetailTemplateId("template")

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

// .Model(model => model.Id (p => p.EmployeeId))

// .Read(read => read.Action("Employee_Read", "MasterEmployee"))

// .Read(read => read.Action("List", "MasterEmployee"))

.Create(create => create.Action("Create", "MasterEmployee"))

)

.Events (events => events.DataBound("dataBound"))

)

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<DevRedsMk3.Models.MasterEmployee>()

.Name("Employees_#=EmployeeId#")

.Columns(columns =>

{

columns.Bound(p => p.Address);

columns.Bound(p => p.Phone);

columns.Bound(p => p.Email);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Employee_Read", "MasterEmployee", new { employeeID = "#=EmployeeId"}))

)

.ToClientTemplate()

)

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

<style>

.k-detail-cell .k-tabstrip .k-content {

padding: 0.2em;

}

.employee-details ul {

list-style: none;

font-style: italic;

margin: 15px;

padding: 0;

}

.employee-details ul li {

margin: 0;

line-height: 1.7em;

}

.employee-details label {

display: inline-block;

width: 90px;

padding-right: 10px;

text-align: right;

font-style: normal;

font-weight: bold;

}

</style>

</div>

Controller :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using DevRedsMk3.Models;

using Microsoft.AspNetCore.Mvc;

namespace DevRedsMk3.Controllers

{

public class MasterEmployeeController : Controller

{

private readonly dbdevredsContext _context;

public MasterEmployeeController(dbdevredsContext context)

{

_context = context;

}

public IActionResult List([DataSourceRequest] DataSourceRequest request)

{

return Json(_context.MasterEmployee.ToDataSourceResult(request));

}

public IActionResult Employee_Read([DataSourceRequest]DataSourceRequest request, int employeeID)

{

return Json(_context.MasterEmployee.ToDataSourceResult(request));

}

[HttpPost]

public ActionResult Update([DataSourceRequest]DataSourceRequest request, Models.MasterEmployee master)

{

if (master != null && ModelState.IsValid)

{

_context.MasterEmployee.Update(master);

_context.SaveChanges();

}

return Json(new[] { master }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Destroy([DataSourceRequest]DataSourceRequest request, Models.MasterEmployee employee)

{

_context.Remove(employee);

_context.SaveChanges();

return Json(new[] { employee }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Create([DataSourceRequest]DataSourceRequest request, Models.MasterEmployee employee)

{

if (employee != null && ModelState.IsValid)

{

_context.Add(employee);

_context.SaveChanges();

}

return Json(new[] { employee }.ToDataSourceResult(request, ModelState));

}

Grid

answered on 16 Oct 2017

3 answers

768 views

Dropdown in In-cell batch Editing Grid

Hello,

I'm using Grid Batch Editing (http://demos.telerik.com/aspnet-core/grid/editing) and I have 2 questions actually:

1) Is it somehow possible to allow dropdown buttons when editing records?

2) I have a nullable bool field and when I set it to "Not Set" (null), it will store the value as "false". Is this normal behaviour?

Thanks!

Grid

answered on 16 Oct 2017

1 answer

190 views

Issue with Grid , and how to properly bind foreignkey?

Hello,

anyone can help my problem ? ,

when im trying to create / edit data , my grid have some issue ( PIC 1)

OpportunityController :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using DevRedsMk3.Models;

using Microsoft.AspNetCore.Mvc;

namespace DevRedsMk3.Controllers

{

public class OpportunityController : Controller

{

private readonly dbdevredsContext _context;

public OpportunityController(dbdevredsContext context)

{

_context = context;

}

// GET: /<controller>/

public IActionResult Index()

{

var prospects = _context.MasterProspect.ToList();

ViewData["prospects"] = prospects;

ViewData["defaultMasterProspect"] = prospects.First();

var employee = _context.MasterEmployee.ToList();

ViewData["employee"] = employee;

ViewData["defaultMasterEmployee"] = employee.First();

return View();

}

public IActionResult Error()

{

return View();

}

MasterOpportunityController :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using DevRedsMk3.Models;

using Microsoft.AspNetCore.Mvc;

namespace DevRedsMk3.Controllers

{

public class MasterOpportunityController : Controller

{

private readonly dbdevredsContext _context;

public MasterOpportunityController(dbdevredsContext context)

{

_context = context;

}

public IActionResult List([DataSourceRequest] DataSourceRequest request)

{

return Json(_context.MasterOpportunity.ToDataSourceResult(request));

}

//public ActionResult CustomCommand3_Read([DataSourceRequest] DataSourceRequest request)

//{

// return Json(_context.MasterEmployee.ToDataSourceResult(request));

//}

[HttpPost]

public ActionResult Update([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity master)

{

if (master != null && ModelState.IsValid)

{

_context.MasterOpportunity.Update(master);

_context.SaveChanges();

}

return Json(new[] { master }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Destroy([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)

{

_context.Remove(opportunity);

_context.SaveChanges();

return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));

}

[HttpPost]

public ActionResult Create([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)

{

if (opportunity != null && ModelState.IsValid)

{

_context.Add(opportunity);

_context.SaveChanges();

}

return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));

}

VIEW :

<div>

@(Html.Kendo().Grid<DevRedsMk3.Models.MasterOpportunity>()

.Name("Opportunity")

.Columns(columns =>

{

columns.Bound(p => p.OpportunityId).Title("Opportunity ID");

columns.Bound(p => p.OpportunityName).Title("Opportunity Name");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectId").Title("Prospect Id");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectName").Title("Prospect Name");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Type").Title("Type");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Email").Title("Email");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Phone").Title("Phone");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Address").Title("Address");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "IdNumber").Title("ID Number");

columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Npwp").Title("NPWP");

//   columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "EmployeeId", "EmployeeName").Title("Sales Person");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(185);

})

.ToolBar(toolbar => toolbar.Create())

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(p => p.OpportunityId))

.Read(read => read.Action("CustomCommand3_Read", "MasterOpportunity"))

.Read(read => read.Action("List", "MasterOpportunity"))

.Create(create => create.Action("Create", "MasterOpportunity"))

)

</div>

Grid

answered on 13 Oct 2017

1 answer

427 views

Binding KendGrid data using Angularjs Service/WebAPI

Hi, I'm trying to bind the KendoGrid data source from Angularjs Service which is calling my WebAPI (.NetCore). I'm getting the data in JSON back from webApi and also it is getting populated correctly in my controller variable. However, kendo grid is not showing the data populated. If I use the same JSON output and hard code location variable with that data and bind it to kendo grid it shows the data.

Please help.

JSON from web API:

{"data":{"UsPk":"00000000-0000-0000-0000-000000000000","UsLastname":"Test","StatusCode":0,"Message":"Test"}

Angular Service:

///Get Users from the service
function getUserList() {
return $http.get('http://localhost:88/api/user/gettestuser/1')
.then(getUserListComplete)
.catch(getUserListFailed);

function getUserListComplete(response) {
console.log(response.data);
return response;
}

function getUserListFailed(error) {
logger.error(error.data);
return error.data;
}
};

Angular Controller code:

var grid = $("#grid").kendoGrid({
dataSource: {
data: vm.boardData,
dataType: "json"
},
editable: true,
height: 160,
columns: [
{ field: "usPk", title: "ID" },
{ field: "usLastname", title: "Last Name" }
]
}).data("kendoGrid");

function getUserList() {
return dataService.getUserList()
.then(function (response) {
angular.copy(response.data, vm.boardData);

})

.catch(function (showError) {
alert(showError);
vm.errorMessage = showError;
})
.finally(function () { vm.isBusy = false });
}

//Tried polpulating JSON object and assign it to grid below way as well
//for (var i = 0; i <= vm.boardData.length - 1; i++) {

//var person = {};
//person = {
// usPk: vm.boardData.data.usPk,
// usLastname: vm.boardData.data.usLastname,
//};
vm.grdDataSource = person;
//}

//vm.grdDataSource = JSON.stringify(vm.boardData.data, null, 4);

Grid

answered on 13 Oct 2017

1 answer

78 views

Issue Batch Grid Editing

Im using in grid batch editing and I noticed that it was not possible to change a bool? to "not set" (null).

When I select from the dropdown "Not set", it will change automatically to "false" when I navigate out of the field.

Grid

answered on 13 Oct 2017

1 answer

126 views

ComboBox in Grid

Is it possible to add a combo box inside the grid with statically set items, meaning the combobox is not populated from a datasource but the items are set in code and then having it to preselected to the value in the grid when loading.

Thanks

Grid