or
1 answer
9 views
Hi,
I'm trying to figure out how to transpose columns in a Kendo Grid using the Html helper.
I see that there's this small piece of documentation for jQuery (https://docs.telerik.com/kendo-ui/knowledge-base/transposed-grid), but would ideally like to do it on the helper itself.
Is anyone aware of how to do this?
Any help is much appreciated!
Mihaela
Telerik team
answered
on
23 May 2025
1 answer
19 views
Hi,
We are using Kendo controls for MVC. There was a security scan done in our application, it capture few of the security issues.
We are able to fix all of the security issues except one.
CWE 829 - The application contains unsafe Content-Security-Policy (CSP) directives that could allow malicious script code to be included on the page.
So, as a result we have removed all the custom inline javascript and css to an external files and refer those external .js and .css files in our .cshtml page.
But when we use any of the Kendo controls like Kendo grid or Kendo calendar then in the runtime it create some inline scripts and we are getting application contains unsafe Content-Security-Policy (CSP) directives.
How to bypass those runtime inline scripts created by Kendo controls so that we don't get unsafe Content-Security-Policy (CSP) directives
during the security scan of the application.
Please let me know if you need any more information on this.
1 answer
20 views
Hi,
I am working on a kendo grid, where user can copy records from the excel and paste in the kendo grid.
But when we copy more than 50 records from the excel and paste in the kendo grid then it is taking some time.
Can we increase the performance while pasting in to the Kendo grid or is it possible we can provide a progress bar or something to show to the user when the user paste more than 50 record. Attached kendo grid for the reference.
Ivan Danchev
Telerik team
answered
on
14 May 2025
0 answers
14 views
Hi,
wie have a Model A which is related to Model B (1:n). Both have a field of type DateTime with the DisplayFormat-Annotation '[DisplayFormat(DataFormatString = "{0:d}")]'.
If we display both fields in the Details-View of Model A, the formats are applied correctly.
If we display bot fields in a Telerik-GridView, only the format for Model A is applied. Model B shows something like '/Date(1741302000000)/'.
It's important to note, that our application is multilanguage, and we have to support different data formats for each language.
How would we go about this? Is this known behaviour?
1 answer
34 views
Hello,
I'm fairly new to Kendo and having an issue when attempting to pass a CustomerID to a TabStrip from a Grid.
Based on the following article I have tried to follow to get Order data loaded on the TabStrip however I'm running into the below JavaScript error
https://demos.telerik.com/aspnet-core/grid/detailtemplate
Syntax error, unrecognized expression: #tabStrip_#=CustomerID# & Uncaught Error: Syntax error, unrecognized expression: #grid_#=CustomerID#
Please see Grid and TabStrip code below.
@(Html.Kendo().Grid<LewisTestProject.Models.Customer>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => {
model.Id(p => p.CustomerID);
model.Field(p => p.CustomerID).Editable(false);
})
.PageSize(18)
.Read(read => read.Action("Customers_Read", "Customer"))
.Create(create => create.Action("Customers_Create", "Customer"))
.Update(update => update.Action("Customers_Update", "Customer"))
.Destroy(destroy => destroy.Action("Customers_Destroy", "Customer"))
)
.Columns(columns =>
{
columns.Bound(order => order.CustomerID);
columns.Bound(order => order.CompanyName);
columns.Bound(order => order.ContactName);
columns.Bound(order => order.ContactTitle);
columns.Bound(order => order.Address);
columns.Bound(order => order.City);
columns.Bound(order => order.Region);
columns.Bound(order => order.PostalCode);
columns.Bound(order => order.Country);
columns.Bound(order => order.Phone);
columns.Bound(order => order.Fax);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}
).Title("Actions");
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Search();
})
.Pageable()
.Sortable()
.ClientDetailTemplateId("template")
.Events(events => events.DataBound("dataBound"))
.Editable(e => e.Mode(GridEditMode.InLine))
)<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=CustomerID#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Orders").Content(@<text>
@(Html.Kendo().Grid<LewisTestProject.Models.OrderViewModel>()
.Name("grid_#=CustomerID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.CustomerID);
columns.Bound(o => o.OrderID).Title("ID").Width(100);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("OrdersDetail_Read", "Customers", new { customerID = "#=CustomerID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</text>
);
//items.Add().Text("Contact Information").Content(
// "<div class='employee-details'>" +
// "<ul>" +
// "<li><label>Country:</label>#= Country #</li>" +
// "<li><label>City:</label>#= City #</li>" +
// "<li><label>Address:</label>#= Address #</li>" +
// "<li><label>Home Phone:</label>#= Phone #</li>" +
// "</ul>" +
// "</div>"
//);
})
.ToClientTemplate()
)
</script>Any help would be greatly appreciated.
Thanks,
Lewis.
1 answer
25 views
Hi,
I have a kendo grid, where i am creating a new empty row while loading the grid.
The grid has a Boolean filed which is a mandatory field. so when we want to enter the row values then it should call the CheckIsPublicFund(data) method and if the user is not selecting the Boolean field then it should add that value to false.
The problem is when selecting the Boolean value then its not firing the CheckIsPublicFund(data) method.
Attached below code and screenshot for reference.
columns.Bound(p => p.PublicFunds).Editable("EditFieldsForNewRec").ClientTemplate("#=CheckIsPublicFund(data)#").Title("Public Funds").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.CohortFtpRateFloor).Editable("EditFieldsForNewRec").Title("Cohort Ftp Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.HasDepositRateFloor).ClientTemplate("#=CheckIsDepositRateFloor(data)#").Editable("EditFieldsForNewRec").Title("Has Deposit Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});function CheckIsPublicFund(data) {
return data.PublicFunds ? "Yes" : "No"
}
function CheckIsDepositRateFloor(data) {
return data.HasDepositRateFloor ? "Yes" : "No"
}
Eyup
Telerik team
answered
on
21 Apr 2025
1 answer
35 views
Hi,
I want to load a kendo grid, after load the grid should add a new row at the bottom of the grid. I want as per below screenshot.
This is the below method i am using to create a new row.
function AddNewRow() {
var newRow = { field: "TlpModifierNew", Value: 0 };
var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
var grid = $("#" + gridName).data("kendoGrid");
grid.dataSource.add(newRow);
var theCell = $('#' + gridName + " " +'tbody'+ " " +'tr:last-child td:eq(1)');
$("#" + gridName).data('kendoGrid').editCell(theCell);
}
function onRequestEnd(e) {
debugger
if (e.type == 'create') {
NMDModelGridRefresh();
}
if (e.response) {
AddNewRow();
}
}
When the Kendo grid loads then, it is creating the new row, but after that it will load the records from the database and then refresh the screen and the new row is removing.
After that it is not calling AddNewRow(); method as onRequestEnd method is called once.
Can we somehow call this AddNewRow(); method after the grid is loaded with records.
Mihaela
Telerik team
answered
on
11 Apr 2025
1 answer
31 views
We recently upgraded Telerik to 2024.3.806. Adding a reference to kendo.min.all.js to the Scripts file in the MVC project updated the styles in our grids, but the custom template no longer displays when clicking on a button for it from the grid.
Removing the reference to the new JS restores the functionality but breaks the styling, which makes it difficult for our users to navigate through the grid (control buttons are invisible until the user hovers over them; the new style fixes that issue). Is there anything wrong with this code as written? None of it has been changed.
@(Html.Kendo().Grid<ESGR.Icms.Core.Domain.QuickViewCasesDto>()
.Name("grid")
.Sortable()
.Pageable(pager =>
{
pager.Input(true);
pager.Info(true);
pager.Numeric(false);
pager.PreviousNext(true);
pager.PageSizes(new int[] { 25, 50, 100 });
})
.Columns(columns =>
{
columns.Bound(column => column.FirstName).Title("First Name").Media("(min-width: 768px)");
columns.Bound(column => column.LastName).Title("Last Name").Media("(min-width: 768px)");
columns.Bound(column => column.DateOpened).Title("Date Opened").Width(200).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
columns.Bound(column => column.CaseNumber).Title("Case Number").Width(120).Media("(min-width: 768px)");
columns.Bound(column => column.CaseStatus).Title("Status").Width(120).Media("(min-width: 768px)");
columns.Bound(column => column.CaseState).Title("State").Width(80).Media("(min-width: 768px)");
columns.Bound(column => column.CaseRegion).Title("Region").Width(100).Media("(min-width: 768px)");
columns.Bound(column => column.AssignedTo).Title("Assigned To").Width(120).Media("(min-width: 768px)");
columns.Bound(column => column.EnteredBy).Title("Entered By").Width(120).Media("(min-width: 768px)");
columns.Bound(column => column.LastUpdate).Title("Last Update").Width(130).Format("{0:MM/dd/yyyy}").Media("(min-width: 768px)");
columns.Bound(column => column.CaseIdentifier).Title("Case Identifier").Width(80).Media("(min-width: 768px)").Hidden();
columns.Bound(column => column.Employer).Title("Employer").Width(80).Media("(min-width: 768px)").Hidden();
columns.Bound(column => column.OmbudsmanFirstName).Title("OmbudsmanFirstName").Media("(min-width: 768px)").Hidden();
columns.Bound(column => column.OmbudsmanLastName).Title("OmbudsmanLastName").Media("(min-width: 768px)").Hidden();
columns.Group(group => group.Title("Action Required").Width(150).Columns(info =>
{
info.Bound(x => x.TwoDayRequired).Title("2 Day").Width(50);
info.Bound(x => x.SevenDayRequired).Title("7 Day").Width(50);
info.Bound(x => x.FourteenDayRequired).Title("14 Day").Width(56);
}).Media("(min-width: 768px)")
);
columns.Bound(column => column.CaseID).Width(40).ClientTemplate("<a class='k-button manage' aria-label='ManageCase' href='" +
@Url.Content("~/ManageCase") + "?caseId=#= CaseID #'" + ">ManageCase</a>").Sortable(false)
.Title("Manage Case").Width(100).Media("(min-width: 768px)");
columns.Template("#=resColTemplate(data)#").Title("Records").Media("(max-width: 768px)");
columns.Command(command => command.Custom("MoreInfo").Click("showDetails")).Title("More Info").Width(90).Media("(min-width: 768px)");
}).DataSource(ds => ds.Ajax()
.Read(r => r.Url(@Url.Content("~/QuickViewCases?handler=Read")).Data("forgeryToken").Data("StatusSelection"))
.Model(m => m.Id(id => id.CaseID))
.PageSize(25))
.Pageable()
)
@*ViewDetail Modal view*@
@(Html.Kendo().Window()
.Name("Details")
.Title("Case More Information")
.Visible(false)
.Modal(true)
.Resizable()
.Draggable(true)
.Width(500)
)
<script type="text/x-kendo-template" id="template">
<div>
<div class='viewdetails'>
<ul class="form-group p-3 mt-2">
<li><span class="b">Date Opened: </span>#= DateOpenedString #</li>
<li><span class="b">Ombudsman: </span>#= OmbudsmanFirstName # #= OmbudsmanLastName # </li>
<li><span class="b">Employer: </span>#= Employer #</li>
<li><span class="b">Primary Point of Contact First Name: </span>#= PriPocFirst #</li>
<li><span class="b">Primary Point of Contact Last Name: </span>#= PriPocLast #</li>
<li><span class="b">Email: </span>#= Email #</li>
<li><span class="b">State: </span>#= CaseState #</li>
<li><span class="b">Summary: </span>#= Summary #</li>
</ul>
</div>
</div>
</script>
<script>
var detailsTemplate;
$(document).ready(function() {
detailsTemplate = kendo.template($("#template").html());
});
//Open ViewDetail Window
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
};
</script>I am also including screenshots. In the browser tools I can see that the data does load in the template, but it does not display on the screen.
Any ideas?
1 answer
39 views
Hi,
I have a kendo grid. On copy the records from excel and paste on the kendo grid Paste event is triggered.
Suppose I have pasted 50 records from the excel to the grid. From that 50 records 10 records are invalid and I want to validate and show the error message for each row by row.
Please let me know how we can validate row by row on paste these 50 records from excel to kendo grid.
Events(events => events.Paste("onPaste"))function onPaste(e) {
}
Ivaylo
Telerik team
answered
on
24 Mar 2025
1 answer
33 views
Recently I upgraded Kendo in a project from a 2020 version to the current version. It seems CancelText() and UpdateText() etc. of the command column in a grid have changed and now perform html escaping on the value. This results in the html code being shown to the user instead of what was intended.
Is it possible (and how) to get the old behaviour back?
The intended use is to have just an icon (not from the kendo set) on the button and no further text. So setting the CancelIconClass to "none" and putting the icon's html snippet in the text, used the achieve the intended result. But this method doesn't work any more.
Ivaylo
Telerik team
answered
on
04 Mar 2025
