Questions on UI for ASP.NET Core Forum

1 answer

566 views

How to catch popup template save button click

Is there a way to catch the click event for this and the cancel button?

Thanks … Ed

Grid

answered on 11 Feb 2020

3 answers

96 views

One to One relation

Hi,

I have a class with more than 60 fields. Our quality gate doesn't allow more than 20 fields. So I factorized my code and have some class with one to one relations.

Is there something that I can use to have only one grid with all my fields?

I tried something like this, and got an error data.AppFacts is undefined :

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(a => a.Name);

columns.Bound(a => a.AppData.DatabaseInstances);

columns.Bound(a => a.AppFacts.ApplicationType);

}

)

I tried with columns.ForeignKey, but I don't think I have understand how it work.

I'm a new developer, so it might be obvious but I tried.

Grid

answered on 11 Feb 2020

11 answers

1.4K+ views

Editing custom editor - Not working in PopUp Mode & Dynamic

Hello,

I'm trying to built a reusable grid component with Kendo Grid (ASP.NET Core) but I'm finding some problems with its configuration.

Taking the example, https://demos.telerik.com/aspnet-core/grid/editing-custom, if we configure edition mode as PopUp, the result form doesn't show the custom field.

Same happens if we change the grid type Grid<Kendo.Mvc.Examples.Models.ProductViewModel>() -> Grid<dynamic>(). In this case to configure fields I use the overload with (Type memberType, string memberName) params.

Do I need to configure something else?

One solution is to use the Foreign configuration, like this https://demos.telerik.com/aspnet-core/grid/foreignkeycolumn, but with grid type dynamic (Grid<dynamic>()) grid disappears and no errors are shown.

What I need would be the edition mode to be PopUp and the grid type dynamic. How can I do that?

Thank you.

Best Regards,

Ivan

Grid

answered on 10 Feb 2020

2 answers

411 views

Tag Helper Grid Column Resizing Not Working

I have a grid I've created using the tag helper. Hovering over the column lines does not show the resize pointer. How do I enable column resizing for the grid? I tried removing the set widths for the columns but that doesn't seem to make a difference.

<kendo-grid name="grid">

<datasource type="DataSourceTagHelperType.Ajax" server-operation="false" in-place-sort="true" page-size="10">

<transport>

<read url="/admin/logs/app?handler=Read" type="Get" />

</transport>

<sorts>

<sort field="TimeStamp" direction="desc" />

</sorts>

</datasource>

<toolbar>

<toolbar-button name="search"></toolbar-button>

<toolbar-button name="excel"></toolbar-button>

</toolbar>

<sortable enabled="true" initial-direction="ascending" />

<filterable enabled="true" />

<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">

</pageable>

<scrollable enabled="true"/>

<excel file-name="appliationlog.xls"/>

<columns>

<column field="TimeStamp" template="#=template(data)#" title="Time" width="120" />

<column field="UserName" title="User" width="180" />

<column field="Level" title="Level" width="60" />

<column field="RequestUri" title="URL" width="200" />

<column field="Message" title="Message" width="300" />

</columns>

</kendo-grid>

Grid

answered on 07 Feb 2020

16 answers

545 views

Sort Category Axis based on # of Items

I am trying to get the category axis values to be sorted in descending order based on the number of items they have. Also, I am using a Bar Chart not a Grid. I have tried this group compare:

group: { field: "category", dir: "desc",

compare: function(a, b) {if (a.items.length === b.items.length) {return 0;} else if (a.items.length > b.items.length) {return 1;} else {return -1;}}}

as stated in this documentation and advised by Admin Alex https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/group#groupcompare

I'll attach an image of what it looks like with that function in use. As you can see on the image, although one of my categoriy values has an item count of 24 which is the second highest, it is still near the bottom because it does not contain any items from the first Environment which is in the legend as "QA FT".

The only function that has managed to overwite this is one that sorts them but based on alphabetical order and it is a databound event. Here is the function:

function sortLabels(e) {
var axis = e.sender.options.categoryAxis;
axis.categories = axis.categories.sort();

}

