Questions on UI for ASP.NET MVC Forum

8 answers

240 views

Files and routeValues in Grid popup editor

I'm using a strongly-typed partial view for the Grid popup editor and have a couple questions since the upload widget is rendered when the grid's page loads (and therefore there is no real backing model):

How do I specify the initially rendered files using the Files method?
How do I specify a routeValue for the Save and Remove methods based on the model?

If the control was being rendered using the correct model, I'd want the Upload call to look something like:

@(Html.Kendo().Upload()

.Name("Attachments").Multiple(true).ShowFileList(true)

.Async(async => async

.Save("Attach", "Controller", new { entryId = Model.Id })

.Remove("RemoveAttachment", "Controller", new { entryId = Model.Id }))

.Files(files => {

if (Model.Attachments != null)

{

foreach (var f in Model.Attachments)

{

files.Add().Name(f);

}

}))

Thanks!

Upload

answered on 23 Apr 2019

14 answers

1.1K+ views

Bind spreadsheet data to model?

Hi, I'm trying to use server-side wrappers of the UI Spreadsheet for ASP.NET MVC. I've looked over the documentation and searched this forum, and I can't find the answer to this question: is it possible to bind the spreadsheet data to a model passed to a view, in the same manner as it's done for the Grid control? For example, like the below.

Thank you!

example below;

@(Html.Kendo().Grid(Model) //Bind the Grid to the Model property of the view.
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID); //Create a column bound to the "ProductID" property
columns.Bound(p => p.ProductName); //Create a column bound to the "ProductName" property
columns.Bound(p => p.UnitPrice); //Create a column bound to the "UnitPrice" property
columns.Bound(p => p.UnitsInStock);//Create a column bound to the "UnitsInStock" property
})
.Pageable() //Enable paging.
)

Spreadsheet

answered on 23 Apr 2019

6 answers

527 views

hierarchy child detail bind to master data proper serialization

Hello Telerik,

We are using kendo controls for over the past 5 years, and we have recently noticed a bug with the hierarchy grid's child's which contain date columns and filters. We always initialize detail grids on detailnit of master grid, by passing the data which is rendered as a list from master model.

So, to give you an example. Imagine we have a master grid defined like below :

01.@(Html.AthenaParameterConfigGrid<StudentItineraryResult>()

02. .Name("studentItinerary")

03. .Columns(columns =>

04. {

05. columns.Bound(e => e.Person.Id).Hidden();

06.

08. columns.Bound(e => e.Person.FathersName).Width(200);

09. columns.Bound(e => e.Person.MothersName).Width(200);

10. columns.Bound(e => e.Person.Email).Width(200);

11.

23

24. })

25. .Scrollable(s => s.Enabled(true).Height("auto"))

26. .Sortable()

27. .Groupable(gr => gr.Enabled(false))

28. .HtmlAttributes(new { @class = "hide-vertical-scrollbar atn-tabstrip-grid atn-grid-dropdown-menu" })

29. .ClientDetailTemplateId("itineraries")

30. .AutoBind(false)

31. .DataSource(dataSource => dataSource

32. .Ajax()

33. .PageSize(10)

34. .ServerOperation(false)

35. .Model(model => model.Id(p => p.StudentId))

36. .Read(read => read.Action("StudentItinerariesSearch", "Student").Data("athena.studentItineraries.searchRequestData"))

37. .Events(events => events

38. .Error("athena.utilities.onErrorSearch").RequestEnd("athena.utilities.laddaStop")

39. )

40. )

41. .Events(events => events.DetailInit("athena.studentItineraries.detailInit"))

42.

.Deferred())

And a detail template grid initialized again server side with no datasource read options configured, where BusStopArrivalTime and AtttendeeEventDate(and other fields that we dont show in this case) are proper DateTime fields.

<script id="itineraries" type="text/kendo-tmpl">

@(Html.Kendo().TabStrip()

.Name("tabStrip_#=StudentId#")

.SelectedIndex(0)

.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))

