Questions on UI for ASP.NET Core Forum

2 answers

394 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

524 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

250 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

384 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

935 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

132 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

580 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

449 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