Questions on UI for ASP.NET Core Forum

4 answers

819 views

Kendo Editable Grid Row Height Behaviour Change

Hi,

We recently updated our .NET Core web app from Kendo UI v2019.3.1023 to Kendo UI v2020.1.219. The kendo.bootstrap-v4.min.css file contains a change that produces some fairly drastic jitter and row height changes in editable grids with custom ClientTemplates:

.k-grid .k-command-cell, .k-grid .k-edit-cell, .k-grid .k-grid-edit-row td {

padding: calc(.75rem - (1.5em + .75rem + 2px - 1.5em)/ 2) .75rem

}

I have confirmed the issue is in the above css by removing it and observing that editable grid rows don't jitter and change height when you click on an editable cell. Is this a bug or was this an intended change in behaviour? What is the best / easiest way to completely remove this behaviour? There is nothing special about the grid other than the checkbox ClientTemplate:

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

.Name("CreateGrid")

.Navigatable()

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

.Events(events => events.Edit("OnCreateGridEdit"))

.Columns(columns => ...

Kind regards,

David

Grid

answered on 09 Apr 2020

1 answer

184 views

How to disable DatePicker animation use TagHelper?

Can the DatePicker animation be disabled using the TagHelper? I tried adding an animation="false" attribute but had to revert to using @Html.Kendo().DatePicker() before it would disable the open/close animation.

Date/Time Pickers

answered on 09 Apr 2020

3 answers

1.4K+ views

setting the whole sort of the grid from a single string

Hello,

When I call the following javascript API:

1.var grid = $('#Results').data('kendoGrid');

2.var ds = grid.dataSource;

3.var parameters = ds.transport.parameterMap({ sort: ds._sort, page: ds._page }, "read");

then I get an output like this:

{"sort":"Name-asc~Email-desc","page":2,"group":"","filter":""}

Is there any way (.net core or javascript) to pass the string "Name-asc~Email-desc" to the grid (or the datasource or any related objects) in order to apply the sorting ?

Thanks a lot!

Grid

answered on 09 Apr 2020

1 answer

160 views

Tag Template # out of ## problem

Visual Studio 2019, Kendo 2020.1.219, Net Core 3.1

I am trying to use a tag template to display the number of items selected rather that displaying the selected items. The multiselect gets the data correctly but when I select an item in the list I get an error saying 'values' is undefined. If I remove values it says maxTotal is undefined. Any idea what I am doing wrong or missing?

    @(Html.Kendo().MultiSelect()
        .Name("SBN")
        .DataTextField("Text")
        .DataValueField("Value")
        .Placeholder("Select SBN...")
        .TagTemplateId("SBNTagTemplate")
        .TagMode(MultiSelectTagMode.Multiple)
        .AutoClose(false)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("SBNMultiSelect_Read", "Report");
            })
            .ServerFiltering(true);
        })
    )

<script id="SBNTagTemplate" type="text/x-kendo-template">
    #:values.length# out of #:maxTotal#
</script>

Head element from _Layout.cshtml:

MultiSelect

answered on 08 Apr 2020

1 answer

302 views

InCell Editing a checkbox

Hi,

I have:

columns.Bound(t => t.IsActive).Width(45)

.ClientTemplate("#=dirtyField(data,'IsActive')# <input type='checkbox' #=IsActive ? checked='checked':'' # ;/>")

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

with the following javascript which, I believe I got from Telerik

function dirtyField(data, fieldName)

{

var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;

if (data.dirty && data.dirtyFields[fieldName] && hasClass)

return "<span class='k-dirty'></span>";

else

return "";

}

It works great if I click on the cell first and then check/uncheck the checkbox.

However, if I click directly on the checkbox it doesn't flag it as dirty and the changes are not saved.

Can someone point me in the right direction?

Thanks … Ed

Grid

answered on 06 Apr 2020

2 answers

164 views

Grid Change Event Issue

We are seeing an issue where the Change event for Grid is firing as if it was the Databind event. We get a console log event on load and when we filter the grid to cause another bind, but not when I click select on a row. I want to redirect to a details page for that row when the user clicks.

<div class="ci-body-grid">

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

.Name("gridMain")

