Questions on UI for ASP.NET Core Forum

2 answers

2.1K+ views

[Solved] Kendo UI MVC grid page size drop down not working

This Kendo UI MCC grid has issues with the page size drop down either not dropping down or if it does the page sizes are displaying to the left. There are no custom .CSS that could be overriding it.

I have Googled this and read about an hour of posts and tried different things but it is not working. I have the latest release installed. The grid has 500 records to show and I have set to display 50 items at a time with a page sizes[] array defined.

.Pageable(pageable => pageable
.PageSizes(new[] { 20, 50, 100, 500 })
.PageSizes(true)
.Info(true)
//.Messages(x => x.Display("{0}-{1} from {2} Cross Reference Records").Empty("No Results"))
.Enabled(true)
.PreviousNext(true)
.Input(true)
.Numeric(true)
.Refresh(true)
//.PageSizes(true)
.ButtonCount(10)
.Refresh(true)
)

Any help would be appreciated.

Thanks

Grid

answered on 05 Jul 2018

1 answer

114 views

[Solved] Client Template not flush with grid cell

Hi, I wanted to ask how I could get html displayed in a grid cell via a Client Template to line up with the left side of the grid. I've played around with some css but nothing I'm doing seems to work. I've include a screenshot of what's happening and below is an example of my code.

function getAlarmTypes(typesArray) {

var allTypes = ""

typesArray.forEach(function (element) {

allTypes += "<li><strong>" + element.optionDesc.trim() + "</strong></li>"

value = element.gcfDataValue

if ((value & 1) == 1) {

//bit 0

allTypes += "<li>Shutdown</li>"

}

if ((value & 2) == 2) {

//bit 1

allTypes += "<li>Fault</li>"

}

if ((value & 4) == 4) {

//bit 2

allTypes += "<li>Non-Latching</li>"

}

if ((value & 8) == 8) {

//bit 3

allTypes += "<li>Sequence Controlled</li>"

}

if ((value & 16) == 16) {

//bit 4

allTypes += "<li>Autocrossover</li>"

}

if ((value & 32) == 32) {

//bit 5

allTypes += "<li>RBS Shutdown</li>"

}

if ((value & 64) == 64) {

//bit 6

allTypes += "<li>Run Responce</li>"

}

});

return ("<class=\"analogType\"><ul style=\"list-style-type:none; left:-50px\">" + allTypes + "</ul></class>").trim()

}

Grid

answered on 05 Jul 2018

2 answers

387 views

The aggregates in the grid using tag helper

Hi.

I've been trying for so long time to understand how to adjust an aggregate inside of a grid, but I think I cannot to do this because of missing a documentation that could be helpful. I am not sure if it's possible for the actual moment or not, but I am trying to create an aggregate sum my columns ( Price/Quantity).

Any advice on how to do this?

<kendo-grid name="PartData"

auto-bind="true">

<datasource type="DataSourceTagHelperType.Custom"

server-filtering="true"

server-sorting="true">

<transport>

<read url="@Url.Action("OrderLines_Read", "Order", new { id = Model.Number })" />

</transport>

<aggregates>

<aggregate field="Total" aggregate="sum"/>

<aggregate field="ReservedAmount" aggregate="sum"/>

</aggregates>

</datasource>

<columns>

<column field="TotalPrice" title=" " hidden="true" html-attributes='new Dictionary<string, object> { ["class"] = "visible-xs-block" }' footer-template="<div>Total: #= sum #</div>" template="#=mobileTemplate(data)#"></column>

<column field="PartNumber" title="Part Number" min-screen-width="767"></column>

<column field="PartName" title="Name" min-resizable-width="767"></column>

<column field="ReservedAmount" title="Quantity" footer-template="<div> #= sum #</div>" width="100" min-screen-width="767"></column>

<column field="TotalPrice" title="Price" footer-template="<div> #= sum #</div>" width="100" min-screen-width="767"></column>

</columns>

</kendo-grid>

Thanks in advance

BTW, my an actual version of the library that I use - 2018.2.530

Grid

answered on 05 Jul 2018

1 answer

296 views

Tag Helpers CRUD

I have the following configuration of the Grid:

<kendo-grid name="grid">
<datasource type="DataSourceTagHelperType.Custom" page-size="5">
<transport>
<read url="https://thefishroommvccore.azurewebsites.net/api/PageContents" />
<destroy url="https://thefishroommvccore.azurewebsites.net/api/PageContents/7" />
</transport>
<schema>
<model id="Id">
<fields>
<field name="Name" type="text"></field>
<field name="Content" type="text"></field>
<field name="PublishDateTime" type="date"></field>
</fields>
</model>
<model>
<fields>
<field name="PublishDateTime" type="Date"></field>
</fields>
</model>
</schema>
</datasource>
<groupable enabled="true" />
<sortable enabled="true" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
</pageable>
<filterable enabled="true" />
<columns>
<column field="Name" title="Name" width="240" />
<column field="Content" title="Content" width="240" />
<column field="PublishDateTime" title="Date" format="{0:MM/dd/yyyy}" />
<column field="Id" title="Id" width="150" />
<column title="Edit">
<commands>
<column-command name="edit"></column-command>
<column-command name="delete" name="destroy"></column-command>
</commands>
</column>
</columns>
</kendo-grid>

I can view sort all works... the one thing I cannot get to work is the delete which I have hard coded right now to delete record with Id of 7. I'm following the docs at: https://docs.telerik.com/aspnet-core/helpers/tag-helpers/grid

Right now Delete is doing nothing... no errors in page nothing. I don't understand what it is I need to do to delete a record. The service is just a Web Api with Crud. I can do Crud operations in Postman no problem.

