Questions on UI for ASP.NET Core Forum

2 answers

1.9K+ views

Custom checkbox change event not firing after gird page changed

Hi There,

I have a checkbox column in my grid, the change event works fine when page first loaded, but fails after page changed. Following is my code. Any help would be greatly appreciated.

@model IEnumerable<WebApplication1.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.ProductID).ClientTemplate("<input class='checkBoxCustom' type='checkbox' />").Title(" ").Filterable(false).Width(50);

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

columns.Bound(p => p.UnitPrice).Width(150);

//columns.Command(command => command.Destroy()).Width(150);

})

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

.Pageable()

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(2)

.ServerOperation(false)

//.Events(events => events.Error("errorHandler"))

.Model(model =>

{

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

model.Field(p => p.ProductID).Editable(false);

})

)

<script>

$(document).ready(function () {

$('input.checkBoxCustom').on('change', function (e) {

alert('hi');

});

</script>

Grid

answered on 24 Oct 2019

3 answers

629 views

export excel and pdf in asp.net core

Could you please replay i have 2 Q

1- i try to export excel and pdf file from my kendo grid but not work i am use Core 2.2
Telerik UI for ASP.NET Core R1 2018 SP1
Source Code from this link
https://demos.telerik.com/aspnet-core/grid/excel-export
2- the telerik Report it's Support the Core 2.2 or not

Thanks

Grid

answered on 24 Oct 2019

1 answer

110 views

Multiselect in Grid PopUp gives javascript error

Hi,

I have the following model:

public class SComponent

{

public string Id { get; set; }

public string Name { get; set; }

public KeyValuePair<string,string>[] Containers { get; set; }

}

which is bound to the Grid:

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

.Name("grid")

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

.Columns(columns =>

{

columns.Bound(p => p.Name).Width(200);

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

})

.Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("SharedLibrary"))

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

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

})

.Read(read => read.Action(nameof(SController.Editing_ReadSharedLibraries), "S", new { key = Model.Product.Keys.First() }))

.Update(update => update.Action(nameof(SController.Editing_UpdateSharedLibrary), "S", new { key = Model.Product.Keys.First() }))

.Destroy(update => update.Action(nameof(SController.Editing_DeleteSharedLibrary), "S", new { key = Model.Product.Keys.First() }))

.Create(update => update.Action(nameof(SController.Editing_CreateNewSharedLibrary), "S", new { key = Model.Product.Keys.First() }))

)

As you can see grid edit mode is a popup which is a custom template looking like this:

@model SComponent

<div class="k-edit-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="k-edit-field">

@Html.Kendo().TextBoxFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="k-edit-label">

@Html.LabelFor(model => model.Containers)

</div>

<div class="k-edit-field">

@(Html.Kendo().MultiSelectFor(model => model.Containers)

.DataTextField("Value")

.DataValueField("Key")

.ValuePrimitive(true)

.Placeholder("Select containers...")

.IgnoreCase(true)

.Filter("contains")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Editing_ReadContainers", "Structurizr");

})

.ServerFiltering(true);

})

)

@Html.ValidationMessageFor(model => model.Containers)

</div>

And the controller method returning the multiselect list is like this:

public IActionResult Editing_ReadContainers([DataSourceRequest] DataSourceRequest request)

{

var model = new SModel(null, _st.GetWorkspaceAsync(string.Empty).Result);

var dsResult = model.Containers.Select(x=>KeyValuePair.Create(x.Id, x.Name)).ToDataSourceResult(request);

var json = JsonConvert.SerializeObject(dsResult);

return Content(json, "application/json");

}

But when server returns values back to the UI it fails with the javascript error:

kendo.all.js:7232 Uncaught TypeError: e.slice is not a function
at init.success (kendo.all.js:7232)
at success (kendo.all.js:7149)
at Object.n.success (kendo.all.js:6055)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)

Any idea how this can be fixed ?

MultiSelect

answered on 23 Oct 2019

4 answers

113 views

Custom filtering and sorting for a dependent column in the grid

Have a dependent grid column that is a dropdown based on a parent column.

The dependent field is filtered on its accepted values on the popup editor based on the selection on the parent column.

But on the grid, I am just showing the current value, like so:

columns.Bound(o => o.CountyId).ClientTemplate("#if(CountyId.Value!=null){##=CountyId.Value##}#").Sortable(false).Groupable(false).Filterable(false);

[UIHint("CountyEditor")]
[Display(Name = "County")]
public ChildValueViewModelNullable CountyId { get; set; }

Would like to enable filtering "AND" sorting on this column. Would be happy with just a text field where users can enter in the search term for the filtering.

Do you have code/sample for this?

Thnks.

Grid

answered on 23 Oct 2019

2 answers

614 views

Why do I get the 'TRIAL' Message when I have purchased

Hi

I'm using Telerik_UI_for_ASP.NET_AJAX_2019_1_215_Dev

