Questions on UI for ASP.NET Core Forum

2 answers

509 views

[Solved] Editable Dropdown in Grid Populated from ViewBag

Hi,

https://demos.telerik.com/aspnet-mvc/grid/editing-custom

The above link discusses adding a dropdown in editable mode to select from a list. What if I don't want the list to come from the model? I'm trying to bind the dropdown to a ViewBag of names populated from an LDAP query (ie not the database). What do I put in the ClientTemplate section?

Thanks,
Brian

Grid

answered on 10 Jun 2019

8 answers

408 views

[Solved] Updating model on start/end date changing

As far as I can tell binding is not an option with DateRangePicker. Instead I believe you have to handle the change event and update your model from there. However for the life of me I can't work out how to do this. This is what I currently have:

@Html.HiddenFor(model => model.EarliestDeliveryDate)

@Html.HiddenFor(model => model.LatestDeliveryDate)

@(Html.Kendo().DateRangePicker()

.Name("deliveryDate")

.Range(r => r.Start(Model.EarliestDeliveryDate).End(Model.LatestDeliveryDate))

.Messages(m => m.StartLabel("Earliest").EndLabel("Latest"))

.Events(events => events.Change("onDeliveryDatesChange"))

)

<script type="text/javascript">

function onDeliveryDatesChange() {

var range = this.range();

if (range.start && range.end) {

var earliest = $('#EarliestDeliveryDate');

var latest = $('#LatestDeliveryDate');

earliest.val(range.start);

latest.val(range.end);

}

</script>

The values are getting updated on the hidden fields but this is not getting reflected on the model. I think this is because the format of the dates that are returned in range.start/end is wrong. It could also be something completely different. Can you please give me an example of how to do this and I'd suggest also updating your documentation with the example too.

Also if Name is not set then rendering utterly fails and no good message is given. This is not intuitive as other controls don't seem to need this value setting.

DateRangePicker

answered on 10 Jun 2019

5 answers

134 views

Opening on the DateRange

When editing a form with data, when I click the control to "EDIT" my saved date range selection it's opening on Todays date instead of my date range selection.

Any idea how to resolve this?

DateRangePicker

answered on 10 Jun 2019

3 answers

176 views

How can I tell what input validator.validate() is failing on?

I have a form Razor in .NET Core that I have attached a Kendo Validator to. When I submit the form validator.validate() is returning false but none of the inputs on the form are displaying a validation error. How can I tell what validations are failing when validator.validate() returns false?

Razor Form

<form id="editQuestionsForm" method="post">

<input asp-for="Input.InspectionQuestionId" type="hidden" />

<div class="row">

<div class="col-md-12">

<div class="form-group">

<label asp-for="Input.InspectionSectionId"></label><br />

<kendo-combobox name="inspectionSection" style="width: 500px;"

for="Input.InspectionSectionId"

placeholder="Select Section"

datatextfield="Text"

datavaluefield="Value"

bind-to="Model.InspectionSections">

<popup-animation>

<open duration="500" />

<close duration="500" />

</popup-animation>

</kendo-combobox><br />

<span asp-validation-for="Input.InspectionSectionId" class="text-danger"></span>

</div>

<div class="row">

<div class="col-md-12">

<div class="form-group">

<label asp-for="Input.QuestionTextForForm"></label><br />

<textarea asp-for="Input.QuestionTextForForm" class="form-control-textarea"></textarea><br />

<span asp-validation-for="Input.QuestionTextForForm" class="text-danger"></span>

</div>

</form>

JavaScript

var validator = $("#editQuestionsForm").kendoValidator().data("kendoValidator");

function validateSave() {

if (validator.validate()) {

$('#editQuestionsForm').submit();

} else {

bootstrapWarningsMessage("There was an error submitting the form.");

}

return true;

}

General Discussions

answered on 07 Jun 2019

3 answers

142 views

Object does not support method kendoGrid

(It's a trial version)

Impossible to display data.

Data are correctly supplied in my form (see DOM capture)

But there is an error : L’objet ne gère pas la propriété ou la méthode « kendoGrid »

JS are the same than in examples.

General Discussions

answered on 06 Jun 2019

1 answer

979 views

[Solved] Initially hidden window causes flickering

I have a window in my _Layout.cshtml which I have initially set to visible="false". When I load or refresh the main page, I get a flickering, such that you can momentarily see the window text and button. I'm using a tag helper if that makes any difference.

The following is the _Layout.cshml file. The rest of the solution is just the standard Telerik ASP.Net Core template using ASP.Net Core 2019.2.514 controls on .Net Core 2.2.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - WindowFlickerTest</title>

<link href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

</environment>

</head>

<body class="k-content">

<kendo-window name="windowChangeUser"

title="Change User"

draggable="true"

resizable="false"

width="250"

height="200"

modal="true"

visible="false"

>

<content>

<div style="font-size: 13px; padding-top: 20px;">

<p>

Enter a username to switch to

</p>

<p style="padding-top: 20px;">

<input type="text" class="k-textbox" id="userName" />

</p>

</div>

<div style="padding-top: 20px; text-align: center">

<kendo-button name="buttonChangeUserOk"

type="submit"

on-click="windowClose"

>

<content>OK</content>

</kendo-button>

</div>

</content>

</kendo-window>

<nav class="navbar navbar-inverse navbar-fixed-top p-3">

<div class="container p-0 p-sm-3">

<kendo-button id="buttonOpenWindow" on-click="openWindow">

<content>Show me the window!</content>

</kendo-button>

<div class="navbar-header">

<kendo-button name="configure" tag="button" icon="menu" class="k-rpanel-toggle k-primary btn-toggle"></kendo-button>

<a asp-controller="Home" asp-action="Index" class="navbar-brand">Your .NET Core Application</a>

</div>

<div id="responsive-panel" class="navbar-left">

<kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">

@(Html.Kendo().Menu()

.Name("Menu")

.Items(items =>

{

items.Add().Text("Home").Action("Index", "Home", new { area = "" });

items.Add().Text("About").Action("About", "Home", new { area = "" });

items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });

})

)

