Questions on UI for ASP.NET Core Forum

4 answers

1.0K+ views

Is there a way to ignore a model property when posting to an action from a grid? Delete, create, update etc. The property needs to be loaded with the grid in the read action but not posted to the delete, create and update actions.

Grid

answered on 01 Feb 2019

1 answer

126 views

2019.1.115 datepicker with weeknumber and custom css, bug?

Hello,

I'm running a .net core 2.1 mvc application.

I built a custom theme from the theme builder with the bootstrap 4 template (not many changes to this base template).

When i updated from 2018.3.1017 to 2019.1.115 i started having problems with datepickers with weeknumbers. See attached files.

If i downgrade to 2018.3.1017 the dates fit as expected in the datepicker.

Best regards,

Sebastian

Date/Time Pickers

answered on 01 Feb 2019

2 answers

80 views

Scss duplicate calc function

Hi,

I have used the telerik theme with Scss but today I found a problem with the autocomplete. After the file is compiled the generated class is

.k-autocomplete {
padding-right: calc( calc( 0.75rem + 17px)); }
.k-rtl .k-autocomplete, .k-autocomplete[dir="rtl"] {
padding-left: calc( calc( 0.75rem + 17px));
padding-right: 0; }

This is not the only class that generates this. The above is not a valid use of calc function in IE

General Discussions

answered on 01 Feb 2019

1 answer

78 views

Mobile?

Hi -

Is there a recommended approach to using this component in mobile? In my tests the component gets clipped when viewing on iPhone or similar device.

Thanks,

Matt

DateRangePicker

answered on 31 Jan 2019

1 answer

611 views

ooxml export to DocumentFormat.OpenXml on Server side

When exporting a ASP.NET Core Kendo Grid to Excel, we need to add a Custom Header and Footer to the Excel Spreadsheet. Please note, this does not mean we want to add a row to the Spreadsheet with Column Headers, this means we want to use what Excel calls "Custom Header" and "Custom Footer". The kendo ooxml export of the grid into an Excel spreadsheet does not seem to expose properties to set the Custom Header and Footer. As a note, these are custom headers and footers that do not show up with viewing the document in Excel, but DO print, when printing the document, so it can show disclaimers and things.

So, we are trying to open the Kendo exported ooxml on the Server Side to add the custom HeaderFooter elements, using the DocumentFormat.OpenXML Library in C#, before returning the file back to the user/client. After we convert the exported base64 string into a byte array and load it into a MemoryStream, we can successfully use the MemoryStream to create a SpreadsheetDocument object, however all the Workbook parts are empty. When we try to create a new SpreadsheetDocument, create new workbook parts, and try to insert our exported Sheet we received from Kendo, we get various errors on missing Root Elements or Perhaps other Parent Nodes.

Does anyone have an example of either converting a Grid exported ooxml Excel Sheet into a DocumentFormat.OpenXML Excel sheet in order to add <HeaderFooter> or a way of doing this on the client side, using the ooxml before we go to the Server?

Thank you,

Alan

Grid

answered on 31 Jan 2019

2 answers

384 views

Grid inside window with content-url .Net Core

Hello,

i'm trying to insert a view that includes a grid into a window but i get this error: GridAusiliOspite_Read_Parameters is not defined (but i've defined it in the View)

there is my code...

Thanks in advance

View to render inside window:

<div class="col-sm-10 col-sm-offset-1">