This is a licensed version, that my company has purchased.

Why do I get the 'Trial Message' on the controls?

thx

General Discussions

answered on 23 Oct 2019

5 answers

467 views

TreeList filtering data issues

When I filter out data on tree list I am running into 2 issues:

1) the number of pages doesn't reflect the number of items shown in the list

2) the child items will remain in the list even if filtered out

My expectation is that when filter is applied, it would only show Carla and have 1 page on paging bar. Strangely if I execute $("#AttendeeGrid").data("kendoTreeList").dataSource.read(); again after filtering through browser console the children are then removed.

View

<script type="text/javascript">

var filter = false;

function toggleFilter() {

filter = !filter;

$("#AttendeeGrid").data("kendoTreeList").dataSource.read();

$("#AttendeeGrid").data("kendoTreeList").dataSource.page(1);

}

function attendeeParams() {

return {

myFilter: filter

}

</script>

@(Html.Kendo().TreeList<AttendeeItem>()

.Name("AttendeeGrid")

.Columns(columns =>

{

columns.Add().Field(x => x.firstName).Title("First");

})

.Sortable()

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Read(read => read.Action("attendee_Read", "Home").Data("attendeeParams"))

.Model(m => {

m.Id(x => x.primaryRegistrationId);

m.ParentId(x => x.parentRegistrationId);

m.Expanded(true);

})

)

.Pageable(p => p.PageSize(5))

.Scrollable(false)

)

<button onclick="toggleFilter()">Toggle filter</button>

Controller

...

public IActionResult attendee_Read([DataSourceRequest] DataSourceRequest request, GetAttendeesParams getAttendeesParams)

{

AttendeeItem[] items;

if (getAttendeesParams.myFilter)

{

items = new[]

{

new AttendeeItem

{

primaryRegistrationId = 1,

firstName = "Carla",

parentRegistrationId = null

}

};

}

else

{

items = new[]

{

new AttendeeItem

{

primaryRegistrationId = 1,

firstName = "Carla",

parentRegistrationId = null

},

new AttendeeItem

{

primaryRegistrationId = 2,

firstName = "Roger",

parentRegistrationId = null

},

new AttendeeItem

{

primaryRegistrationId = 3,

firstName = "Katy",

parentRegistrationId = null

},

new AttendeeItem

{

primaryRegistrationId = 4,

firstName = "Bob",

parentRegistrationId = null

},

new AttendeeItem

{

primaryRegistrationId = 5,

firstName = "Avni",

parentRegistrationId = 1

},

new AttendeeItem

{

primaryRegistrationId = 6,

firstName = "George",

parentRegistrationId = null

},

};

}

return Json(items.ToTreeDataSourceResult(request));

}

public class AttendeeItem

{

public string firstName { get; set; }

public int primaryRegistrationId { get; set; }

public int? parentRegistrationId { get; set; }

}

public class GetAttendeesParams

{

public bool myFilter { get; set; }

}

TreeList

answered on 22 Oct 2019

1 answer

92 views

Panelbar does not appear in browser

Hi All

I'm using the panelbar in an asp.net core project, like so:

@(Html.Kendo().PanelBar().Name("s").Items(p =>
{

p.Add().Text("Manufacturers").Content(@<text>

However, I have noticed that nothing appears on the page in the browser. Please advise?

PanelBar

answered on 21 Oct 2019

1 answer

160 views

Error - Adding new Razor Pages

Hello Folks,

I always get the "there was an error running the selected code generator: "Package restore failed. Rolling back package changes for 'projectname'"-Error when i try to add new Razor Pages. What's the Problem? I'm using VS2019 and the ASP.NET Telerik Trial

General Discussions

answered on 21 Oct 2019

3 answers

695 views

Different editortemplates when using Html helpers vs Tag Helpers

I made two identical grids.
One using the Html helper and one using the Tag helper.
Both have inline editing enabled.

However the editor templates don't seem to correspond or not even be present in some cases.
I've attached a screenshot.

How do I just make it work in both cases?

Grid

answered on 18 Oct 2019

1 answer

1.9K+ views

Adding new row inline with tool bar button

I am trying to achieve inline insertion in a grid with client side code. I am using tag helper and generating toolbar with custom button and binding click event with javaScript function. And through this function I need to achieve functionality of "Create" button under grid's toolbar option.

To elaborate the things, there are two toolbar one is "kindo-toolbar" and another is "toolbar" under "kendo-grid". Toolbar under kendo-grid is having "Add new record" button and on click on this button generates new blank row in grid to add new record. This same functionality I need to achieve through "Kendo-toolbar" item button, where I can bind a click event with a javascript function. So is there a way to implement inline row adding with toolbar item with javascript or any other approach?

<div class="demo-section k-content wide">

<kendo-toolbar name="ToolBar">

<toolbar-items>