Questions on UI for ASP.NET Core Forum

1 answer

101 views

Create event Fire 4 times

I have Problem with UI schedule.when I try to enter new Meeting to the room the create event will fire 4 times

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.CodeAnalysis.CSharp.Syntax;

using TelerikScheduler.Entities;

using TelerikScheduler.Services;

using TelerikScheduler.ViewModels;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

namespace TelerikScheduler.Controllers

{

public class HomeController : Controller

{

private IMeetingData meetingData;

public HomeController(IMeetingData meetingData)

{

this.meetingData = meetingData;

}

public IActionResult Index()

{

var model = new HomePageViewModel();

model.Rooms = meetingData.GetAll();

return View(model);

}

public virtual JsonResult ReadMeeting([DataSourceRequest] DataSourceRequest request)

{

return Json(meetingData.GetAll().ToDataSourceResult(request));

}

public virtual JsonResult DestroyMeeting([DataSourceRequest] DataSourceRequest request, Meeting meeting)

{

if (ModelState.IsValid)

{

// meetingData.Delete(meeting);

}

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

}

public virtual JsonResult CreateMeeting([DataSourceRequest] DataSourceRequest request, Meeting meeting)

{

if (ModelState.IsValid)

{

meetingData.Insert(meeting, ModelState);

}

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

}

public virtual JsonResult UpdateMeeting([DataSourceRequest] DataSourceRequest request, Meeting meeting)

{

if (ModelState.IsValid)

{

//meetingData.Update(meeting);

}

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

}

public IActionResult Error()

{

return View();

}

@using TelerikScheduler.Entities

@using Kendo.Mvc.UI

@using Microsoft.AspNetCore.Mvc.ModelBinding

@model TelerikScheduler.ViewModels.HomePageViewModel

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Home</title>

</head>

<body>

<h1>Welcome!</h1>

@(Html.Kendo().Scheduler<Meeting>().Name("Meeting").Date(new DateTime(2017, 5, 13))

.StartTime(new DateTime(2017, 5,13, 7, 00, 00))

.Views(views=>{

views.DayView();

views.AgendaView();

})

.Height(600)

.Timezone("Etc/UTC")

.Group(group => { group.Resources("Rooms"); group.Date(true); })

.Resources(resource =>

{

resource.Add(m => m.RoomId).Title("Room").Name("Rooms").DataTextField("Text").DataValueField("Value").DataColorField("Color").BindTo(new[] {

new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },

new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }

});

resource.Add(m => m.Attendees)

.Title("Attendees")

.Multiple(true)

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Alex", Value = 1, Color = "#f8a398" } ,

new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,

new { Text = "Charlie", Value = 3, Color = "#56ca85" }

});

}).DataSource(d => d

.Model(m =>

{

m.Id(f => f.RecordId);

m.Field(f => f.Title).DefaultValue("No title");

})

.Read("ReadMeeting", "Home")

.Create("CreateMeeting", "Home")

.Destroy("DestroyMeeting", "Home")

.Update("UpdateMeeting", "Home")

).BindTo(Model.Rooms).Deferred())

@section scripts {

@Html.Kendo().DeferredScripts()

}

</body>

</html>

Scheduler

answered on 16 May 2017

1 answer

239 views

insert is called twice update and delete methods are bound to Post in telerik aspnet-core scheduler UI?

I am using Telerik UI Scheduler for asp.net core Project.I am using WebApi to bind data and insert new meeting to the room but I have 2 problems are:

1. insert is called twice when I insert new Item.
2. update and delete methods are bound to Post and they are not calling corresponded do delete of add operation.

html view

