Questions on UI for ASP.NET MVC Forum

4 answers

126 views

Without getting into why - I am setting the DataSource.Read.Data function in javascript after the grid is initialized. (using .AutoBind(false) so it doesn't load until after I set the Data function)

$("#myGrid").data("kendoGrid").dataSource.transport.options.read.data = function() {

return { prop: "value" };

};

This works fine when loading the grid items. However, when I do it this way, the column filters that are .Multi(true) do NOT use this function, and pass no variables to the Action method.

How do I get the calls to load the filters to also use this function for parameters?

Thanks

Grid

answered on 09 Aug 2018

10 answers

784 views

ListBox with many items - paging or another widget?

In my application, I need to assign items to groups. I would like to use the ListBox widget (https://demos.telerik.com/aspnet-mvc/listbox) because I like its built-in transfer controls. This would allow me to display the unassigned items in one ListBox, the assigned items in another ListBox, and then transfer the items from Unassigned to Assigned, or vice versa.

However, I may have several thousand items in a list and I doubt it would be performant for the ListBox to show all of these at once. Is there a way to add paging to the ListBox? If not, is there a different widget you would suggest? I did see a StackOverflow article where someone used two Kendo grids for this purpose. If that is the best option, do you have a complete example?

ListBox

answered on 09 Aug 2018

3 answers

239 views

Recurrence exceptions

I hope I am explaining this correctly.

I am developing a Scheduling platform for my company. Everything is going well, except for one thing. Our users can take half days, or get meeting requests that can split one of their recurring shifts.

For example:

User A has a repeating schedule M-F 8 - 5
A request is submitted so that on Wednesday, he has a meeting from 2-3.

I am unsure how to handle this type of exception, I would like for his Wednesday schedule to show him working 8-2, then meeting, then 3-5 and not two entries showing a meeting and then his schedule.

Is this possible using Kendo or even in the RFC 5545 standard?

Is this going to have to be done programatically in that I search my calendar for the user, find his schedule and parse his recurrence than figure out what day he works and hours and enter multiple events so that there would be 3 exceptions for the scenario listed above? (one for 8-2, one for 2-3, and one for 3-5)

Or is there a way to create the new meeting request from 2-3 then have that appointment's ID excepted from the recurrence rule?

Scheduler

answered on 09 Aug 2018

2 answers

948 views

validate existing rows

Hallo,

i'm fairly new to Kendo UI MVC and am trying to rebuild an old app with the kendo grid in .net.

What i am trying to do is: Use the Grid in batch editing mode and allow in line editing on the client side. I have some problems with the client side validation of the grid data. The grid is filled with data from the Viewmodel. If the user hit's the "kontigente speichern" button i want to validate the existing rows, because the HOTEL field is empty by default, but the $('#kontingenteHinzu').data().kendoGrid.editable.validatable.validate() method always comes back as "true" and try's to submit the grid data/ the page is reloaded. This happens although the HOTEL field is marked as required in the mvc view model. Additionally the KONTINGENT field ist only validated once it is clicked into, otherwise the validate() methoded just reloades the page. I do not use the build in "save changes" method because we use a seperate button in oure design/layout. If the user hit's the "+ Kontigent hinzufügen" button the existing rows should be validated bevor he can do that but i'm not sure how to accomplish this since the existing rows always return true with the validate() method, although they are not "valid".

Maybe someone has an idea how to get this working or even an easyer way with the build in grid methodes.

Kind regards

Marcus

Viewmodel

public class KontingentBuchung

{

public int LehrgangId {get;set;}

public List<HotelKontigent> Kontingente {get;set;}

public bool ShowModal {get;set;}

public bool Success {get;set;}

public string Message {get;set;}

}

public class HotelKontigent

{

public int Id { get; set; }

[Required(ErrorMessage ="Bitte ein Hotel eintragen")]

public string Hotel {get;set;}

[Required]

[Range(1, Int32.MaxValue, ErrorMessage = "Bitte ein Kontingent eintragen")]

public int Kontingent {get;set;}

public DateTime Zeitraum {get;set;}

public DateTime? Frist {get; set;}

}

cshtmlview

@model Hotelinformationen.Models.KontingentBuchung

@{

Layout = "~/Views/Shared/_BCWLayout.cshtml";

bool hasFrist = false;

DateTime firstDay = DateTime.Now;

DateTime frist = DateTime.Now;

var id = Model.LehrgangId;

var first = Model.Kontingente.FirstOrDefault();

if (first != null)

{

hasFrist = first.Frist.HasValue;

firstDay = first.Zeitraum;

if (hasFrist)

{

frist = first.Frist.Value;

}

@Model.LehrgangId

<div class="panel panel-primary panel-content z-depth-1 fade-in">

<div class="panel-heading">Veranstaltungen ohne Kontingente</div>

<div class="panel-body">

<div class="row">

<div class="col-xs-10 col-xs-push-1">

@(Html.Kendo().Grid(Model.Kontingente)

.Name("kontingenteHinzu")

.Columns(cs =>

{

cs.Bound(c => c.Hotel).Width(500);

cs.Bound(c => c.Zeitraum).Format("{0:dd.MM.yyyy}").EditorTemplateName("Date").Width(150);

cs.Bound(c => c.Kontingent).Width(500);

cs.Bound(c => c.Frist).Format("{0:dd.MM.yyyy}").EditorTemplateName("Date").Width(150);

cs.Command(command => { command.Destroy().IconClass("fas fa-trash fa-2x").Text(" "); }).Width(75);

})

.ToolBar(toolBar =>

{

toolBar.Create().Text("Kontingent hinzufügen");

})

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

.DisplayDeleteConfirmation(false)

.CreateAt(GridInsertRowPosition.Bottom))

.DataSource(ds => ds.Ajax()

.Batch(true)

.PageSize(20)

.Model(model =>

{

model.Id(k => k.Id);

model.Field(k => k.Kontingent).DefaultValue(0);

model.Field(f => f.Frist).Editable(false).DefaultValue(frist);

model.Field(k => k.Zeitraum).DefaultValue(firstDay);

})

.ServerOperation(false)

))

</div>

Grid

answered on 09 Aug 2018

5 answers

1.2K+ views

columns.Select() not working well with filterable Grid

Hi,

I am using columns.Select() in my grid template in order to be able to select multiple rows with the provided checkboxes. The checkbox in the header normally works well, allowing me to select or deselect all rows.

However, I have tried this same approach on a 'filterable' grid, and the column header checkbox no longer works. In this case, when I click on the checkbox, instead of toggling the selection, the grid attempts to filter on the 'select' column.

Is there anyway to turn off filtering for the select column only? I need filtering on the other columns, and I also need to be able to use the checkbox in the header of the 'select' column. Is this possible?

Thanks,

Ryan

Grid

answered on 09 Aug 2018

2 answers

101 views

Upgraded to most recent version from a 2016 version and can't get the icons to display

I ran the upgrade wizard to upgrade my telerik version to 2018.2.620 from the Q2 2016 version. However, after the upgrade none of the grid icons are showing up.

I'm using the bootstrap theme.

In my content folder I have a kendo directory with folders for Bootstrap, fonts, images, textures and the kendo.bootstrap.min.css and kendo.common-bootstrap.min.css files. I've included a screen shot of the folder structure.

The Scripts/kendo directory just has the kendo.all.min.js and kendo.aspnetmvc.min.js files.

I have the following css and script file includes on the page:

I've confirmed using the dev tools in Chrome and using Fiddler that there are no 404's, all the files are getting loaded into the page correctly.

I'm not using any bundler at all. The page just has a Html.Kendo().Grid defined and practically nothing else. I tried removing everything else on the page but the grid, but that didn't help.

What am I missing?

Grid

answered on 08 Aug 2018

6 answers

827 views

filter with single selection dropdown instead of multi-check

Hello

As a reference I use the sample in https://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes. By clicking on the filter icon, a multi-check drop-down is displayed. I'd like to show a single selection drop-down (containing the distinct row values in the corresponding column as in the multi-check sample) instead of the multi-check drop-down. By clicking on one item in this drop-down, the grid content should be filtered using this selection.

A code sample would be greatly appreceated.

I'm using Kendo.Mvc Version 2018.2.516.545

Thank you and regards

Daniel

Grid

answered on 08 Aug 2018

4 answers

152 views

Image Browser custom alert

How I can override alert from ImageBrowser from f.e "invalidFileType" ?

Because it is native web browser popup.

01.$("#editor").kendoImageBrowser({

02. messages: {

03. deleteFile: "@Html.Raw(ImageBrowser.DeleteFile.JsEscape())",

04. directoryNotFound: "@Html.Raw(ImageBrowser.DirectoryNotFound.JsEscape())",

05. emptyFolder: "@Html.Raw(ImageBrowser.EmptyFolder.JsEscape())",

06. invalidFileType: "@Html.Raw(ImageBrowser.InvalidFileType.JsEscape())",

07. orderBy: "@Html.Raw(ImageBrowser.OrderBy.JsEscape())",

08. orderByName: "@Html.Raw(ImageBrowser.OrderByName.JsEscape())",

09. orderBySize: "@Html.Raw(ImageBrowser.OrderBySize.JsEscape())",

10. overwriteFile: "@Html.Raw(ImageBrowser.OverwriteFile.JsEscape())",

11. uploadFile: "@Html.Raw(ImageBrowser.UploadFile.JsEscape())",

12. dropFilesHere: "@Html.Raw(ImageBrowser.DropFilesHere.JsEscape())",

13. search: "@Html.Raw(ImageBrowser.Search.JsEscape())"

14. },

15. transport: {

16. type: "imagebrowser-aspnetmvc",

17. read: "@Url.Action("ReadES", "ImageBrowser", new {id = Model.Id})",

18. destroy: {

19. url: "@Url.Action("DestroyES", "ImageBrowser", new {id = Model.Id})",

20. type: "POST"

21. },

22. create: {

23. url: "@Url.Action("CreateES", "ImageBrowser", new {id = Model.Id})",

24. type: "POST"

25. },

26. thumbnailUrl: function (path, file) {

27. var url = "@Url.Action("ThumbnailES", "ImageBrowser", new { id = Model.Id })" + "?path=" + path + file;

28. return url;

29. },

30. uploadUrl: "@Url.Action("UploadES", "ImageBrowser", new { id = Model.Id })",

31. imageUrl: "@Url.Action("Image", "ImageBrowser", new {path = "{0}", id = Model.Id})"

32. }

33. });

Editor

answered on 08 Aug 2018

1 answer

1.3K+ views

DatePicker & TimePicker close immediately when opened

The DateTimePicker & TimePicker close their respective animated picker when opened immediately in the following scenario:

Kendo Grid is inside a Bootstrap modal.
Kendo Grid has edit Popup that uses a Template.
The Popup template uses the Kendo DateTimePicker AND/OR TimePicker.
When editing the grid in the popup edit template, the DateTimePicker & TimePicker close their popups immediately when opened.

When I remove the grid from the Bootstrap modal, the behavior is corrected.

Any advice would be appreciated. I don't have any example code readily available to demonstrate the behavior.

Date/Time Pickers