Questions on UI for ASP.NET Core Forum

1 answer

124 views

Hello,

I need to control my sortable list with the keyboard. As far as I know there is no such function implemented in the current sortable widget, right? I just tried the following to extend it by myself, but there is a problem:

Go to the demo: http://demos.telerik.com/aspnet-core/sortable/index
Add a tabindex="0" to each <li> tag
Add a keydown event to either the ul or the li
- $(document).on('keydown', '#sortable-basic', function (e) { console.log('1', e); });
- $(document).on('keydown', '#sortable-basic li', function (e) { console.log('2', e); });
Now focus a li and press a key. You will see that the event is not triggered by any letter or arrow key, but just on ctrl, tab, shift ... In my case I want to sort the items by holding the ALT key + arrow left/right.

Could you please help me with a working solution?

Sortable

answered on 05 Jun 2017

2 answers

126 views

Accessibility problem

Hello,

the accessibility is in our projects an importnant point. I need to use each feature with keyboard control. For the spreadsheet I found the following documentation for keyboard access.

http://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/end-user/list-of-shortcuts

The main problem is, that when I am with the focus in the toolbar, I cant access the back/forward buttons or tabs above. And when I am tabbing into the first cell, I am caught in the table. When I reach the last cell and press tab again, it pushes me back to the first cell. How is it possible to lose the focus of the spreadsheet to continue to the other focusable items of the application. Is this a bug or am I missing a shortcut here?

Spreadsheet

answered on 02 Jun 2017

1 answer

125 views

Wrong Typescript definition in kendo.all.d.ts

Hello,

I just used the TreeView widget and inserted items with the API method 'insertAfter' and 'insertBefore'. Unfortunately the typescript definition of these methods says, it returns void, but actually it returns the new inserted item (which I need at this point). I updated my kendo.all.d.ts file now, but if I will update kendo in the future, it would overwrite these lines. It would be great if you could fix this for the next release.

insertAfter(nodeData: any, referenceNode: JQuery): void;

insertBefore(nodeData: any, referenceNode: JQuery): void;

// to

insertAfter(nodeData: any, referenceNode: JQuery): JQuery;

insertBefore(nodeData: any, referenceNode: JQuery): JQuery;

TreeView

answered on 02 Jun 2017

3 answers

554 views

Destroy Action not been fired in Controller in Ajax batch edit mode

When adding the Destroy command to a column, the .Destroy action does not hit the controller action method.

You can reproduce the bug with your DVDGo sample application by making it InCell editing, .Batch(true), .ServerOperation(false).

Grid

answered on 26 May 2017

2 answers

170 views

Localization problem

Hello,

to localize my spreadsheet, I included the "kendo.messages.de-DE.js" into my document. Because it is not translated completely, I extended my version with the keys from "kendo.messages.en-US.js".

I.e. when I hover over the "freeze panes" button, I get my translated title, but the submenu still shows me the english text. Its the same problem with the "Merge cells" button.

kendo.spreadsheet && kendo.spreadsheet.messages.toolbar && (kendo.spreadsheet.messages.toolbar = a.extend(!0, kendo.spreadsheet.messages.toolbar, {

...

freeze: "Fenster fixieren",

freezeButtons: {

freezePanes: "Fenster fixieren",

freezeRows: "Zeile fixieren",

freezeColumns: "Spalte fixieren",

unfreeze: "Fixierung aufheben"

},

...

Spreadsheet

answered on 25 May 2017

1 answer

126 views

Display issue on drag cell(s) with right bottom anchor point

Hello,

in your example http://demos.telerik.com/aspnet-core/spreadsheet/index if you have a selection and start to drag (copy) the cells with the right bottom corner point, there appears a cut-off box at the top left corner of the table. This seems to be a style issue, right?

Spreadsheet

answered on 23 May 2017

1 answer

360 views

Kendo ASP.NET Core Grid Default Language

On my developer machine i have polish language system, but i need to develop all pages in english. I am working with Sample Telerik C# ASP.NET Core MVC Application.
My Razor code is currently:

<p>CurrentCulture: @Html.Raw(System.Globalization.CultureInfo.CurrentCulture.ToString())</p>

<p>CurrentUICulture: @Html.Raw(System.Globalization.CultureInfo.CurrentUICulture.ToString())</p>

@(Html.Kendo().Grid<TelerikAspNetCoreApp2.Models.OrderViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.OrderID).Filterable(false);

...

})

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Orders_Read", "Grid"))

)

