I have created a ClientDetails template so that I can edit a grid row in a 'form style' with tabs. I would like to put a command button on the template so that I can save the changes in the same way that I get an Update button with inline editing. I would like to know the best way of doing this. Does any one know of an example demo/code for doing that would set me in the right direction.
Is there a good demo example of how to customise a filter row. I would like a filter row which is a combination of input boxs and dropdowns. GridFilterMode.Row just gives be inputboxes and GridFilterMode.Menu just gives me a dropdown filter. I would like something like the attached with multicheck dropdowns. .
Hi All,
I have a grid working without any problems when I load the data locally using BindTo(), but it takes a few seconds to load because it's a lot of data.
I wanted to play with paging on the server side to avoid the long delay, so I switched to remote binding. But now the data never gets loaded in the grid. I know the Ajax call works because I get data on the screen if I just put the URL for the Action method that produces the JSON data directly in the browser address bar.
I know it's probably something stupid that I'm not doing. Thanks in advance for any help.
Here's the code:
Contents of TestController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using CONY.Models;
namespace CONY.Controllers
{
public class TestController : Controller
{
public IActionResult Index()
{
return View();
}
public JsonResult GetGridDataRemotely()
{
TestData[] data = new TestData[2];
data[0] = new TestData("Hello", "Goodbye");
data[1] = new TestData("Red", "Blue");
return Json(data);
}
public ViewResult TestGridLocalBinding()
{
TestData[] data = new TestData[2];
data[0] = new TestData("Hello", "Goodbye");
data[1] = new TestData("Red", "Blue");
ViewBag.TheData = data;
return View();
}
public ViewResult TestGridRemoteBinding()
{
return View();
}
}
}
Contents of TestGridRemoteBinding.cshtml:
@{
ViewData["Title"] = "TestGridRemoteBinding";
}
<h1>TestGridRemoteBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bound(l => l.RecordType).Width(91);
columns.Bound(l => l.GroupAcctID).Width(106);
})
.HtmlAttributes(new { style = "height: 430px;" })
.Scrollable()
.Groupable()
.Sortable()
.Resizable(resizing => resizing.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetGridDataRemotely", "Test").Type(HttpVerbs.Get))
)
)
<script>
$(document).ready(function () {
var grid = $("#TestGrid").data("kendoGrid");
grid.dataSource.read();
})
</script>
Contents of TestGridLocalBinding.cshtml:
@{
ViewData["Title"] = "TestGridLocalBinding";
}
<h1>TestGridLocalBinding</h1>
@(Html.Kendo().Grid<CONY.Models.TestData>()
.Name("TestGrid")
.Columns(columns =>
{
columns.Bound(l => l.RecordType).Width(91);
columns.Bound(l => l.GroupAcctID).Width(106);
})
.HtmlAttributes(new { style = "height: 430px;" })
.Scrollable()
.Groupable()
.Sortable()
.Resizable(resizing => resizing.Columns(true))
.BindTo((IEnumerable<CityOfNewYork.Models.TestData>)ViewBag.TheData)
)
Contents of TestData.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CONY.Models
{
public class TestData
{
public string RecordType { get; set; }
public string GroupAcctID { get; set; }
public TestData(string RecordType, string GroupAcctID)
{
this.RecordType = RecordType;
this.GroupAcctID = GroupAcctID;
}
}
}
I have the following grid set. Is there a way I can override the template or something else that will disable the checkbox based on a boolean from the data object?
<
kendo-grid
selectable
=
"multiple"
height
=
"600"
auto-bind
=
"false"
>
<
columns
>
<
column
selectable
=
"true"
width
=
"30"
locked
=
"true"
/>
...
</
columns
>
</
kendo-grid
>
I have a model with SourceId, LanguageId, OriginalLanguageId, which are bound to some dropdownlists, using :
01.
@(Html.Kendo().DropDownListFor(m => m.SourceId)
02.
.DataTextField(
"Name"
)
03.
.DataValueField(
"Id"
)
04.
.ValuePrimitive(
true
) <------ Here be dragons?
05.
.Animation(
false
).AutoBind(
false
)
06.
.HtmlAttributes(
new
07.
{
08.
@
class
=
"form-control"
,
09.
data_bind =
"value: regulation.SourceId"
10.
})
11.
.OptionLabel(
"Please select a source"
)
12.
.Filter(FilterType.Contains)
13.
.DataSource(
"sourcesDataSource"
)
14.
)
15.
16.
@(Html.Kendo().DropDownListFor(m => m.LanguageId)
17.
.DataTextField(
"Name"
)
18.
.DataValueField(
"Id"
)
19.
.Animation(
false
).AutoBind(
false
)
20.
.HtmlAttributes(
new
21.
{
22.
@
class
=
"form-control"
,
23.
data_bind=
"value: regulation.LanguageId"
24.
})
25.
.OptionLabel(
"Please select the official language"
)
26.
.Filter(FilterType.Contains)
27.
.DataSource(
"languagesDataSource"
)
28.
)
01.
@(Html.Kendo().DropDownListFor(m => m.OriginalLanguageId)
02.
.DataTextField(
"Name"
)
03.
.DataValueField(
"Id"
)
04.
.Animation(
false
).AutoBind(
false
)
05.
.HtmlAttributes(
new
06.
{
07.
@
class
=
"form-control"
,
08.
data_bind=
"value: regulation.OriginalLanguageId"
09.
})
10.
.OptionLabel(
"Please select the original language"
)
11.
.Filter(FilterType.Contains)
12.
.DataSource(
"languagesDataSource"
)
13.
)
All 3 fields are int, non nullable, yet only LanguageId and OriginalLanguageId are bound and displayed/selected in their dropdowns.
The data structures for Language and Source have only {Id: int, Name: string}.
SourceId is bound, but is not displayed/selected, unless I set ValuePrimitive(true).
I see that it is bound because when I click the dropdown, the value is selected in the list.
So I would like to understand why do I have to set ValuePrimitive(true) only for a field.
Thank you.
I have a model bound via MVVM with a collection of related entities:
01.
@(Html.Kendo().MultiSelectFor(m => m.AmendedRegulations)
02.
.DataTextField(
"Title"
)
03.
.DataValueField(
"Id"
)
04.
.Animation(
false
).AutoBind(
false
)
05.
.HtmlAttributes(
new
06.
{
07.
@
class
=
"form-control"
,
08.
data_bind =
"value: regulation.AmendedRegulations"
09.
})
10.
.Filter(FilterType.Contains)
11.
.AutoClose(
false
)
12.
.DataSource(
"amendedRegulationsDataSource"
)
13.
)
The data structure retrieved by amendedRegulationsDataSource and AmendedRegulation have {Id : int, Title: string}.
01.
let amendedRegulationsDataSource =
new
kendo.data.DataSource({
02.
serverFiltering:
false
,
03.
transport: {
04.
read: {
05.
url:
"@ViewData["
ApiUrl
"]/regulations/regulations-for-dropdowns"
,
06.
dataType:
"json"
,
07.
type:
"GET"
,
08.
data:
function
() {
09.
10.
return
{ datasetId : viewModel.regulation.DatasetId }
11.
}
12.
},
13.
}
14.
});
01.
$(
function
() {
02.
03.
languagesDataSource.read();
04.
05.
viewModel.regulationDataSource.fetch(
function
() {
06.
07.
viewModel.set(
"regulation"
,
this
.data()[0]);
08.
kendo.bind($(
"#edit-regulation"
), viewModel);
09.
10.
// amendedRegulationsDataSource.read();
11.
});
12.
});
When kendo.bind executes, the data in AmendedRegulations is bound, is displayed in the multi select, however, when I click the multi select, to maybe change the selection, the selected items disappear, which causes confusion to the user.
Now, is there a setting that I need to make/activate in order to preserve the selected items in the multi select?
Thank you.
Hi,
I am trying to create a grid like this
.Read(read => read.Action(nameof(RcaDatastructureController.Editing_ReadRcas),
"RcaDatastructure"
,
new
{ key = Model.Product.ProductKey })))*@
@(Html.Kendo().Grid<DashboardRcaRecord>()
.Name(
"grid"
)
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Search();
})
.Columns(columns =>
{
columns.Bound(p => p.JiraLink).Title(
"RCA link"
)
.ClientTemplate($
"<a href=\"#: data.JiraLink#\" target=\"_blank\">#: data.Summary #</a>"
)
.Width(100);
columns.Bound(p => p.PCA).Width(200);
columns.Bound(p => p.QbStatus).Width(100);
columns.Bound(p => p.DataStructureLink).Width(100);
columns.Bound(p => p.FixStatus).Width(100);
columns.Bound(p => p.NumberOfCRsToResolve).Title(
"No of Change Requests"
)
.ClientHeaderTemplate(
"No of<br/>Customer<br/>Defects"
).Width(50);
columns.Bound(p => p.NumberOfE2EsToResolve).Title(
"No of End-to-ends"
)
.ClientHeaderTemplate(
"No of<br/>End-to-ends"
).Width(50);
columns.Bound(p => p.NumberOfMTsToResolve).Title(
"No of Monitor Tasks"
)
.ClientHeaderTemplate(
"No of<br/>Monitor<br/>Tasks"
).Width(50);
columns.Bound(p => p.NumberOfSaasIncsToResolve).Title(
"No of Saas Incidents"
)
.ClientHeaderTemplate(
"No of<br/>Saas<br/>Incidents"
).Width(50);
columns.Bound(p => p.NumberOfDefectsToResolve).Title(
"No of Defects"
)
.ClientHeaderTemplate(
"No of<br/>Defects"
).Width(50);
columns.Bound(p => p.NumberOfCustomerDefectsToResolve).Title(
"No of Customer Defects"
)
.ClientHeaderTemplate(
"No of<br/>Customer<br/>Defects"
).Width(50);
columns.Bound(p => p.NumberOfSpecsToResolve).Title(
"No of Specs"
).ClientHeaderTemplate(
"No of<br/>Specs"
).Width(50);
columns.Command(command => { command.Custom(
"Edit"
).Click(
"editRca"
); }).Width(70);
})
.Editable(e=>e.Mode(GridEditMode.InLine))
.Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); })
.Filterable()
.Pageable(pgbl => pgbl.Refresh(
true
).PageSizes(
true
))
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.JiraKey);
})
.Read(read => read.Action(nameof(RcaDatastructureController.Editing_ReadRcas),
"RcaDatastructure"
,
new
{ key = Model.Product.ProductKey })))
)
<script type=
"text/javascript"
>
function editRca(e) {
e.preventDefault();
var dataItem =
this
.dataItem($(e.currentTarget).closest(
"tr"
));
window.location.href =
"@Url.Action(nameof(RcaDatastructureController.RcaDetails), "
RcaDatastructure
", new { key=Model.Product.ProductKey})&rcaKey="
+dataItem.JiraKey;
}
$(function () {
var addButton = $(
'a.k-button.k-button-icontext.k-grid-add'
);
addButton.unbind(
'click'
);
addButton.click(function () {
window.location.href =
"@Url.Action(nameof(RcaDatastructureController.RcaDetails), "
RcaDatastructure
", new { key=Model.Product.ProductKey})"
;
});
});
</script>
But it fails at runtime with the exception
nvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or
set
AllowSynchronousIO to
true
instead.
Microsoft.AspNetCore.Server.IIS.Core.HttpResponseStream.Write(
byte
[] buffer,
int
offset,
int
count)
Microsoft.AspNetCore.Server.IIS.Core.WrappingStream.Write(
byte
[] buffer,
int
offset,
int
count)
Microsoft.AspNetCore.WebUtilities.HttpResponseStreamWriter.FlushInternal(
bool
flushEncoder)
Microsoft.AspNetCore.WebUtilities.HttpResponseStreamWriter.Dispose(
bool
disposing)
System.IO.TextWriter.Dispose()
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext,
string
contentType, Nullable<
int
> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData,
string
contentType, Nullable<
int
> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultAsync>g__Logged|21_0(ResourceInvoker invoker, IActionResult result)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope,
object
state,
bool
isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(
ref
State next,
ref
Scope scope,
ref
object
state,
ref
bool
isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope,
object
state,
bool
isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(
ref
State next,
ref
Scope scope,
ref
object
state,
ref
bool
isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
However if I comment lines
toolbar.Create();
and
.Editable(e=>e.Mode(GridEditMode.InLine))
makeing grid readonly everything seems to work fine. Any idea why this is happening ?
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.
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>
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