Questions on UI for ASP.NET Core Forum

2 answers

304 views

I have a grid that lists people. When it loads, I need to select a row matching the key I submit and then ensure the row is visible in the window. How do I do this? My attempt (based on what I know of the TreeList):

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

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Select")

.Click("goDetail"))

.Width(Glossary.Portal.ButtonWidth);

columns.Bound(p => p.FirstName)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.LastName)

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

})

.Pageable()

.Selectable(s => s.Mode(GridSelectionMode.Single))

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "Patients").Data("getData"))

).Events(e => e.DataBound("onGridDataBound")))

Script:

function onGridDataBound(e) {

// Handle the dataBound event.

var grid = e.sender;

alert(grid == null);

var personId = $("#personId").val();

alert(personId);

if (grid != null)

{

var dataItem = grid.dataSource.get(personId);

alert(dataItem == null);

if (dataItem != null)

{

var row = $("tr[data-uid='" + dataItem.uid + "']");

alert(row == null);

if (row != null)

{

grid.select(row);

row[0].scrollIntoView();

}

Grid

answered on 18 May 2020

2 answers

153 views

Asp Net Core Grid Search Toolbar

Из какой версии Telerik Grid поддерживается панель инструментов поиска:

.ToolBar (toolbar =>
{
toolbar.Search ();
toolbar.Excel ();
toolbar.Pdf ();
})

А как реализовать панель инструментов поиска в 2019.2.619?

General Discussions

answered on 18 May 2020

1 answer

260 views

group a field generates error fw core

I have this tag

@(Html.Kendo().Grid<Portale.Web2.Data.Entities.Contact>()

.Name("contactGrid")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetContacts", "Contacts").Data("addInfo"))

)

.Columns(columns =>

{

columns.Bound(product => product.Date).Format("{0:dd/MM/yyyy}");

columns.Bound(product => product.Name);

columns.Bound(product => product.City);

columns.Bound(product => product.SouceType);

columns.Bound(product => product.Type);

columns.Bound(product => product.Status);

columns.Command(command => command.Custom("Completa").Visible("isNew").Click("completeContact"));

})

.Pageable(p =>

{

p.PageSizes(new[] { 5, 10, 30 });

p.Info(true);

p.Enabled(true);

})

.Sortable()

.Groupable()

.Filterable()

)

<script>

function addInfo(e) {

var statusFilter = $("#statusFilter").val();

}

</script>

I call this action

public ActionResult GetContacts([DataSourceRequest]DataSourceRequest request, string status = "")

{

if (status != "")

{

var contacts = from rec in _context.Contacts

where rec.Status == status.ToContactStatus()

select rec;

DataSourceResult result = contacts.ToDataSourceResult(request);

return Json(result);

}

else

{

var contacts = from rec in _context.Contacts

select rec;

DataSourceResult result = contacts.ToDataSourceResult(request);

return Json(result);

If I try to set a group, it shows me this exception

System.InvalidOperationException

HResult=0x80131509

Messaggio=Processing of the LINQ expression '(GroupByShaperExpression:

KeySelector: (t.Source Type),

ElementSelector:(EntityShaperExpression:

EntityType: Contact

ValueBufferExpression:

(ProjectionBindingExpression: EmptyProjectionMember)

IsNullable: False

)

)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core.

I'm using a EF Core 3.1.4 that it connects to SQL Server 2018

Grid

answered on 18 May 2020

2 answers

466 views

Error after install with Orchard Core

Hello support team,

We started a new application using Orchard Core.

We also installed version 2020.2.513 of Telerik UI for AspNet.Core.

Not sure if these can be used together?

Anyway I followed the first steps guide, https://docs.telerik.com/aspnet-core/getting-started/first-steps and added everything as mentioned.

But in the configureservices method of the startup filewe have 2 items:

services.AddOrchardCms();
services.AddKendo();

When I try to run the application, I get the following error:

InnerException {"Error while validating the service descriptor 'ServiceType: Kendo.Mvc.Rendering.IKendoHtmlGenerator Lifetime: Transient ImplementationType: Kendo.Mvc.Rendering.KendoHtmlGenerator': Unable to resolve service for type 'Microsoft.AspNetCore.Mvc.ModelBinding.IModelMetadataProvider' while attempting to activate 'Kendo.Mvc.Rendering.KendoHtmlGenerator'."} System.Exception {System.InvalidOperationException}

Maybe this is due to the combination of orchard core and telerik? Or maybe I'm missing something.

Thanks in advance.

General Discussions

answered on 15 May 2020

1 answer

215 views

row-cols-2 and form

I'm adding into a "container" a div "row" and "row-cols-2"

into a form tag.

<div id="generalPlaceHolder" class="row row-cols-2">

<div class="col form-group">

@Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label" })<br />

@(Html.Kendo().DatePickerFor(model=>model.Date)

.Min(new DateTime(1900, 1, 1))

.Max(new DateTime(2099, 12, 31))

.Format("dd/MM/yyyy")

.Value(DateTime.Today).

HtmlAttributes("form-control"))

<span asp-validation-for="Date" class="text-danger"></span>

</div>

<div class="col form-group">

<label asp-for="Name" class="control-label"></label>

<input asp-for="Name" class="form-control" />

<span asp-validation-for="Name" class="text-danger"></span>

</div>

<div class="col form-group">

<label asp-for="Name2" class="control-label"></label>

<input asp-for="Name2" class="form-control" />

<span asp-validation-for="Name2" class="text-danger"></span>

</div>

but it not splits all "col" tags, 2 "col" object for every line.

Are there any compatibility problem with bootstrap v4 theme? Or in general with theme's telerik?

Form

answered on 15 May 2020

1 answer

198 views

Generic Action Methods

Hi,

For my Kendo Grid, I'm looking to implement generic action methods such as what is described here:

https://stackoverflow.com/questions/42931042/how-can-i-create-generic-crud-operations-in-the-kendo-grid#

Thanks

Samad

Grid

answered on 15 May 2020

3 answers

133 views

Multifiltering

Hi, i am using the kendo grid, with many columns, all of them filterable. For the filtering i use the columnMenu. One filter is working fine. But if i put a second filter in it, it has some issues. Do i filter from right to left (start setting filters on the right of the table) and adding more filters from left side, it works too. But if i start filtering in the first column from the left and then add more of columns that are more on the right, i get 0 items back ...

If i click now the most left filter again, i just click filter again, it works.

I am searching for hours, but the queries are the same , just the order i insert the filter seems to make problems. Any suggestions ?

Filter

answered on 15 May 2020

1 answer

850 views

Overriding grid search panel function

Hello guys,

I'm interested if it's possible to override the current search panel function, mostly for two reasons:

to call the function on click, not keyup event
to prevent existing filters from being deleted?

Thanks.

Grid

answered on 14 May 2020

6 answers

175 views

Incompatible DateTime return value

The Date value submitted to the Controller method from the DateRangePicker control is not compatible with the System.DateTime .NET Type.

DateRangePicker:

<div class="col-sm-6">

<h6>Date Filter:</h6>

@(Html.Kendo().DateRangePicker()

.Name("daterangepicker")

.HtmlAttributes(new { style = "width: 100%" })

.Events(e => e.Change("onDateRangeChange")))

</div>

Initialize Script:

$(document).ready(function() {

var startDate = $("#startDate").val();

var endDate = $("#endDate").val();

alert(startDate == null);

alert(endDate == null);

alert("Start - " + startDate);

alert("End - " + endDate);

var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");

var range = {

start: startDate,

end: endDate

};

dateRangePicker.range(range);

//dateRangePicker.dateView._current = startDate;

//alert("Start - " + dateRangePicker.range().start);

//alert("End - " + dateRangePicker.range().end);

});

onDateRangeChange:

function onDateRangeChange() {

var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");

if (dateRangePicker != null) {

var range = dateRangePicker.range();

if (range != null) {

var startDate = range.start;

var endDate = range.end;

alert("Start1 - " + startDate);

alert("End - " + endDate);

$('#startDate').val(startDate);

$('#endDate').val(endDate);

//dateRangePicker.dateView._current = startDate;

var grid = $("#grid").getKendoGrid();

grid.dataSource.read();

}

Grid Definition:

<div class="col-sm-8">

<a href="#" onclick="onCreate()">Create New</a>

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

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Detail")

.Click("goDetail"))

.Width(Glossary.Portal.ButtonWidth);

columns.Bound(p => p.Time).Title("Time")

.Format("{0:hh:dd:mm tt}");

})

.Pageable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:550px;margin-right:0px;padding-right:0px;" })

.Selectable()

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("IndexJson", "Sessions")

.Data("gridGetData"))))

