Questions on UI for ASP.NET Core Forum

1 answer

145 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

779 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

193 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

436 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

85 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

132 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

answered on 12 Oct 2017

2 answers

53 views

No groupExpand event...

Hello,

In Version 2017.3.913 the groupExpand Event not fires - all other events like the sort event fires...

robert

Grid

answered on 11 Oct 2017

7 answers

1.1K+ views

CheckBoxFor EditorTemplate in Grid

I have a checkbox in a grid:

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

I also have the following editor template:

@model Boolean

@Html.Kendo().CheckBoxFor(m => m)

During editing the checkbox editor template does show, however the checked state is always false even when the underlying data is true.

Grid

answered on 05 Oct 2017

3 answers

42 views

Search Tool inside forum not displaying any results

Your search function inside the actual forum does not return any results.

See attached picture.

General Discussions

answered on 04 Oct 2017

1 answer

132 views

Different editors in one column (grid.columns[1].editor) not working as expected

Hello,

I use the following approach to configure custom editing UI for the column: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
(see also Code below)

this works for textcolumns but there is a Problem with kendoNumericTextBox, kendoTimePicker and kendoDatePicker.
If I click into the column the corresponding editor displays but after editing the wrong value is given back to the text field - for me it looks like there is a formatting problem with the german language...

in this Video https://www.screencast.com/t/GkXn5uS7SH2 you can see what's going on:

changing a time value of 12:33.00 results in "Thu Sep 28 2017 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)"
changing a date value of 10.10.1999 results in "Wed Aug 19 1998 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)"
in float/decimal value the decimal seperator is in german a comma not a dot - if I type 124,25 the result is 12425.00

How to set the Editors (kendoNumericTextBox, kendoTimePicker and kendoDatePicker) that they give the correct value back?

$(function () {

var grid = $("#grdMitgliedprofile").data("kendoGrid");

grid.columns[1].editor = function (container, options) {

//-----------------------------------------

//Eintrag_INT

//-----------------------------------------

if (options.model.Profilfeldtyp_ID == 1) {

$("<input name='" + options.field + "' data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({

format: "n",

decimals: 0

});

}

//-----------------------------------------

//Eintrag_FLOAT

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 2) {

$("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({

format: "n",

decimals: 2,

culture: "de-DE"

});

}

//-----------------------------------------

//Eintrag_BIT

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 3) {

//$("<input type='checkbox' data-bind='value:" + options.field + "' class='k-checkbox'/>").appendTo(container);

$("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDropDownList({

dataTextField: "text",

dataValueField: "value",

dataSource: [

{ text: "JA", value: "JA" },

{ text: "NEIN", value: "NEIN" },

],

});

}

//-----------------------------------------

//Eintrag_VARCHAR

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 4) {

$("<textarea data-bind='value:" + options.field + "' class='k-textbox'/>").appendTo(container);

}

//-----------------------------------------

//Eintrag_MONEY

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 5) {

$("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({

format: "c",

decimals: 2,

culture: "de-DE"

});

}

//-----------------------------------------

//Eintrag_TIME

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 6) {

$("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoTimePicker({

dateInput: true,

format: "HH:mm:ss",

parseFormats: ["HH:mm:ss"],

culture: "de-DE"

});

}

//-----------------------------------------

//Eintrag_DATETIME

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 7) {

$("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDatePicker({

dateInput: true,

format: "dd.MM.yyyy",

culture: "de-DE"

});

}

//-----------------------------------------

//Eintrag_IMAGE

//-----------------------------------------

else if (options.model.Profilfeldtyp_ID == 8) {

$("<input name='files' id='files' type='file'/>").appendTo(container).kendoUpload({

async: {

saveUrl: "save",

removeUrl: "remove",

autoUpload: true

}

});

}

else {

$("<textarea data-bind='value:" + options.field + "' class='k-textbox'/>").appendTo(container);

}

})

Grid

answered on 03 Oct 2017