@(Html.Kendo().Scheduler<Meeting>().Name("scheduler").Date(new DateTime(2017, 5, 13))

.StartTime(new DateTime(2017, 5,13, 7, 00, 00))

.Editable(true)

.Views(views=>{

views.DayView();

views.AgendaView();

})

.Height(600)

.Timezone("Etc/UTC")

.Group(group => { group.Resources("Rooms"); group.Date(true); })

.Resources(resource =>

{

resource.Add(m => m.RoomId).Title("Room").Name("Rooms").DataTextField("Text").DataValueField("Value").DataColorField("Color").BindTo(new[] {

new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },

new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }

});

resource.Add(m => m.Attendees)

.Title("Attendees")

.Multiple(true)

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.BindTo(new[] {

new { Text = "Alex", Value = 1, Color = "#f8a398" } ,

new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,

new { Text = "Charlie", Value = 3, Color = "#56ca85" }

});

}).DataSource(d => d

.WebApi()

.Model(m =>

{

m.Id(f => f.RecordId);

m.Field(f => f.Title).DefaultValue("No title");

})

.Events(events => events.Error("error_handler"))

.Read(read => read.Action("Get", "Meeting"))

.Create(create => create.Action("Post", "Meeting"))

.Update(update => update.Action("Put", "Meeting", new { id = "{0}" }))

.Destroy(destroy => destroy.Action("Delete", "Meeting", new { id = "{0}" }))

).Deferred())

@* All initialization scripts are rendered to the bottom of the page, see _Layout.cshtml *@

@section scripts {

@Html.Kendo().DeferredScripts()

}

<script>

function error_handler(e) {

var errors = $.parseJSON(e.xhr.responseText);

if (errors) {

alert("Errors:\n" + errors.join("\n"));

}

</script>

meeting Web api controller

[Route("api/[controller]")]

public class MeetingController : Controller

{

private IMeetingData meetingData;

public MeetingController(IMeetingData meetingData)

{

this.meetingData = meetingData;

}

// GET api/task

[HttpGet]

public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)

{

return meetingData.GetAll().ToDataSourceResult(request);

}

// POST api/Meeting

[HttpPost]

public IActionResult Post(Meeting m)

{

if (!ModelState.IsValid)

{

return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));

}

meetingData.Insert(m, null);

return new ObjectResult(new DataSourceResult { Data = new[] { m }, Total = 1 });

}

// PUT api/Meeting/5

[HttpPut("{id}")]

public IActionResult Put(int id, Meeting m)

{

if (ModelState.IsValid && id == m.RecordId)

{

try

{

meetingData.Update(m, null);

}

catch (Exception)

{

return new NotFoundResult();

}

return new StatusCodeResult(200);

}

else

{

return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));

}

// DELETE api/Meeting/5

[HttpDelete("{id}")]

public IActionResult Delete(int id)

{

try

{

meetingData.Delete(new Meeting { RecordId = id }, null);

}

catch (Exception)

{

return new NotFoundResult();

}

return new StatusCodeResult(200);

}

Scheduler

answered on 16 May 2017

5 answers

399 views

Popup Edit Template and Html.EditorFor not working

Hello,

If I use my own Popup Edit Template in Kendo grid with i.e @(Html.EditorFor(m => m.Aktuell)) then I see a normal
Checkbox (see Picture1) - if I use @(Html.Kendo().CheckBoxFor(m => m.Aktuell)) I see the Kendo Checkbox (see picture2)

It seems that using Html.EditorFor in grid Popup Edit Template do not use the Editor templates in Views\Shared\EditorTemplates\?

robert

Grid

answered on 12 May 2017

2 answers

144 views

$("#DirectorLegalDocument").data("kendoDropDownList").bind("DirectorLegalDocumentChange", onChange);

I am trying to dynamically add change event to dropdownlist like

$("#ID").data("kendoDropDownList").bind("MyChangefunction", onChange);

but I get

Uncaught ReferenceError: onChange is not defined

what is onChange and where is defined?

General Discussions

answered on 12 May 2017

1 answer

106 views

Check selector rows

Hi,

how can I set a check selector inside row, like Gmail does, and a check selector for select all rows at a time?

Thanks!

Grid

answered on 12 May 2017

1 answer

290 views

