Questions on UI for ASP.NET Core Forum

1 answer

72 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

582 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

362 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

443 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

89 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

112 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.2K+ 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)

{

var c = columns.Bound(column.ColumnName);

}

})

.Pageable()

.Sortable()

.Filterable()

.Groupable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

var id = Model.PrimaryKey[0].ColumnName;

model.Id(id);

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

{

var field = model.Field(column.ColumnName, column.DataType);

if (column.ColumnName == id)

{

field.Editable(false);

}

})

.Read(read => read.Action("Read", "Home"))

)

Grid

answered on 25 Jan 2019

2 answers

239 views

Updating headers in ItemDataBound breaks sorting

I have a RadGrid that's losing the ability to sort columns by clicking the column header. I've narrowed it down to some code in my ItemDataBound method that updates the header text. If I remove this code, clicking the column headers works properly. But when I put it back, sorting is disabled.

Here's my grid:

<telerik:RadGrid ID="RadGrid1" runat="server"

AllowSorting = "true"

OnNeedDataSource="RadGrid1_NeedDataSource"

OnItemDataBound="RadGrid1_ItemDataBound"

OnPreRender="RadGrid1_PreRender"

RenderMode="Classic"

Skin="Windows7">

</telerik:RadGrid>

Here's my ItemDataBound method:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) {

if (e.Item is GridHeaderItem) {

GridHeaderItem header = (GridHeaderItem)e.Item;

header["MONTH_NAME_LONG"].Text = "Month";

}

Any idea why this is happening?

Grid

answered on 23 Jan 2019

4 answers

1.1K+ views

Performance for huge data sets

Hello,

I have an application that has many different tables that need to be presented to the user - some of these have over 200k rows of data.

We currently use a very bad and basic search feature, along with .skip(x), .take(x) to only get a certain amount of data per page.

What I do above works, but lacks more advanced filtering.

I'm currently evaluating and looking at grid, but, I am very confused - it supports paging and by increasing the sample app to return 200k items, I can see through network monitoring that it only pulls the single page at a time, however, I'm getting lost trying to evaluate this product...

... The docs don't seem to go in to that much details and the demos page seems to be better, but neither give any information about performance tuning, limiting the result set and similar - I'm worried that if I link this to the live data, I'm going to introduce a lot of problems.

Are there any other documentation bits that I am missing?

Grid