Another thing I have tried has been:

Thank you,

DC

Chart

answered on 07 Feb 2020

6 answers

264 views

Treeview - onload of page select checkboxes with specific id

I am trying to select checkboxes in Treeview on load using javascript or jquery. I have tried the following dojo code, but I am getting .dataitems() undefined in console.

Does anyone know why?

TreeView

answered on 07 Feb 2020

5 answers

1.0K+ views

Dropdownlist add new item inside grid cell

Hi

My grid table need to include dropdownlist in one of the cell, and i need to allow user to Add new item to the dropdownlist.

But i not sure how to select and display the New Item after i added the value to database.

Please help.

function addNewServiceProviderRole(widgetId, value) {

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

var formData = new FormData();

formData.append("role", value);

$.ajax({

type: 'POST',

url: '/ServiceProviderRole/AddServiceProviderRole',

beforeSend: function (xhr) {

xhr.setRequestHeader("XSRF-TOKEN",

$('input:hidden[name="__RequestVerificationToken"]').val());

},

contentType: false,

processData: false,

data: formData,

success: function (result) {

if (result.Errors != null && result.Errors.length > 0) {

}

else {

}

});

}

This is my template.

@using Kendo.Mvc.UI

@(Html.Kendo().DropDownListFor(m => m)

.DataValueField("IServiceProviderRoleId")

.DataTextField("URole")

//.BindTo((System.Collections.IEnumerable)ViewData["roles"])

.Filter(FilterType.Contains)

.NoDataTemplateId("noDataTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.Read(r => r.Url("/ServiceProviderRole/GetAllServiceProviderRole").Data("forgeryToken")))

)

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

<div>

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

</div>

<br />

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

</script>

DropDownList

answered on 07 Feb 2020

6 answers

429 views

Bind DropDropDownListFor in ListView Template Asp.net Core

I have a list view template that contains a Kendo DropDownListFor. I can't figure out how to bind to a property of my model. The code that I tried is below I commented out the bindto. My model is ContactViewModel with a property of a List of ContactAddress with properties of FullStreetAddress and ContactAddressId. I am not sure how to set this up. Any help would be appreciated.

<script type="text/x-kendo-template" id="contacttemplate">

        <div>

@(Html.Kendo().DropDownListFor(m=>m.SelectedContactAddressId)

.Name("addressDropDown")

.DataTextField("FullStreetAddress")

.DataValueField("ContactAddressId")

//.BindTo(#:ContactAddresses#) // Normally non template .BindTo(Model.ContactAddresses) This is a error also

.ToClientTemplate()

)

ListView

answered on 06 Feb 2020

1 answer

967 views

Upload control : upload file twice, in ajax and with final POST submit button

Hello,

I have posted the following question on Stack Overflow :

https://stackoverflow.com/questions/60001543/telerik-upload-control-in-mvc-core-upload-file-twice-in-ajax-and-with-final

Basically, I need to be able to post the file in a Telerik Upload control twice : in async mode (works fine), and at final POST of the form with a submit button. The file is not posted with the submit button in form, despite the form seem to be correctly declared.

I guess this is due to the fact to have enabled Async mode on the upload control.

The control is defined like this :

@(Html.Kendo().Upload()

.Name("fileUpload")

.Multiple(false)

.Async(a => a

.Save("AnalyzeFile", "Request")

.AutoUpload(true)

)

.Events(e => e.Success("onUploadOperationSuccess"))

.Validation(validation => validation.AllowedExtensions(new[] { ".csv" }))

.HtmlAttributes(new { style = "width:100%" }))

and the form :

@using (Html.BeginForm("Save", "Request", FormMethod.Post, new { @class = "form-horizontal", id = "requestForm", enctype="multipart/form-data" }))

{

...

<button id="finalSubmit" type="submit" class="k-button k-primary">Valider</button>

}

You can find more details (but the most important part is here) in previous link.

Thanks for help

Upload

answered on 06 Feb 2020

2 answers

137 views

Destroy action not fired

Hello,

my problem is related to the destroy action, when called a js error is returned (see attached file), but when you call an update on another task the gantt fires the update and then the pending destroy action.

my destroy action:

[AcceptVerbs("Post")]

public

ActionResult ResourcePlanningDeleteLogic([DataSourceRequest] DataSourceRequest request, ResourcePlanningViewModel ResourcePlanning)

{

if (ResourcePlanning != null && ModelState.IsValid)

{

_resourcePlanningService.Deletelogic(ResourcePlanning);

}

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

}

my gantt:

@(Html.Kendo().Gantt<ResourcePlanningViewModel, ResourcePlanningDependencyViewModel>

()

.Name("gantt")

.Columns(columns =>

{

columns.Bound(c => c.Title).Title("Pianificazione").Width(150).Editable(false).Sortable(true);

columns.Bound(c => c.Start).Format("{0: dd/MM/yyyy}").Title("Data Da").Width(50).Editable(false).Sortable(true);

columns.Bound(c => c.End).Format("{0: dd/MM/yyyy}").Title("Data A").Width(50).Editable(false).Sortable(true);

columns.Bound(c => c.ConsRuleHours).Title("H Reg Cons").Width(60).Editable(false).Sortable(true);

columns.Bound(c => c.IsFrozen).Title("Congelata").Width(50).Editable(false).Sortable(false);

})

.Views(views =>

{

views.DayView();

views.WeekView(weekView => weekView.Selected(false)).DayHeaderTemplate("#=kendo.toString(start, 'dd/MM')#");

views.WeekView(weekView => weekView.Selected(false)).WeekHeaderTemplate("#=kendo.toString(start, 'D')# - #=kendo.toString(kendo.date.addDays(end, -1), 'D')#").Selected(true);

views.MonthView(monthView => monthView.Selected(false).MonthHeaderTemplate("#=kendo.toString(start, 'M')#")).WeekHeaderTemplate("#=kendo.toString(start, 'dd/MM')#");

})

.Height(700)

.ShowWorkHours(false)

.ShowWorkDays(false)

.Snap(false)

.Toolbar(tb => tb.Pdf())

.DataSource(d => d

.Model(m =>

{

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

m.ParentId(f => f.ParentID);

m.Field(f => f.Expanded).DefaultValue(false);

})

.Read(read => read.Action("ResourcePlanningRead", "ResourcePlanning"))

.Destroy("ResourcePlanningDeleteLogic", "ResourcePlanning")

.Update(update => update.Action("ResourcePlanningUpdate", "ResourcePlanning").Data("onUpdateCreate"))

)

.DependenciesDataSource(d => d

.Model(m =>

{

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

m.PredecessorId(f => f.PredecessorID);

m.SuccessorId(f => f.SuccessorID);

})

.Read("ReadResourcePlanningDependencies", "Gantt")

)

.Pdf(pdf => pdf

.FileName("Pianificazione Risorse.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Gantt"))

)

.Editable(editable => editable.Create(false)

.Resize(false)

.DragPercentComplete(false)

.Reorder(false)

.DependencyCreate(false)

.DependencyDestroy(false)

.Confirmation(true)

.Destroy(true)

.Move(false)

.TemplateId("TaskEditorTemplate")

)

.Messages(m => m.Save("Salva")

.Cancel("Annulla")

.Destroy("Cancella")

.DeleteTaskConfirmation("Sei sicuro di voler cancellare la pianificazione?")

.DeleteTaskWindowTitle("Cancella Pianificazione")

.Editor(e => e.EditorTitle("Aggiorna Pianificazione")

.AssignButton("Aggiungi Regola di Consuntivazione")

.ResourcesEditorTitle("Regola di Consuntivazione"))

.Views(v => v.Day("Giornaliera")

.Week("Settimanale")

.Month("Mensile"))

.Actions(a => a.Pdf("Esporta in PDF"))

)

Is there maybe a data error that prevents the first call to the destroy action?

Gantt

answered on 06 Feb 2020