</kendo-responsivepanel>

</div>

</nav>

<main>

<div class="container">

@RenderBody()

</div>

</main>

<footer class="footer text-center d-flex align-items-center">

<div class="container pb-0">

<hr />

<p class="text-muted">

Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.

</p>

</div>

</footer>

<environment names="Development">

<script src="~/lib/bootstrap/js/bootstrap.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"

asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>

</environment>

@RenderSection("scripts", required: false)

</body>

</html>

<script type="text/javascript">

function openWindow() {

var window = $("#windowChangeUser").data("kendoWindow");

window.center();

window.open();

}

function windowClose() {

var window = $("#windowChangeUser").data("kendoWindow");

window.close();

}

</script>

Window

answered on 05 Jun 2019

2 answers

104 views

Update cell based on changes on another cell

Hi

I have Grid with 4 columns. When I edit a row, enter number in cell 2, I want to update cell 4 with the result of cell 2 - cell 3.

Can anyone advice how I can do this urgently? Thanks in Advance

Below is the code of my grid

@(Html.Kendo().Grid<TransactionCoBroker>()

.Name("GridCommExCoBroker")

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

.Columns(columns =>

{

columns.Command(c => c.Edit());

columns.Bound(u => u.Name).Title("Name");

columns.Bound(u => u.FNet).Title("Net"));

columns.Bound(u => u.FTax).Title("Tax"));

columns.Bound(u => u.FGross).Title("Amount"));

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(id => id.ICobrokerId);

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

model.Field(p => p.FNet).Editable(true);

model.Field(p => p.FTax).Editable(true);

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

})

.Events(e => e.Error("onError").RequestEnd("onRequestEnd"))

.ServerOperation(true)

.Read(r => r.Url("?handler=GetExCoBrokerComm").Data("GetTransID"))

.Update(r => r.Url("?handler=SaveBrokerComm").Data("GetTransID"))))

Grid

answered on 05 Jun 2019

1 answer

107 views

Selectable

.Columns(columns =>
{
columns.Select().Width(50).Locked(true);

....

}

.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))

error

Grid

answered on 04 Jun 2019

1 answer

100 views

ColumnMenu

// .ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display error

.ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display ok

Grid

answered on 04 Jun 2019

1 answer

67 views

ColumnMenu

.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display error

.ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display ok

Grid

answered on 04 Jun 2019