Questions on UI for ASP.NET Core Forum

1 answer

2.5K+ views

Binding to foreach variable using kendo grid

Hello,

I'm having problems creating multiple grids split by a column value, when the view is rendered I can see the the json in the script tags but nothing is rendered. Teh following works as repeating tables without using a kendo grid,

MODEL:

public class tblProducts

{

//SQL table is named tblProducts

[Key]

public int ID { get; set; }

public DateTime Date { get; set; }

public string Field1 { get; set; }

public string Field2 { get; set; }

public string Product { get; set; } //<<Want separate tables split by this field

}

public class IndexViewModel

{

public List<tblProducts> Products { get; set; }

public List<string> Titles { get; set; }

Public IndexViewModel()

{

Products = new List<tblProducts>();

Titles = new List<string>();

}

CONTROLLER:

public class tblProductsController : Controller

{

public async Task<IActionResult> Index()

{

var allProducts = await _context.tblProducts.ToListAsync();

var titles = allProducts.Select(x => x.Product).Distinct();

var model = new Models.IndexViewModel()

{

Products = allProducts,

titles = titles

};

return View(model);

}

VIEW:

@model ProjectMVC.Models.IndexViewModel

@{

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

@{

foreach (var title in Model.Titles)

var products = Model.Products.Where(x => x.Product == title);

tblProducts product = Model.Products.First(x => x.Prodcut == title);

<text>

<table class="table">

<thead>

<tr>

<th>

@Html.DisplayNameFor(model => product.Date)

</th>

<th>

@Html.DisplayNameFor(model => product.Field1)

</th>

<th>

@Html.DisplayNameFor(model => product.Field2)

</th>

<th>

@Html.DisplayNameFor(model => product.Product)

</th>

<th></th>

</tr>

</thead>

<tbody>

@foreach (var item in products)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.Date)

</td>

<td>

@Html.DisplayFor(modelItem => item.Field1)

</td>

<td>

@Html.DisplayFor(modelItem => item.Field2)

</td>

<td>

@Html.DisplayFor(modelItem => item.Product)

</td>

<td>

<a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |

<a asp-action="Details" asp-route-id="@item.ID">Details</a> |

<a asp-action="Delete" asp-route-id="@item.ID">Delete</a>

</td>

</tr>

}

</tbody>

</table>

</text>

}

How do I set this up to work with the kendo grid instead of tables? I've tried the view below but it shows the correct data in the <srcipt></script> tags but no grid is rendered.

Kendo VIEW:

@using Kendo.Mvc.UI

@model ProjectMVC.Models.IndexViewModel

@{

ViewData["Title"] = "Index";

}

<h2>Index</h2>

<p>

<a asp-action="Create">Create New</a>

</p>

@{

int i = 0;

foreach (var title in Model.Titles)

{

i++;

var products = Model.Products.Where(x => x.Product == title);

tblProducts product = Model.Products.Where(x => x.Product == title).First();

@(Html.Kendo().Grid(products)

.Name($"grid{i}")

.Columns(columns =>

{

columns.Bound(c => c.Date).Width(140);

columns.Bound(c => c.Field1).Width(190);

columns.Bound(c => c.Field2);

columns.Bound(c => c.Product).Width(110);

})

.ToolBar(toolbar =>

{

toolbar.Excel();

toolbar.Pdf();

})

.Pageable()

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.SingleColumn);

})

.Filterable()

.Scrollable()

)

}

Grid

answered on 21 Mar 2017

1 answer

425 views

Kendo control in ClientEditTemplate

When I use EditorTemplate in a grid inside ClientDetailTemplateId I get "Invalid template" error due to

1. In EditorTemplate you cannot use # or you should double it ## this is clear

2. I need to user kendo control in EditorTemplate and I try to use ToClientTemplate() so kendo convert html for valid for EditorTemplate like

@Html.Kendo().DropDownListFor(m => m.Person).ToClientTemplate()

But I still get error because kendo clause above converts into