</div>

gridGetData:

function gridGetData() {

var groupId = $('#groupId').val();

var startDate = $('#startDate').val();

var endDate = $('#endDate').val();

alert("Start1 - " + startDate);

alert("End - " + endDate);

alert("groupId - " + groupId);

//var isoStartDate = startDate.toISOString();

//var isoEndDate = endDate.toISOString();

//alert("Start2 - " + isoStartDate);

//alert("End - " + isoEndDate);

var data = {

customerId: customerId,

customerUniqueId: customerUniqueId,

startDate: startDate,

endDate: endDate,

groupId: groupId,

personId: personId

};

alert("Start3 - " + data.startDate);

alert("End - " + data.endDate);

return data;

}

Controller:

public async Task<IActionResult> IndexJson(

[DataSourceRequest] DataSourceRequest request,

int customerId,

string customerUniqueId,

DateTime startDate,

DateTime endDate,

int? groupId,

int? personId)

{

if (customerId == 0)

{

throw new Exception(

$"Invalid {nameof(customerId)} parameter value.");

}

if (startDate == DateTime.MinValue ||

endDate == DateTime.MinValue)

{

throw new Exception(

$"Invalid {nameof(startDate)} or {nameof(endDate)} parameter values.");

}

...

Attempt1:

Populate grid, initialize with DateTime parameter type

See attached files:

- Annotation 2020-05-05 1.png - This is what happens the first time the grid.Read method is called

- Annotation 2020-05-05 alert.png - This shows the same alert from the gridGetData method 1st attempt then after the onDateRangeChange is called.

onDateRangeChange: Nothing. The Controller is not called

Attempt2:

Populate grid, initialize with string parameter type

I changed the Controller.IndexJson method's Parameter from DateTime to String DataType

At this point, the gridGetData successfully fired the Controller method and the string value given matched what was on the "Annotation 2020-05-05 alert.png" right side. On DateTime.TryParse, the value was not compatible with .NET.

Thanks in advance for your help,

Joel

DateRangePicker

answered on 14 May 2020

1 answer

104 views

Any tentative dates for including more Razor pages specific implementation helps?

I just managed to get the upload control working with a razorpages app, using what I already knew about conventions etc. Having replaced the use of Save with SaveURL, passing in the name of the handler, but it would be nice to have just a few notes on each control for Razorpages-specific implementation help. I seem to recall reading this was "in the works". Just curious if there is a planned date where we might see this?

General Discussions

answered on 14 May 2020