.Items(items =>

{

items.Add().Text(@Html.GetResource(common, "TabStripBasic")).Content(@<text>

@(Html.AthenaParameterConfigGrid<StudentItineraryFlat>()

.Name("grid_#=StudentId#")

.Columns(columns =>

{

columns.Bound(o => o.BusStopLabel).Hidden();

columns.Bound(o => o.BusRouteLabel).Width(250);

columns.Bound(o => o.BusStopName).Width(100);

columns.Bound(o => o.AttendeeStatusUserString).Width(80);

// TODO : filtering here does not want to work...

columns.Bound(o => o.BusStopArrivalTime).Width(80).ClientTemplate("\\#= BusStopArrivalTime !=null ? kendo.toString(kendo.parseDate(BusStopArrivalTime), 't') : '' \\#").Filterable(filterable => filterable.UI(GridFilterUIRole.TimePicker));

// TODO : filtering here does not want to work...

columns.Bound(o => o.AttendeeEventDate).Width(80).ClientTemplate("\\#= AttendeeEventDate !=null ? kendo.toString(kendo.parseDate(AttendeeEventDate), 'd') : '' \\#").Filterable(filterable => filterable.UI(GridFilterUIRole.DatePicker));

columns.Bound(o => o.AttendeeCronLabel).Width(100);

columns.Bound(o => o.AttendeeComment).Width(150);

columns.Bound(o => o.ProfileOuSpecialtySemesterLabel).Width(200);

})

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.ServerOperation(false)

.Model(model =>

{

model.Id(c => c.AttendeeId);

})

)

.Events(ev => ev.DataBinding("athena.studentItineraries.childDataBinding").DataBound("athena.studentItineraries.childDataBound"))

.Sortable(x => x.Enabled(true))

.Filterable(x => x.Enabled(true))

.Pageable(pgb => pgb.Enabled(false))

.Groupable(gr => gr.Enabled(false))

.ToClientTemplate())

</text>

);

}).Deferred()

.ToClientTemplate()

)

</script>

So, in the detailInit of the master grid, we take the data from sender event(master grid), and we fill child's grid dataSource.data with this list of data like below:

function detailInit(e) {

var grid = $("#grid_" + e.data.StudentId).data("kendoGrid");

if (e.data.HasAttendee) {

// feed child grid with master data;

grid.dataSource.data(e.data.ItinerariesFlattened.toJSON());

}

So the problem here is, that our datetime fields as described above, are not working. After a bit research, i found that e.data.ItinerariesFlattened or e.data.ItinerariesFlattened.toJSON(), if i log the data to console i have an object like this

....//other string fields

BusRouteEndDate: "/Date(1561237200000)/",

BusRouteStartDate: "/Date(1538341200000)/"

BusStopArrivalTime: "/Date(1554784800000)/"

...//other string fields here

So i realized that date time fields, come in a format that was serialized during the first request. I have found a work around where I parse the datetime fields and then i feed the grid, which results in proper working date time fields. As shown below:

function detailInit(e) {

var grid = $("#grid_" + e.data.StudentId).data("kendoGrid");

if (e.data.HasAttendee) {

// feed child grid with master data;

var parsedData = e.data.ItinerariesFlattened.map(

attendee => {

var model = attendee || {};

model.AttendeeEventDate = w.kendo.parseDate(attendee.AttendeeEventDate);

model.BusStopArrivalTime = w.kendo.parseDate(attendee.BusStopArrivalTime);

return model;

}

);

grid.dataSource.data(parsedData);

}

So, after this try, where I hard 'coded' parsed the model fields i want, I have a dataSource where the date fields as described above, are proper date javascript object's, and not string like '"/Date(1538341200000)/"'. After this workaround, my date fields filtering works without a problem. But as i mentioned, I think that this way is hard coded and not easy to maintain, because we have always to check client side too, e.g if a property name will change, or if we want to add more date properties to the model.

So, is there any way I have proper bind my child grid from master's grids rendered data and all type of fields(maybe there are problems with other types too like boolean or smthn else dont know) ?

Thnx in advance

Grid

answered on 23 Apr 2019

2 answers

733 views

Duplicated Grid Pager Controls

Hello, I'm having troubles after update with the pagination controls in the grids.

The "k-pager-nav" controls are getting duplicated and the buttons to the right and to the left of the pagination numbers are blocked. The ones that works are the second button group.

Here is an image of the grid pagination with the duplicated controls.

Thank you!

Grid

answered on 22 Apr 2019

1 answer

573 views

Getting ListBox Item Sequence

I have a listBox that I can manually sort using the toolbar buttons. The ListBox is in a form, so when I submit a form, the items in that list box get submitted as an int array. However, regardless of how I sort the ListBox, the array of items is always in the same order. I assume that, as there is functionality to interactively sort a list box, there is a method to get that sequence out. I can't find an example of how this might be achieved in the context of a listbox in a form. Could you provide some pointers? Thanks.

Ian Parsons.

ListBox

answered on 22 Apr 2019

5 answers

677 views

Add New Item (MVC)

I'm trying to set up a MultiSelectFor to be used NoDataTemplate, but the pop-up just never seems to appear. There is an HTML5 version on the site,but not one for MVC: http://demos.telerik.com/kendo-ui/multiselect/addnewitem

Here is what I have wrriten, but the template never appears

<script id="@noDataTemplateID" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.input.val() #' ?

</div>

<br />

<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>

</script>

<script>

//the actual data won't get synced to the server, but that's okay because when we save this new item on the update of the parent model, we presumably will grab that newly added item on the next read

function addNew(widgetId, value) {

var widget = $("#" + widgetId).getKendoMultiSelect();

var dataSource = widget.dataSource;

if (confirm("Are you sure?")) {

dataSource.add({

ProductID: 0,

ProductName: value

});

dataSource.one("requestEnd", function (args) {

if (args.type !== "create") {

return;

}

var newValue = args.response[0].ProductID;

dataSource.one("sync", function () {

widget.value(widget.value().concat([newValue]));

});

dataSource.sync();

}

</script>

@(

Html.Kendo().MultiSelectFor(m => m)

.DataTextField(descriptionField)

.DataValueField(IDFIeld)

.NoDataTemplate(noDataTemplateID)

.DataSource(source =>

{

source.Read(read => {

read.Action("Read", "List", new { ListType = ListType, Param1 = Param1, Param2 = Param2, Param3 = Param3 });

})

.ServerFiltering(true);

})

)

MultiSelect

answered on 19 Apr 2019

13 answers

559 views

Kendo file / is included more than once

Anyone know why I'm getting a javascript error saying: "Kendo file / is included more than once"? Sometimes it doesn't show this error, but most of the time it does. Below is my layout.cshtml. Any help would be greatly appreciated!

<!DOCTYPE html>

<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/kendo.aspnetmvc.min.js")"></script>
@RenderSection("HeadContent", false)

@*using the bundles instead*@
@*@Styles.Render("~/Content/test.css")*@
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</head>
<body>
<header>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>

<footer>
<div class="content-wrapper">
</div>
</footer>
</body>
</html>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>

<script src="~/signalr/hubs"></script>

General Discussions

answered on 19 Apr 2019

1 answer

431 views

Filtering date as string

Hi,

I'm evaluating the grid with the trial version to see if your solution fits into our web application.

I'm trying to adapt the grid in our web asp.net MVC and I've encountered a problem with the filters date.

We need to enter "> = 1.1.2018" or "1.1.2018#31/12/2018" and it reaches FileDescriptor request as a value. With this i build the query to launch the SQL server.

Now no Filters arrive to request from ajax "Consulta_Viajes"

@(Html.Kendo().Grid<ViewModels.ViajesViewModel>()

.Name("grid")

.EnableCustomBinding(true)

.Columns(columns =>

{columns.Bound(c => c.itdavia).Hidden();

columns.Bound(c => c.ctdavia).Title(LocalizationResources.Strings.viaje);

columns.Bound(c => c.ctrnest).Title(LocalizationResources.Strings.codigo_estado);

columns.Bound(c => c.dtrnest).Title(LocalizationResources.Strings.estado);

columns.Bound(c => c.ftdavia).Title(LocalizationResources.Strings.fecha_viaje).Groupable(false).Format("{0:dd/MM/yyyy}").Width(150);

columns.Bound(c => c.htdavia).Title(LocalizationResources.Strings.hora_viaje).Groupable(false).Format("{0:HH:mm}");

columns.Bound(c => c.cdvn).Title(LocalizationResources.Strings.codigo_division);

})

.Scrollable()

.Groupable()

.Sortable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row)

.Extra(false))

.Pageable()

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Read("Consulta_Viajes", "AsignacionMensajero", new { strTabla = "tdavia" })

.ServerOperation(true)

)

.Deferred(true)

.AutoBind(false))

How can I do this?

Thanks in advance.

Regards.

Grid

answered on 19 Apr 2019

11 answers

2.5K+ views

Execute javascript function when openning any kendo window

Hi,

In our app we have a js frunction to prevent the autocomplete of inputs and textboxes:

function autoCompleteOff() {

// https://developer.mozilla.org/es/docs/Web/Security/Securing_your_site/desactivar_autocompletado_formulario

$(':text, form').attr('autocomplete', 'nope');

}

The function it's loaded when the app starts so that be executed in every form we have.

The problem that we have is that when we open a kendo window the function it's not working and the text boxes show possible options to select.

We would like know how to load this function and prevent these suggestions.

We could add a call in each window but it does not seem like the best option. We believe that it should be defined only once. Any idea how to fix it?

Thanks in advance.

General Discussions

answered on 17 Apr 2019

1 answer

55 views

Alter 'Year' View to be 3 months per row

Hello,

I have a requirement to alter the 'Year' view to have 3 months per row which would make it 4 rows of 3 months. Is this something that is currently possible to achieve?

Thank you
Lucy

DatePicker

answered on 16 Apr 2019