Questions on UI for ASP.NET Core Forum

4 answers

735 views

Hello,

I need that every time the users clicks the the "add record" button in the child grid. a new row will be added no matter if the previous row is saved. I have a parent and a child grid, and the "save all" action happens with a button in the parent grid, also for the child grid. If i call the addRow() method, it works only for the first click on the button, but not for more. It looks like the row has to be saved first.

Grid

answered on 18 Dec 2019

4 answers

593 views

HTML Code in the Multi-column Title field

This is not working as soon as I put single quote or double quote with some html code into the Title and HeaderTemplate ==> not working in .Net Core

Error CS1061 'GridColumnGroupBuilder<????>' does not contain a definition for 'ClientHeaderTemplate' and no accessible extension method 'ClientHeaderTemplate' accepting a first argument of type 'GridColumnGroupBuilder

How can this be resolve kendo and Core 2019.3.917

Javascript equivalent failure

title: "<em class='text-danger text-big bg-danger'>Contact Info</em>   -   <strong class=text-info>Photo</strong>",

Code
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>


</head>
<body>
<div id="example">
<div id="grid"></div>
<style>
.text-danger{
color:red;
padding:5px 15px 5px 15px;
}

.text-info{
color:orange;
}
.bg-danger{
background-color:#000000;
}

.text-big{
font-size:4rem;;
}
</style>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
resizable: true,
reorderable: true,
pageable: true,
columnMenu: true,
columns: [{
field: "CompanyName",
title: "Company Name",
width: 420
},
{
title: "<em class='text-danger text-big bg-danger'>Contact Info</em>   -   <strong class=text-info>Photo</strong>",
columns: [{
field: "ContactTitle",
title: "Contact Title",
width: 200
},{
field: "ContactName",
title: "Contact Name",
width: 200
},{
title: "Location",
columns: [ {
field: "Country",
width: 200
},{
field: "City",
width: 200
}]
},{
field: "Phone",
title: "Phone"
}]
}]
});
});
</script>
</div>

</body>
</html>

Grid

answered on 18 Dec 2019

1 answer

459 views

Telerik Cookie Creation & Use

Hello,

I have a .net core 2.0 project where there are multiple Kendo UI components like Kendo Grid, Kendo Pager, Kendo Progress Bar etc being used.

I can see that, some times, there are cookies with names such as OptanonAlertBoxClosed, OptanonConsent, __gads, _biz_flagsA, _biz_nA etc being created under the telerik.com domain with the deployment of the website within this project.

Is there an in-built way with Kendo UI where the creation and the use of these cookies can be controlled?

Thanks.

Using the following

Kendo UI, Version 2017.2.621+SP1
Visual Studio 2019, Version 16.3.8
.net Core 2.0
Browser being used: Chrome, Version 78.0.3904.87 (Official Build) (64-bit)
OS: Windows 10

General Discussions

answered on 17 Dec 2019

5 answers

608 views

Combobox Filtering Issue

The last example on this page breaks if you attempt to open it after a filtering and removing the filter.

the filter object is undefined

https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/filtering

After fixing this issue I get an unresponsive combobox the first time after the combobox is cleared and it loses focus.

I would like the combobox to only filter when at least 3 letters are entered, and open each time the user clicks regardless of if there is any data.

The combobox:

<kendo-combobox for="PersonId"

filter="Kendo.Mvc.UI.FilterType.Contains"

clear-button="true"

placeholder="Search Name of Person"

enforce-min-length="true"

datatextfield="Name"

datavaluefield="PrimaryId"

min-length="3"

suggest="true"

class="w-100"

on-filtering="CancelEmptyFilter"

auto-bind="false">

<datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-paging="true" server-filtering="true" on-request-end="DataSourceError" page-size="100">

<transport>

</transport>

</datasource>

</kendo-combobox>

The JS function:

function CancelEmptyFilter(e) {

console.log(e);

if (!e.filter || !e.filter.value) {

e.preventDefault();

return;

}

Video Below

ComboBox

answered on 17 Dec 2019

2 answers

171 views

Filterrow column input formatting

I cannot find any examples / documentation on how to format the column filtering input for Core ASP.net.

For example I have a column which is called ID. It is filterable but I want it formatted so that :
1 - It does not have the spinner

2 - After entering a value it does not reformat it from Integer to Decimal with a thousands separator. For example 1234 become 1,234.00 The current code I have is:

@(Html.Kendo().Grid<CIPHRChecks.Models.Order>()
            .Name("Grid")
            .HtmlAttributes(new { @class = "ChecksGrid" })
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Title("ID").Format("{0}").Width(200).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.OrderDate).Title("Order Date").Format("{0:dd/MM/yyyy}").Width(80);
                columns.Bound(o => o.Source.Name).Title("Source").Width(80).Filterable(ftb => ftb.Multi(true).Search(true));

                columns.Bound(o => o.OrderStatus.Description).Title("Status").Width(200);
                columns.Bound(o => o.Service.Name).Title("Service").Width(200);
                columns.Bound(o => o.SourcePersonReference).Title("Reference").Width(120).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.SourcePersonDescriptor).Title("Descriptor").Width(200).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
            })
                .Pageable(p =>
            {
                p.PageSizes(new[] { 15, 25, 50 });
            })

            .Sortable(sortable => sortable
            .SortMode(GridSortMode.MultipleColumn))
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Read", "Home")
            )
                .PageSize(15)
            )
)

