Questions on UI for ASP.NET Core Forum

6 answers

118 views

Filter

I`m working with your new filter, but I have a problem. When I use EditorTemplateHandler and making dropdown for current column and I persist state and when I load data I lost values from dropdown. For instance if I have dropdown with dataTextField string and dataValueField string, after load my dropdown become input. Is it a normal behavior?

Filter

answered on 10 Dec 2019

3 answers

1.4K+ views

Getting error when using @<text> on my Razor page

Hi All,

I'm trying out https://demos.telerik.com/aspnet-mvc/grid/toolbar-template on my razor page

but I'm getting error "Cannot convert lambda expression to type 'string' because it is not a delegate type" when using @<text>

if I change the @<text></text> to "" it works but adding @(Html.Kendo().DropDownList() ..... shows as text only.

toolbar.ClientTemplate(@<text>

<div class='toolbar'>

<label class='category-label' for='category'>Show products by category:</label>

</div>

</text>);

Grid

answered on 10 Dec 2019

1 answer

190 views

how to .Content(@RenderBody())

Hi,

How do I put the renderbody function inside a splitter pane?

Thanks ... .Ed

Splitter

answered on 10 Dec 2019

4 answers

66 views

On save Action, filling part of the model manually and save it.

Hello,

I have one parent grid and one child grid for each row of the parent grid. The parent has one model <NewVoucherViewModel> and the grid has other model <LineItemsViewModel>. The parent contents a property LineItems wich is a list of objects of type LineItemsViewModel.

I will only have one button on the row of the parent grid for saving. I want that when the user clicks this button, will fill automatically all properties of the parent <NewVoucherViewModel> and i would manually fill the LineItems property of the model. After that i want to save the changes.

However it looks like it goes in a loop because of the saveRow() method at the end triggers again the save Event? How can i manage this? What is the best approach? How can i save all at the end?

This is how my code looks like:

<script>

function saveEvent(e) {

//e.preventDefault();

//var row = e.sender.select();

//var parentGrid = $("#grid5").data("kendoGrid");

var childGridName = "#grid5_" + e.model.VoucherId;

var grid = $(childGridName).data("kendoGrid");

var childGridItems = [];

//var allRows = grid.items();

var totalrecords = grid.dataSource.total();

console.log(totalrecords);

for (var i=0 ; i <= grid.dataSource.total(); i++) {

var dataItem = grid.dataItem("tbody tr:eq(" + i + ")");

var dataArray = {

"Account": dataItem.Account,

"Assignment": dataItem.Assignment,

"CostCenter": dataItem.CostCenter,

"GrossAmount": dataItem.GrossAmount,

"GsCode": dataItem.GsCode,

"InternalOrder": dataItem.InternalOrder,

"ItemText": dataItem.ItemText,

"Lc2amount": dataItem.Lc2amount,

"LcAmount": dataItem.LcAmount,

"Platform": dataItem.Platform,

"PmtBlock": dataItem.PmtBlock,

"PostingKey": dataItem.PostingKey,

"TaxCode": dataItem.TaxCode,

"TaxKey": dataItem.TaxKey,

"TransactionType": dataItem.TransactionType,

"VoucherId": dataItem.VoucherId,

"WbsElement": dataItem.WbsElement,

};

childGridItems.push(dataArray);

}

e.model.LineItems = childGridItems;

//console.log(row);

//console.log(e.model);

e.sender.saveRow();

}

//function showDetails(e) {

//alert("details");

// }

</script>

<div class="modal-body">

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

.Name("grid5")

.Columns(columns =>

{

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

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

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

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

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

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

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

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

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

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

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

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

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

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

columns.Command(command => { command.Edit(); command.Destroy(); command.Custom("Save Changes").Click("saveEvent"); });

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

.Events(events => events

.Save("saveEvent")

)

.ClientDetailTemplateId("template")

.HtmlAttributes(new { style = "height:800px;font-size:12px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model => model.Id(p => p.VoucherId))

.Create(update => update.Action("EditingInline_Create", "Grid"))

.Read(read => read.Action("Voucher_Data_Read", "Actions"))

)

<script id="template" type="text/kendo-tmpl">

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

.Name("grid5_#=VoucherId#")

.Columns(columns =>

{

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

})

.ToolBar(toolbar => toolbar.Create())

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

.HtmlAttributes(new { style = "height:800px;font-size:12px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => model.Id(p => p.VoucherId))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

Grid

answered on 10 Dec 2019

3 answers

774 views

How to add a (Edit-)Combobox to a Grid (with TagHelper)

Hello,

we want to add a Grid with taghelpers to our razor-pages application.

One Column should be editable (incell) as a Combobox.
Another Column should be should editable as a MultiSelect(Combobox).

Unfortunatelly I could not find any documentation on how to add something like that with taghelpers.

It would be appreciated if you could give me an example on how to do that.

Best regards,

Lars

Grid

answered on 10 Dec 2019

1 answer

101 views

Cannot edit grid content inside kendoWindow

Hello,

I'm trying to open a popup editor for a grid that resides inside a kendoWindow. I can open the window and display the grid. I can also have an "Add New" button on the grid's toolbar that works, and adds new content to the grid, however, the edit and delete buttons on each row of the grid are not clickable (nothing happens when I click them).

My grid resides inside <div> tags that I open as a kendoWindow via a JavaScript function.

function Create_Options() {

var wnd = $("#dlgProjectOption").kendoWindow({

title: "Add/Edit Option(s)",

modal: true,

visible: false,

width: 600,

height: 600

}).data("kendoWindow");

wnd.center().open();

}

Here's my grid markup:

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

.Name("OptCountermeasure")

.Columns(columns =>

{

columns.Command(command =>

{

command.Edit().Text(" ");

command.Custom(" ").Text("").Click("openRemoveWindow").IconClass("k-icon k-i-close");

}

).Width(120).MinResizableWidth(49).HtmlAttributes(new { style = "text-align: center;" });

columns.Bound(c => c.CountermeasureType).Title("Type");

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

})

.HtmlAttributes(new { style = "height: 300px; width: 100%;" })

.Scrollable(s => s.Height("auto"))

.Resizable(resize => resize.Columns(false))

.Groupable(false)

.Sortable(true)

.ToolBar(toolbar =>

{

toolbar.ClientTemplateId("GridToolbarTemplateOpt");

})

.Editable(editable => { editable.Mode(GridEditMode.InLine); }) //.TemplateName("_OptionsCountermeasureCreate").DisplayDeleteConfirmation(false); })*/

.Events(e =>

{

e.Edit("grdCountermeasure_OnEdit");

e.Save("grdCountermeasure_OnSave");

})

.DataSource(datasource => datasource

.Ajax()

.PageSize(50)

.Events(events =>

{

events.Error("error_handler");

events.RequestEnd("Countermeasure_onRequestEnd");

})

.Model(model =>

{

model.Id(m => m.CountermeasureId);

model.Field(f => f.CountermeasureTypeId).Editable(true);

model.Field(f => f.Description);

})

.ServerOperation(false)

.Read(read => read.Action("GetOptionCountermeasures", "RRManagement").Data("GetOptionId"))

.Update(update => update.Action("UpdateCountermeasures", "RRManagement"))

.Create(create => create.Action("CreateCountermeasures", "RRManagement"))

.Destroy(destroy => destroy.Action("DeleteCountermeasures", "RRManagement"))

))

Why won't the edit/delete command of a kendo Grid buttons work inside the kendoWindow?

Any help is appreciated. Thanks.

Shawn A.

Grid

answered on 09 Dec 2019

1 answer

132 views

Grid content shown as undefined after upgrade to .Net core 3.0

Grid content shown as undefined all the cells of the grid after upgrade to .Net core 3.0.

I can see the data sent properly from Controller Action, Please see the attached document.

I was required to change my controller action (as part of .Net core 3.0 upgrade)From: return Json(datatable..ToDataSourceResult(request)); To: return Json(datatable.AsEnumerable().ToDataSourceResult(request));

Grid

answered on 09 Dec 2019

1 answer

353 views

ToDataSourceResult: Can't load 'Microsoft.AspNetCore.Mvc.Abstractions`

I am attempting to invoke the Kendo mvc extensions from an automated test.

It builds fine, but at runtime I get an exception when I invoke Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult(...)

DataSourceRequest request = CreateDefaultDataSourceRequest();

var dataSourceResult = widgets.ToDataSourceResult(request); // Exception thrown here

The exception is:

System.IO.FileNotFoundException : Could not load file or assembly 'Microsoft.AspNetCore.Mvc.Abstractions, Version=3.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'. The system cannot find the file specified.
at Kendo.Mvc.Extensions.QueryableExtensions.ToDataSourceResult

I am running this in both .NET Framework 4.6.2 and .NET Core 3.0. It works fine in .NET Framework, it's just the .NET Core build which fails.

Here is the complete .csproj file:

<?xml version="1.0" encoding="utf-8"?>

<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>

<TargetFrameworks>net462;netcoreapp3.0</TargetFrameworks>

</PropertyGroup>

<ItemGroup>

<PackageReference Include="NUnit" Version="3.12.0" />

</ItemGroup>

<ItemGroup>

<ProjectReference Include="..\DATMedia.Core\DATMedia.Core.csproj" />