Questions on UI for ASP.NET Core Forum

5 answers

1.1K+ 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

473 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

994 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

146 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

6 answers

631 views

Show/Hide Detail row on condition

Hi,

how to Show/Hide Detail row on condition with value from grid datasource?

robert

Grid

answered on 06 Feb 2020

3 answers

470 views

Documentation for Core 3 and razor pages?

Is there any documentation available on how to get Grid working in razor pages with core 3? All I can find is either incomplete or for MVC.

Specifically I'm looking for something that documents how to pass in page index/size so that the data provider function can only fetch the rows needed from the DB. So either a custom reader or something.

The official docs don't have anything.

I've found the razor pages examples on github here : https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages

But they don't have any explanation about why things are done the way they are in each case and what specifically is needed to make things work in razor.

I've tried to adapt those examples in my own case but although I can get the grid to call the read method, the grid remains empty.

Grid

answered on 06 Feb 2020

1 answer

318 views

Nuget Update does not include updated JS

Is it expected that the JS files would not be updated with a nuget update?

Installer and VS Extensions

answered on 03 Feb 2020

8 answers

1.5K+ views

passing data from view to controller

Hello,

I would like to know how to pass the data from my "SelectedPosteSelectList" to my controller. When I submit my form, my "SelectedPosteSelectList" is null.

Thank you

public class EquipeViewModel

{

public string Nom { get; set; }

public string Description { get; set; }

public List<SelectListItem> PostesSelectList { get; set; }

public List<SelectListItem> SelectedPosteSelectList { get; set; }

}

<form asp-action="Edit">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="form-group">

<label asp-for="Nom" class="control-label"></label>

<input asp-for="Nom" class="form-control" />

<span asp-validation-for="Nom" class="text-danger"></span>

</div>

<div class="form-group">

<label asp-for="Description" class="control-label"></label>

<input asp-for="Description" class="form-control" />

<span asp-validation-for="Description" class="text-danger"></span>

</div>

<input type="hidden" asp-for="Id" />

<div id="example" role="application">

<div class="demo-section k-content wide">

<label for="optional" id="employees">Postes</label>

<label for="selected">@Model.Nom</label>

<br />

@(Html.Kendo().ListBox()

.Name("Postes")

.Toolbar(toolbar =>

{

toolbar.Position(ListBoxToolbarPosition.Right);

toolbar.Tools(tools => tools

.TransferTo()

.TransferFrom()

.TransferAllTo()

.TransferAllFrom()

);

})

.Selectable(ListBoxSelectable.Multiple)

.ConnectWith("SelectedPosteSelectList")

.BindTo(Model.PostesSelectList)

)

@(Html.Kendo().ListBox()

.Name("SelectedPosteSelectList")

.BindTo(@Model.SelectedPosteSelectList)

.Selectable(ListBoxSelectable.Multiple)

)

</div>

<div class="form-group">

<input type="submit" value="Sauvegarder" class="btn btn-success" />

<a class="btn btn-filter" asp-action="Index">Retour</a>

</div>

</form>

public async Task<IActionResult> Edit(int id, EquipeViewModel equipeView)

ListBox

answered on 30 Jan 2020

1 answer

152 views

Custom Popup Edit Template troubles

Hi,

I have a template that I want to display certain controls if I am editing and others if I am creating new.

I have the code shown below but it does not work. It seems that the template is initialized at the time the parent is loaded.

How can I display the dropdown list in create mode and the textbox in edit mode?

The code below doesn't work but shows what I am trying to do.

Thanks … Ed

<div class="form-group">

<label class="LabelStyle">Vial</label>

@{

if (Model != null && Model.IsCreatingNew)

{

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

.AutoBind(true).DataValueField("VialId").DataTextField("VialName")

.DataSource(source =>

{

source.Ajax()

.Read(r => { r.Url("?handler=VialsRead").Data("forgeryToken"); });

}).HtmlAttributes(new { style = "width:150px" }))

<span asp-validation-for="VialId" class="text-danger"></span>

}

else

@(Html.TextBoxFor(m => m.VialName, new { @class = "border-0", @readonly = "true", @style = "width:50px; margin-top:-8px" }))

}

</div>

Grid

answered on 30 Jan 2020

11 answers

520 views

PanelBar.Text - Multi Line

Is there a way to have multiple lines (with different styles)? Kinda like this:

Main Text LIne

This is my Sub Text

Thanks for your help,

Joel

PanelBar

answered on 29 Jan 2020