ComboBox EditorTemplate not updating model when click to select

I have a column with combobox as editor template. If I type name, it'll select the item and update the model when lost focus. But if I mouse click on an item, it will blank the field.

column binding:

columns.Bound(c => c.ServiceCompany).EditorTemplateName("SharedNameComboBox");

template:

<script>

function onSelect(e) {

e.sender.value(e.dataItem);

e.sender.trigger("change");

}

</script>

@(

Html.Kendo().ComboBox()

.HtmlAttributes(new { data_bind = "value: " + ViewData.TemplateInfo.HtmlFieldPrefix})

.Name(ViewData.TemplateInfo.HtmlFieldPrefix)

.Filter(FilterType.StartsWith)

.Suggest(true)

.BindTo(ViewData as IEnumerable<string>)

.Events(e => e.Select("onSelect"))

)

How can I update model upon mouse-click?

Grid

answered on 12 May 2017

1 answer

258 views

UI for .Net Core vs Kendo Angular with .Net Core backend

If I understand correctly, the UI controls for .Net core specific to .Net core and the UI controls for Kendo Angular are specific to Angular 2. So what should I do if I want to use Angular 2.0 on the front end but I am Net core for my backend?

If someone could let me know the differences, advantages of the options so I could make an intelligent decision on start, it would be much appreciated!

FYI, I am new to .Net Core, and Angular. I am trying to modernize my skills and figure out what dev stack I want to use going forward.

Thanks,
Brad

General Discussions

answered on 11 May 2017

3 answers

214 views

Export pdf does not export all pages

We are trying to export all pages of a grid to a pdf, but only the displayed page is exported to the pdf. The problem seems to be linked to using PaperSize, since it works when we remove it, but then we see the pager on each page. Here is the code we are using for the export :
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Margin("2cm", "1cm", "1cm", "1cm")
.RepeatHeaders()
.TemplateId("page-template")
.FileName("store.pdf")
.Scale(0.8)
.ForceProxy(true)
.ProxyTarget("_blank")
.ProxyURL(Url.Action("ExportToPdf", "Reports"))

Grid

answered on 11 May 2017

1 answer

309 views

Grid - Pager & PageSize DropDown

Hi,

The company I am working for needs to move from an OpenSource grid to one with Commercial Backing and better Filtering/Grouping.

Telerik UI has been chosen on the short list and while it provides everything we need, I am unable to find any options to modify the .

Is it easy from the HtmlHelper to have a Drop-down on the Pager to select a pagesize and optionally show all the pages? We would be using the grid with InLine editing mode enabled. NOTE: I understand all pages can be calculated but would be a better UX if the option said All.

For Example Page Sizes: 10, 25, 50, ALL

Thanks in advance.

Grid

answered on 10 May 2017

2 answers

1.1K+ views

Dynamically add controls to page

I'm using the UI for MVC Core (Core 1.1). I need to allow users to build their own input forms (unlimited number of inputs and forms). I am storing the configuration of the form (e.g. settings for combobox, dateinput, textbox, etc.) in a database. I want to create the necessary mvc wrappers and save them to a file (or db)...i.e. cache the form. That way when the form is requested, I can just load the cached form. Here is an example of what I would store in a file or database.

@(Html.Kendo().NumericTextBox<decimal>().Name("currency").Format("c"))

@(Html.Kendo().NumericTextBox<decimal>().Name("currency2").Format("c").Value(50))

Is it possible to then load this information from database or file and have it parsed on a page (i.e. generate the kendo controls)?Or do the wrappers have to be added to the page at design time? If possible, how would I load the file?

Or do I need to create the Kendo html elements instead like below? Or is there another option?

<input id="currency" type="number" />

<input id="currency2" type="number" value="50" />

<script>

$(document).ready(function() {

$("#currency").kendoNumericTextBox({format: "c"});

$("#currency2").kendoNumericTextBox({format: "c"});

});

</script>

General Discussions