Grid

answered on 17 Dec 2019

2 answers

1.5K+ views

Problem - select all checkbox selects disabled row

Hello,

I have a grid and I'm disabled the row that has the approved FALSE, but when I check Select All it checks also the disabled row.

(Html.Kendo().Grid<WhereAbouts.ViewModels.LoginUserViewModel>
().
Name("Team")
.Columns
(columns =>
{
columns.Select().Width(50);
//columns.Bound(c=>c.InsertDate);
columns.Bound(c => c.BadgeNumber).ClientFooterTemplate("<button onclick='getCheckedRows()' class='k-button k-button-icontext k-grid'>Approve</button>");
columns.Bound(c => c.FullName);
columns.Bound(c => c.NumberOfHours).Filterable(false);
columns.Bound(c => c.Approved).Filterable(false).Title("Status");
columns.Bound(c => c.ApprovalManagerId).Hidden(true);
columns.Bound(c => c.Id).Title(" ").ClientTemplate("<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("Overtime", "Overtimes") + "?=#=" + @ViewBag.PeriodIdForGrid + "#&loginId=#=Id" + "#" + "&DropDownPeriodWeek=#=" + @ViewBag.PeriodWeekIdForGrid + "#" + "'>View</a>").Filterable(false);
columns.Bound(c => c.Id).Title(" ").ClientTemplate(
"# if (NumberOfHours > 0) { #" +
"<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("Export_Teams_Overtime", "Overtimes") + "/#=Id#?DropDownPeriod=#=" + @ViewBag.PeriodIdForGrid + "#" + "'>Export</a>" +
"# } else { #" +
"<a role='button' disabled class='k-button k-button-icontext k-grid' href='" + Url.Action("Export_Teams_Overtime", "Overtimes") + "/#=Id#?DropDownPeriod=#=" + @ViewBag.PeriodIdForGrid + "#" + "'>Export</a>" +
"# } #").Filterable(false);
columns.Bound(c => c.Id).Title(" ").ClientTemplate("# if (Approved == true ) { #" +
"<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "' disabled>Approve</a>" +
"# } else if(ApprovalManagerId ==" + @ViewBag.LoginUserId + "){ #" +
"<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "'disabled>Approve</a>" +
"# } else{ #" +
"<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "'>Approve</a>" +
"# } #").Filterable(false);
})

.HtmlAttributes(new { style = "height: auto;width:auto" })
.Scrollable()
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
.HtmlAttributes(new { style = "height: auto;width: auto" })
.Scrollable()
.Events(e=>e.DataBound("test"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Read_Team_Test", "OverTimes", new { periodId = @ViewBag.PeriodIdForGrid, periodWeekId = @ViewBag.PeriodWeekIdForGrid, tab = 1 }))
)

This is the JS

function test(e) {
var grid = this;
this.tbody.find('tr').each(function () {
var dataItem = grid.dataItem(this);
if (dataItem.Approved === false) {
$(this).addClass('disable-cells');

}
})
}

I would like to select all rows except the disabled one.

Is it posible?

Also, might help if I can disable the Select All from header.

Thank you!

Grid

answered on 16 Dec 2019

1 answer

146 views

Can one start a opensource project that includes one of the Kendo UI libraries?

Other than dependencies that a user/team would have to get a Kendo UI license, are there any issues with starting a opensource project based on asp.net core, but also include a dependency on the kendo ui library?

General Discussions

answered on 16 Dec 2019

2 answers

220 views

Toggle collapse

Hi,

I want to be able to toggle the expand/collapse state of a node but I can't see how to tell what it's current state is.

Basically, when a user clicks on a node, if that node has children and it's collapsed, expand it. If it's expanded, then collapse it.

Seems simple enough, but right now it's over my head.

Any help would be great!

Thanks … Ed

TreeView

answered on 13 Dec 2019

1 answer

72 views

Problems rendingering control after new install

I followed all of the instructions to install Telerik into my existing ASP.NET Core 2.1 application and it all worked fine. The application compiled fine and came up in the browser, but when the Index page loaded the date picker did not work and was just a simple text box. I did not miss any of the steps from what I can see, so I'm not sure why this would not be working.

I'm using Visual Studio 17, and this is an ASP.NET Core 2.1 application.

I'm evaluating Telerik to see if it will be a fit for my needs. The controls look great, but I need to get them working to test this out.

Any help or advice would be greatly appreciated.

General Discussions

answered on 12 Dec 2019

6 answers

2.3K+ views

Kendo Grid - Global search not working

I have kendo grid, which has 1000+ records. I want to select row which is present in page 33. I achieve this

....
$scope.grid = $("#grid").data("kendoGrid");

var index = $scope.grid.dataSource.indexOf(rowData);
var page = Math.floor(index / $scope.grid.dataSource.pageSize());
$scope.grid.dataSource.page(++page);

var targetIndex = index - (page * $scope.grid.dataSource.pageSize());
var row = $("#grid").find("tr:eq(" + targetIndex + ")");
$scope.grid.select(row);
$scope.grid.content.scrollTop($(row).position().top);
...

The above code working perfectly. Then I'm trying to apply global search which is filters data, but nothing shown in the user interface.

function applyGlobalFilter(gridData, searchText) {
gridData = $filter('filter')(gridData, searchText);
$scope.grid.dataSource.data(gridData);
}

Thanks in advance

Grid

answered on 12 Dec 2019