I believe problem in jQuery("#Person") having hash. But it is a kinda result of ToClientTemplate() where I expect proper template for ClientTemplat

I can workaround it using onEdit event of I grid and using kendo UI manually to make kendo control

(like <input id="Person" name="Person" style="width:100%;" type="text" value="" /> in EditorTemplate and JQuery in onEdit) but it is a inconvenience. Whole thing of kendo for mvc in ability to use mvc control in view

Grid

answered on 19 Mar 2017

1 answer

537 views

ToDataSourceResult Crash! - on Grid filter

Hi,

I'm in a trial version to test your Grid component. When it's filter enabled and there are a lot of quick queries it crash (Open connection exception). It happens in async version too:

public IActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
return Json(this._seasonRepository.Query().ToDataSourceResult(request));
}

Se produjo la excepción System.InvalidOperationException.

HResult=0x80131509
Mensaje = ExecuteReader requires an open and available Connection. The connection's current state is open.
Origen = System.Data.SqlClient
Seguimiento de la pila:
at System.Data.SqlClient.SqlConnection.GetOpenTdsConnection(String method)
at System.Data.SqlClient.SqlConnection.ValidateConnectionForExecute(String method, SqlCommand command)
at System.Data.SqlClient.SqlCommand.ValidateCommand(Boolean async, String method)
at System.Data.SqlClient.SqlCommand.RunExecuteReader(CommandBehavior cmdBehavior, RunBehavior runBehavior, Boolean returnStream, TaskCompletionSource`1 completion, Int32 timeout, Task& task, Boolean asyncWrite, String method)
at System.Data.SqlClient.SqlCommand.ExecuteReader(CommandBehavior behavior)
at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.Execute(IRelationalConnection connection, String executeMethod, IReadOnlyDictionary`2 parameterValues, Boolean closeConnection)
at Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommand.ExecuteReader(IRelationalConnection connection, IReadOnlyDictionary`2 parameterValues)
at Microsoft.EntityFrameworkCore.Query.Internal.QueryingEnumerable.Enumerator.BufferlessMoveNext(Boolean buffer)
at Microsoft.EntityFrameworkCore.Storage.Internal.SqlServerExecutionStrategy.Execute[TState,TResult](Func`2 operation, Func`2 verifySucceeded, TState state)
at Microsoft.EntityFrameworkCore.Query.QueryMethodProvider.<_ShapedQuery>d__3`1.MoveNext()
at Microsoft.EntityFrameworkCore.Query.Internal.LinqOperatorProvider.<_TrackEntities>d__15`2.MoveNext()
at Microsoft.EntityFrameworkCore.Query.Internal.LinqOperatorProvider.ExceptionInterceptor`1.EnumeratorExceptionInterceptor.MoveNext()
at Kendo.Mvc.Extensions.QueryableExtensions.Execute[TModel,TResult](IQueryable source, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, ModelStateDictionary modelState, Func`2 selector)
at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
at Oleoshop.Areas.Admin.Controllers.Commerce.Catalog.SeasonsController.GetData(DataSourceRequest request) in

This is my Grid razor configuration (very simple to test)

@(Html.Kendo().Grid<Oleo.Commerce.Catalog.Season>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Read(read => read.Action("GetData", "Seasons"))
)
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(140).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
columns.Bound(c => c.Name).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.Reference).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
})
.Scrollable(x => x.Height(700))
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
)

Please let me know

Regards

Grid

answered on 13 Mar 2017

1 answer

107 views

Operators in Date Column not take the current culture

Hi everyone,

I have a grid with some fields and one of them is a date type and I have the next problem:

I have the grid set with any culture and all works fine(operators, pager messages, etc) but the filter menu that contains the operators to filter that column not take the current culture.

Example:

All columns and messages in the grid are in Spanish but the operators in the filter menu on the date column are in English.

Any help?

Regards!

Grid

answered on 13 Mar 2017

1 answer

87 views

Disabled filter suggestion

Hello,

How can I hide and stop filter suggestion in column's grid?

Thanks!

Grid

answered on 13 Mar 2017

10 answers

261 views

ASP.NET Core 1.1 Support

We are getting the following error when using the new ASP.NET core packages with Telerik ... we have updated all of our references to the newest libraries... so I guess the question is.. "When is support for the new libraries going to be available?"

This happens on the services.AddKendo() call...

Exception thrown: 'System.IO.FileLoadException' in Carepilot.exe
Additional information: Could not load file or assembly 'Microsoft.AspNetCore.Mvc.Core, Version=1.0.1.0, Culture=neutral, PublicKeyToken=adb9793829ddae60' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

Thanks,
AJ

General Discussions

answered on 08 Mar 2017

1 answer

83 views

radhtmlchart

dear team,

I need to change the radhtmlchart type programatically in asp.net.Is it possible.If so how.

thanks,

Murali

Chart

answered on 07 Mar 2017

0 answers

119 views

How can i remove RadEditor's bottom extra space

Hi

How can i remove RadEditor's bottom extra space?

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad" >

</telerik:RadEditor>

Editor

asked on 23 Feb 2017

10 answers

1.4K+ views

[Solved] Font awesome icons in Kendo Toolbar not visible

Hi,

I have the following Toolbar but all the Font awesome Icons are invisible?

adding the style as discribed in the docs doesn't help...

.fa.k-sprite,

.fa.k-sprite::before {

font-size: 12px;

line-height: 12px;

}

@(Html.Kendo().ToolBar()

.Name("tlbStandort")

.Items(items =>

{

items.Add().Type(CommandType.SplitButton).Text("Neu").SpriteCssClass("fa fa-plus").MenuButtons(menuButtons =>

{

menuButtons.Add().Text("Fachgruppenzugeörigkeit").SpriteCssClass("fa fa-plus");

menuButtons.Add().Text("Telekomverbindung").SpriteCssClass("fa fa-plus");

menuButtons.Add().Text("Zusendung").SpriteCssClass("fa fa-plus");

});

items.Add().Type(CommandType.Separator);

items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>

{

buttons.Add().Id("toolStandorteFilter_Alle").Text("Alle").Togglable(true).Group("Filter").Selected();

buttons.Add().Id("toolStandorteFilter_Active").Text("Aktive").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");

buttons.Add().Id("toolStandorteFilter_Geloeschte").Text("Gelöschte").Togglable(true).Group("Filter").SpriteCssClass("fa fa-filter");

});

items.Add().Type(CommandType.Button).Id("ExpandCollapse").SpriteCssClass("fa fa-indent").Togglable(true); ;

})

)

Toolbar

answered on 17 Feb 2017

2 answers

840 views

Icons in Toolbar and Context menu

Hi,

I have the Problem that no Icon (glyphicon or Kendo icon) is shown with "SpriteCssClasses " in Toolbar and Context menu (see attached Pictures)

@(Html.Kendo().ContextMenu()

.Name("ctmStandort")

.Target("#grdStandort").Filter("button").AlignToAnchor(true).ShowOn("click")

.Orientation(ContextMenuOrientation.Vertical)

.Animation(false)

.Items(items =>

{

items.Add()

.Text("Öffnen");

items.Add()

.Text("Neu").SpriteCssClasses("glyphicon glyphicon-plus")

.Items(children =>

{

children.Add().Text("Akt hinzufügen");

children.Add().Text("Profil hinzufügen");

});

items.Add()

.Text("Stammblatt").SpriteCssClasses("k-icon k-i-print k-i-printer")

.Items(children =>

{

children.Add().Text("Intern");

children.Add().Text("Intern-Selbstdefiniert");

children.Add().Separator(true);

children.Add().Text("Extern");

children.Add().Text("Extern-Selbstdefiniert");

});

items.Add()

.Text("Löschen").SpriteCssClasses("k-icon k-i-table-row-delete").Enabled(true);

})

)

General Discussions

answered on 17 Feb 2017