HTML result is:

<p>CurrentCulture: en-US</p>

<p>CurrentUICulture: en-US</p>

<div id="grid" name="grid"></div><script>kendo.syncReady(function(){jQuery("#grid").kendoGrid({"groupable":{"enabled":true,"messages":{

"empty":"Przeciągnij nagłówek kolumny i upuść go tutaj aby pogrupować według tej kolumny"}},"columns":[{"title":"Order ID","field":"OrderID","filterable":false,"encoded":true},{"title":"Freight","field":"Freight","filterable":{"messages":{"info":"Pokaż wiersze o wartościach które","isTrue":"prawda","isFalse":"fałsz","filter":"Filtr","clear":"Wyczyść filtr","and":"Oraz","or":"lub","selectValue":"-Wybierz wartość-","value":"Wartość","cancel":"Anuluj","selectedItemsFormat":"{0} selected items"} ....

HTML Rendered code contains valid Culture Info=en-US, but Kendo Grid messages are in polish language. How to force Kendo to use English language? Is it also possible to disable this messages? I would like to have short javascript as it is in pure Kendo JS.

Grid

answered on 22 May 2017

4 answers

217 views

Source of GetProducts Action on Home Controller

On the demo page for Server filtering in ASP.NET Core AutoComplete the DataSource property is setup to read products using the GetProducts action of the Home controller:

read.Action("GetProducts", "Home");

Anyway you could publish the contents of the GetProducts action?

AutoComplete

answered on 18 May 2017

5 answers

996 views

Kendo Menu in ClientTemplate not working

Hello,

why does the following Kendo Menu in ClientTemplate not working?

the menu doesn't open on hover nor on click?

@(Html.GpdbKendoGridEdit<SELECT_Standort>("Standort", "Standort_ID")

.Columns(columns =>

{

columns.Bound(c => c.Standort_ID).MinScreenWidth(768).Filterable(false).Sortable(false).IncludeInMenu(false).Width(60);

columns.Bound(c => c.Standort_ID).Title(" ")

.ClientTemplate(

Html.Kendo().Menu()

.Name("menu_#=Standort_ID#")

.OpenOnClick(true)

.Items(its =>

{

its.Add()

//.SpriteCssClasses("fa fa-tasks")

.Text("").Items(nested =>

{

nested.Add().Text("test1");

nested.Add().Text("test2");

nested.Add().Text("test3");

nested.Add().Text("test4");

});

})

.ToClientTemplate().ToString()

)

.Filterable(false).Sortable(false).IncludeInMenu(false).Width(80);

columns.Bound(c => c.Strasse).ClientTemplate(

"#=getRowFormat(Strasse, gelöscht, true)##=(Art == true) ? ' <span class=\"label label-success pull-right\">ZS</span>' : '' ##=(Nichtbetriebe > 0) ? ' <span class=\"label label-danger pull-right\">R</span>' : '' #</br><small>#=getRowFormat(Postleitzahl.concat(' ', Ort), gelöscht, false)#</small>"

);

columns.Bound(c => c.Betriebsteil).MinScreenWidth(768).ClientTemplate("#=getRowFormat(Betriebsteil, gelöscht, false)#");

columns.Bound(c => c.gelöscht).MinScreenWidth(768).Format("{0:dd.MM.yyyy}").Width(110).ClientTemplate("#=getRowFormat(kendo.toString(gelöscht,'dd.MM.yyyy'), gelöscht)#");

})

.Editable(e => e.TemplateName("~/Areas/Mitglied/Views/Standorte/_frmStandortEdit.cshtml")

.Mode(GridEditMode.PopUp).Window(w => w.Title("Standort").Animation(animation => animation

.Open(open => open.SlideIn(SlideDirection.Left).Duration(500))

.Close(close => close.SlideIn(SlideDirection.Left).Duration(500).Reverse(true))

)

))

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("Standorte_Read", "Standorte"))

.Update(read => read.Action("Standorte_Update", "Standorte"))

.Destroy(destroy => destroy.Action("Standorte_Destroy", "Standorte"))

)

.AutoBind(false)

.ClientDetailTemplateId("template")

)

Grid

answered on 18 May 2017

3 answers

1.5K+ views

Yet another kendo is not defined thread

Why with upgrade from 2017.1.223 to 2017.2.504 I need to move including of kendo scripts at front of page after body?

In 2017.1.223 I simply include jquery after body (this is unavoidable I guess) and add all other at end of page. But then I upgrade to 2017.2.504 I get "kendo is not defined" (rolling back to 2017.1.223 solves). Also I even did not upgrade bower package in this situation. Just nuget.

so next is _layout.cshtml as to was (working on 2017.1.223 and do not on 2017.2.504 )

and second block works with 2017.2.504

Please tell me if I`am wrong but it is better to shove scripts to the bottom for page rendering performance.

was

<body>

<environment names="Development">

<script src="~/lib/jquery/dist/jquery.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"

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

asp-fallback-test="window.jQuery"

crossorigin="anonymous"

integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7">

</script>

</environment>

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

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">TNPK</a>

</div>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

@if (SignInManager.IsSignedIn(User))

{

<li><a asp-area="" asp-controller="Codeword" asp-action="Index">Кодовые слова</a></li>

}

</ul>

@await Html.PartialAsync("_LoginPartial")

</div>

</nav>

<div class="container body-content">

@RenderBody()

<hr />

<footer>

<p>© @DateTime.Now.Year - TNPK</p>

</footer>

</div>

<environment names="Development">

<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>

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

<script src="~/lib/kendo-ui/js/jszip.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>

<script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>

<script src="~/lib/clipboard/dist/clipboard.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

</environment>

<environment names="Staging,Production">

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"

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

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"

crossorigin="anonymous"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">

</script>

<script src="~/lib/kendo-ui/js/jszip.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.all.min."></script>

<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>

<script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>

<script src="~/lib/clipboard/dist/clipboard.min.js"></script>

<script src="~/js/site.min.js" asp-append-version="true"></script>

</environment>

<script>kendo.culture("ru-RU");</script>

@RenderSection("Scripts", required: false)

</body>

second

<body>

<environment names="Development">

<script src="~/lib/jquery/dist/jquery.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"

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

asp-fallback-test="window.jQuery"

crossorigin="anonymous"

integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7">

</script>

</environment>

<environment names="Development">

<script src="~/lib/jquery-ui/jquery-ui.min.js"></script>

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

<script src="~/lib/kendo-ui/js/jszip.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>

<script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>

<script src="~/lib/clipboard/dist/clipboard.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

</environment>

<environment names="Staging,Production">

<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"

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

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"

crossorigin="anonymous"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">

</script>

<script src="~/lib/kendo-ui/js/jszip.min.js"></script>

<script src="~/lib/kendo-ui/js/kendo.all.min."></script>

<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>

<script src="~/lib/kendo-ui/js/cultures/kendo.culture.ru-RU.min.js"></script>

<script src="~/lib/p-loading/dist/js/p-loading.min.js"></script>

<script src="~/lib/clipboard/dist/clipboard.min.js"></script>

<script src="~/js/site.min.js" asp-append-version="true"></script>

</environment>

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

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">TNPK</a>

</div>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

@if (SignInManager.IsSignedIn(User))

{

<li><a asp-area="" asp-controller="Codeword" asp-action="Index">Кодовые слова</a></li>

}

</ul>

@await Html.PartialAsync("_LoginPartial")

</div>

</nav>

<div class="container body-content">

@RenderBody()

<hr />

<footer>

</footer>

</div>

<script>kendo.culture("ru-RU");</script>

@RenderSection("Scripts", required: false)

</body>

General Discussions

answered on 18 May 2017