.Columns(columns => {

columns.Bound(e => e.OrderID).Filterable(false);

columns.Bound(e => e.Freight);

columns.Bound(e => e.OrderDate).Width(120).Format("{0:MM/dd/yyyy}");

columns.Bound(e => e.ShipName).Width(260).Filterable(filterable => filterable.Cell(cell => cell.Operator("contains").ShowOperators(false)));

columns.Bound(e => e.ShipCity).Width(150);

})

.Excel(excel => {

excel.AllPages(true);

excel.FileName("Users.xlsx");

})

.ToolBar(toolbar => { toolbar.ClientTemplateId("tmpGridToolbar"); })

.Pageable(pageable => pageable.Refresh(true).Numeric(false).PreviousNext(false))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))

.Navigatable()

.Mobile()

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

.ColumnMenu()

.Sortable()

.Scrollable(scrollable => scrollable.Virtual(true))

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

.DataSource(dataSource => dataSource

.Custom()

.Events(events => events.Change("gridMain_OnChange").Error("error_handler"))

.Type("odata")

.Transport(transport =>

transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"))

)

.PageSize(100)

.ServerPaging(true)

.ServerSorting(true)

.ServerFiltering(true)

))

</div>

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

<span class="ci-header-grid">Users</span>

<div class="k-float-right k-display-inline-block">

@(Html.Kendo().Button().Name("btnExport").Icon("file-excel").Content("Export").Events(evt => evt.Click("exportGrid")).ToClientTemplate())

</div>

</script>

@section Scripts {

<script>

function exportGrid() {

$("#gridMain").data("kendoGrid").saveAsExcel();

}

function resizeGrid() {

$("#gridMain").data("kendoGrid").resize();

}

$(window).resize(function () {

resizeGrid();

});

function gridMain_OnChange(arg) {

var test = "";

console.log(this);

//var selected = $.map(this.select(), function (item) {

// return $(item).text();

//});

//console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");

}

</script>

}

Grid

answered on 06 Apr 2020

2 answers

185 views

When export, Add a custom row to Excel with column filters

I have modified the below code to add my own title row to Excel.

But, as you see in my screen shot, the column filters were added to the title row instead of the actual data row.

How can I have the column filters on the data row?

https://dojo.telerik.com/ekuDetoX/2

Grid

answered on 06 Apr 2020

11 answers

2.1K+ views

Undefined in DropdownList

I'm trying to follow the most basic example of a binding to remote data for the dropdownlist. I am using the following code but when I run the page, I get the image shown below. I am supposed to have 4 results, and if I step through the EF code, I can see it pulling the proper results back. What am I doing wrong?

Code Behind

public JsonResult GetRegions()
{
//Get Distinct Regions and put into a Select List
List<StationRegionLookup> distinctItems = new List<StationRegionLookup>();
distinctItems = (from d in _context.StationRegionLookup
select d).ToList()
.GroupBy(x => x.Region)
.Select(x => x.First()).ToList();
return new JsonResult(distinctItems);
}

<div class="demo-section k-content">
<h4>Regions</h4>
@(Html.Kendo().DropDownList()
.Name("regions")
.DataTextField("Region")
.DataValueField("Region")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetRegions", "DropDownList");
});
})
.HtmlAttributes(new { style = "width: 100%" })
)
</div>

DropDownList

answered on 03 Apr 2020

2 answers

1.0K+ views

Returning Partial View causes checkbox to not actually check

The checkbox works fine until it is replaced through an Ajax call which returns a partial view.

Afterwards the click event is still fired but the checkbox does not show as checked.

If I remove the classes "k-checkbox" and "k-checkbox-label" from the input and label it works just fine.

html-partial view

<input id="@Model[i].DefinitionName" asp-for="@Model[i].IsRequired" class="k-checkbox" type="checkbox" onclick="ToggleRelatedGLSegmentComboBox()" />

<label for="@Model[i].DefinitionName" class="k-checkbox-label" style="width:15em;">@Model[i].BusinessName</label>

c#

return PartialView("_PartialViewName", model);

js

$.ajax(

{

success: function (html) {

glPartialDiv.html(html);

},

});

Checkbox

answered on 02 Apr 2020

29 answers

1.1K+ views

Tag Helper Documentation & Demos

The documents and demo for the grid tag helpers are appalling, the example tag helper is so basic that it's practically useless.

How can you release new functionality and not bother to add the relevant documentation and demos e.g a grid with full editing with or incell examples?

Are we to guess?

Grid

answered on 02 Apr 2020