@(Html.Kendo().Grid<AusiliKendoGrid>().Name("GridAusili")

.Columns(columns =>

{

columns.Bound(p => p.Nome).ClientTemplate("#=Nome.Descrizione#");

columns.Bound(p => p.DataInizio);

columns.Bound(p => p.DataFine);

columns.Bound(p => p.Owner);

columns.Bound(p => p.GGpulizia);

columns.Command(command => command.Destroy());

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Pageable()

.Navigatable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(20)

.ServerOperation(true)

.Events(events => events.Error("error_handler"))

.Model(model => {

model.Id(p => p.Id);

//model.Field(p => p.Nome);

model.Field(p => p.Nome).DefaultValue(ViewData["DefaultAusilio"] as SGL.Models.EditorTemplatesModel.NomeAusiliModel);

})

.Create(create => create.Action("GridAusiliOspite_Create", "SchedaInserimento").Data("GridAusiliOspite_Create_Parameters"))

.Read(read => read.Action("GridAusiliOspite_Read", "SchedaInserimento").Data("GridAusiliOspite_Read_Parameters"))

.Update("GridAusiliOspite_Update", "SchedaInserimento")

.Destroy("GridAusiliOspite_Destroy", "SchedaInserimento")

)

</div>

<script>

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function GridAusiliOspite_Create_Parameters() {

return {

id_ospite: '@ViewData["idOspite"]'

};

}

function GridAusiliOspite_Read_Parameters() {

return {

id_ospite: '@ViewData["idOspite"]'

};

}

</script>

View where the window should appear:

<kendo-window name="window"

title="Ausili"

draggable="true"

resizable="true"

width="600"

on-close="onClose"

content-url="@Url.Action("Ausili", "SchedaInserimento")"

actions="actions">

<popup-animation enabled="false" />

</kendo-window>

<button type="button" class="col-sm-2 btn-sm btn-light" onclick="addAusili()">Ausili <i class="fab fa-accessible-icon"></i></button>

function addAusili() {

$("#window").data("kendoWindow").open();

}

Window

answered on 31 Jan 2019

1 answer

461 views

Menu Colors

How do I change the background color and the hover color of my Html.Kendo().Menu()?

<div id="responsive-panel">

@(Html.Kendo().Menu()

.Orientation(MenuOrientation.Vertical)

.Name("Menu")

.Items(items =>

{

items.Add().Text("Profile").Url("./Manage"); // else "/Index?handler=redirect"

items.Add().Text("Password").Url("Manage/ChangePassword");

items.Add().Text("Two-factor authentication").Url("Manage/TwoFactorAuthentication");

items.Add().Text("Personal data").Url("Manage/PersonalData");

})

)

</div>

Menu

answered on 29 Jan 2019

2 answers

93 views

Hide Columns in Hierarchical grid displays wrong column sizes in Firefox, Edge

I am using a hierarchical grid as per your demos for ASP.NET Core. When I call the hidecolumn() js function like so:
$("#CategoryGrid").data("kendoGrid").hidecolumn("Category4");, it does work as expected, but only for the Chrome browser. Firefox and Edge display a huge column size for the leftmost column with the expand button created by the hierarchical grid, (with the header class 'k-hierarchy-cell k-header'). When a column is removed in chrome the remaining column sizes expand uniformly, but in firefox and Edge, the leftmost column expands at a much faster rate, which will then shrink the rightmost columns with the actual data to below their minimum sizes. Is there an easy fix for this?

Thank you.

Grid

answered on 28 Jan 2019

3 answers

119 views

Filter from html form

Hello,

I have a grid that I would like to work with an html form.

Right now the form an grid work just fine. What i am trying to do is pass parameters to the method that runs the actual query. When I add in the parameters that is when the issue arises, instead of the results going back into the grid i get a page of json results. Any help would be greatly appreciated.

@(Html.Kendo().Grid<MVCPROJECT.ViewModels.FormViewModel>()
.Name("SearchResultsGrid")
.Columns(columns =>
{
columns.Bound(c => c.FirstName).Width(120).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.LastName).Width(120).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.Agency).Width(120).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.Address1).Width(120).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.City).Width(120).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.PhoneNumber).Width(130).Filterable(false);
columns.Bound(c => c.ServiceName).Width(150).Filterable(ftb => ftb.Multi(true));
columns.Bound(c => c.ClientType).Width(120).Filterable(ftb => ftb.Multi(true));
})
.NoRecords()
.Mobile()
.Pageable(pager => pager.PageSizes(new int[] { 10, 20, 50 }))
.Sortable()
.Filterable()
.Pageable(pager => pager.ButtonCount(5))
.Scrollable()
.Navigatable()
.HtmlAttributes(new { style = "height:550px;font-size:12px" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("SearchResults", "ProviderSearch"))
))

public ActionResult SearchResults([DataSourceRequest]DataSourceRequest request, string ClientType, int? ZipCode, int? Distance, string County, string[] ProviderServices)
{
return Json(GetSearchResults(ClientType).ToDataSourceResult(request));
}

Grid

answered on 28 Jan 2019

13 answers

2.3K+ views

Dynamic Grid with DataTable

Hello,

It seems that there is no Extension method in Kendo.Mvc.Extensions for MVC Core to use Dynamic Grid with DataTable?

"DataTable" does not contain a definition for "ToDataSourceResult", and the overloading of the optimal extension method "QueryableExtensions.ToDataSourceResult (IEnumerable, DataSourceRequest)" requires an IEnumerable

how to use a datatable in ASP.NET MVC Core Version of the grid?

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

DataTable products = Products();

return Json(products.ToDataSourceResult(request));

}

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

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{