Grid

answered on 03 Jul 2018

2 answers

119 views

[Solved] Getting name of dropdown menu that filters grid

Hi, I'm currently trying to filter a grid using an external component like the dropdown menu. I've used the instructions found in this form thread.
How would I pass the name of the drop down menu as well as the id or text data associated with the selection.
For example here is my current code:

Javascript

<script>

var menuName

var menuItem

function additionalData(e) {

return {

item: menuName + " " + menuItem

}

function onChange(e) {

//What would I put here to get the name or id of the dropdown? id, name, &ct.toString() do not work

menuName = this.name()

menuItem = this.text()

var grid = $("#analogGrid").data("kendoGrid")

grid.dataSource.read()

}

</script>

Grid HTMLHelper

//...

.Read(read => read.Action("Analogs_ReadAsync", "Analogs").Data("additionalData"))

//...

Controller Action

public async Task<JsonResult> Analogs_ReadAsync([DataSourceRequest]DataSourceRequest request, string item) {...}

Grid

answered on 02 Jul 2018

1 answer

1.1K+ views

Nuget package location for older versions

Hello we currently use old versions of different telerik controls, where can I find the nugget packages for these versions can you please point me to there location. Below are the once which I am looking for along with there version.

Telerik.Web.UI                                                                      2017.3.913.40
Telerik.Web.UI.Skins                                                            2017.3.913.40
Telerik.Windows.Documents.Core                                       2015.3.1111.40
Telerik.Windows.Documents.Flow                                        2015.3.1111.40
Telerik.Windows.Documents.Spreadsheet                           2015.3.1111.40
Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml   2015.3.1111.40
Telerik.Windows.Maths                                                          2015.3.1111.40
Telerik.Windows.Zip                                                               2015.3.1111.40

Installer and VS Extensions

answered on 02 Jul 2018

1 answer

1.9K+ views

The right way to handle server-side paging

I'm having trouble figuring out how to create a REST API to service a Kendo UI Grid. Option #1 - use the REST API for paging, Option #2 - read the entire result set at once and have the Grid control handle the paging.

Here are the problems I've run into with both:

1) I pass the Page and PageSize parameters through the query string. The service get them, queries the data model, and returns just the number of records requested (e.g. 50 items from page 4). The problem is that the paging controls then shows *page size* for the number of items in the grid. That is, if my page size is 50 and there are 3,000 records in the result set, the Grid shows a total 50 with a displays a single "page" button on Page 1. How do you force the Kendo UI Grid to use the total number of records? How do you do this without running the query twice (once for the total, a second time to apply the Skip and Take values)?

2) I only have 3,000 records, so it's really no big deal to read the whole data set, but each time I hit the 'page forward', I get a spinner and the request for the entire data set goes out again. Is there any way to tell the Kendo Grid to suck down the entire set of 3,000 records, but locally page in chunks of, say, 50 items per page.

General Discussions

answered on 29 Jun 2018

3 answers

254 views

[Solved] Getting name of dropdown menu that filters grid

Hi, I'm currently trying to filter a grid using an external component like the dropdown menu. I've used the instructions found in this form thread.

How would I pass the name of the drop down menu as well as the id or text data associated with the selection.

For example here is my current code:

Javascript

<script>

var menuName

var menuItem

function additionalData(e) {

return {

item: menuName + " " + menuItem

}

function onChange(e) {

//What would I put here to get the name or id of the dropdown? id, name, &ct.toString() do not work

menuName = this.name()

menuItem = this.text()

var grid = $("#analogGrid").data("kendoGrid")

grid.dataSource.read()

}

</script>

Grid HTMLHelper

//...

.Read(read => read.Action("Analogs_ReadAsync", "Analogs").Data("additionalData"))

//...

Controller Action

public async Task<JsonResult> Analogs_ReadAsync([DataSourceRequest]DataSourceRequest request, string item) {...}

Grid

answered on 29 Jun 2018

1 answer

311 views

Format not applying to column

I have the following code:

.Columns(columns => {

columns.Bound(c => c.CreatedDateTime).Width(180).Format("{0: dd MMM yyyy HH.mm}").Title("Date");

columns.Bound(c => c.Action.ActionDateTime).Format("{0: dd MMM yyyy HH.mm}").Width(280).Title("Action Date");

})

Both columns show the date and the JSON seems to have both dates correctly passed through.

However the 1st one displays the date correctly and the second one does not.

1st DateTime: 01 May 2018 08.45

2nd DateTime: 2018-06-01T13:01:05

Further details:

The data is obtained from two joined tables using EF Core.

I had to add the Json option Referenceloophandling.ignore to get the data to pass through, though I doubt this has anything to do with the problem as the Telerik Grid obviously has the correct data.

Can someone please help me format this date correctly.

Thanks,

Ricky

Grid

answered on 29 Jun 2018

1 answer

587 views

[Solved] Unobtrusive Validation Fires Multiple Times

I am trying to use unobtrusive validation for an ajax form inside a window. However if the window is opened multiple times then closed the validation fires multiple times. If I move the script to the main page then the validation does not fire at all.

Where should I place the validation script and how do I get it to fire only once?

@model MyProject.Models.Input

@{

Layout = null;

}

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>

<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>

<script src="~/lib/jquery.unobtrusive-ajax/dist/jquery.unobtrusive-ajax.js"></script>

@*<form asp-controller="Home" asp-action="Edit"

data-ajax-begin="onBegin" data-ajax-complete="onComplete"

data-ajax-failure="onFailed" data-ajax-success="onSuccess"

data-ajax="true" data-ajax-method="POST">*@