or
6 answers
155 views
Hi ,
i want to sort values in multi checkbox filter dropdown.
here am attaching image and project code . pls find it.
https://drive.google.com/file/d/1BigmLzF_12b2sFzANGrGWCWaA5j4gcBT/view?usp=sharing
5 answers
237 views
I have a grid containing a Start Date, an End Date, and a notes column. For testing purposes, I added custom validation to check that the notes begins with an upper case letter, and it works just fine in all cases. I added validation to the start date to make sure that the start date doesn't start after the end date, and vice versa for the end date.
The validation for these fields will show properly if I immediately select an invalid value. However, if I select a valid value, and then select an invalid value, the validation message does not show. The editor will not let me move away from the field until it is valid, so that piece is working - it just does not show the message.
I am using Kendo for MVC, with InCell editing.
The validation for these fields will show properly if I immediately select an invalid value. However, if I select a valid value, and then select an invalid value, the validation message does not show. The editor will not let me move away from the field until it is valid, so that piece is working - it just does not show the message.
I am using Kendo for MVC, with InCell editing.
//register custom validation rules(function ($, kendo) { $.extend(true, kendo.ui.validator, { rules: { // custom rules notesvalidation: function (input, params) { if (input.is("[name='Notes']") && input.val() != "") { input.attr("data-notesvalidation-msg", "Notes error"); return /^[A-Z]/.test(input.val()); } return true; }, startdatevalidation: function (input, params) { if (input.is("[name='StartDate']") && input.val() != "") { input.attr("data-startdatevalidation-msg", "Start Date needs to be before End Date"); var row = input.closest("tr"); var grid = $('#Grid1').data().kendoGrid; var dataItem = grid.dataItem(row); if (dataItem.EndDate == "") return true; var result = (new Date(Date.parse(input.val())) <= dataItem.EndDate) return result; } return true; }, enddatevalidation: function (input, params) { if (input.is("[name='EndDate']") && input.val() != "") { input.attr("data-enddatevalidation-msg", "End Date needs to be after Start Date"); var row = input.closest("tr"); var grid = $('#Grid1').data().kendoGrid; var dataItem = grid.dataItem(row); if (dataItem.StartDate == "") return true; var result = (new Date(Date.parse(input.val())) >= dataItem.StartDate) return result; } return true; } }, messages: { //custom rules messages productnamevalidation: function (input) { // return the message text return input.attr("data-val-notesvalidation"); }, startdatevalidation: function (input) { // return the message text return input.attr("data-val-startdatevalidation"); }, enddatevalidation: function (input) { return input.attr("data-val-enddatevalidation"); } } });})(jQuery, kendo);15 answers
802 views
I have a Parent Child relationship that is using a Parent Grid and Tab strip with child grids. I can get the data to show up but my custom buttons to add / edit and delete data is not working or showing up
TIA
Error
TypeError: Cannot read property 'dataItem' of undefined
at AddEditCustomerShip (https://localhost:44368/Customer:238:63)
at HTMLAnchorElement.onclick (https://localhost:44368/Customer:1:1)
<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("Contacts").Content(@<text>
@(Html.Kendo().Grid<I2MS.Models.CustomerContactViewModel>
()
.Name("grid_contact#=CustomerID#")
.Columns(columns =>
{
columns.Bound(o => o.CustomerContactID).Hidden();
columns.Bound(o => o.FirstName).Width(40);
columns.Bound(o => o.LastName).Width(40);
columns.Bound(o => o.Phone).Width(40);
columns.Bound(o => o.Email).Width(40);
columns.Bound(o => o.Address).Width(40);
//columns.Bound(o => o.Address2).Width(200);
columns.Bound(e => e.City).Width(40);
columns.Bound(e => e.State).Width(40);
columns.Bound(e => e.PostalCode).Width(40);
columns.Template("<a title=\"Edit\" onclick=AddEditCustomerContact(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> <a role='button' title='Delete' onclick='onDeleteCustomerContact(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_CustomerContacts", "CustomerContact", new { customerID = "#=CustomerID#" }))
.Model(model => { model.Id(i => i.CustomerContactID); })
)
.ToolBar(toolbar =>
{
toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Contact").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerContact", onclick = "AddEditCustomerContact(null,#=CustomerID#)" });
//toolbar.Create();
})
.Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
.Sortable()
.ToClientTemplate()
)
</text>
);
items.Add().Text("Shipping Addresses").Content(@<text>
@(Html.Kendo().Grid<I2MS.Models.CustomerShipViewModel>()
.Name("grid_ship#=CustomerID#")
.Columns(columns =>
{
columns.Bound(o => o.CustomerShipID).Hidden();
columns.Bound(o => o.Name).Width(40);
columns.Bound(o => o.PhoneNumber).Width(40);
columns.Bound(o => o.Address).Width(40);
//columns.Bound(o => o.Address2).Width(200);
columns.Bound(e => e.City).Width(40);
columns.Bound(e => e.State).Width(40);
columns.Bound(e => e.PostalCode).Width(40);
columns.Template("<a title=\"Edit\" onclick=AddEditCustomerShip(event,#=CustomerID#);><img src='images/edit.png' alt='edit' /></a> <a role='button' title='Delete' onclick='onDeleteCustomerShip(event,#=CustomerID#)'><img src='images/delete.png' alt='delete' /></a>").Width(30);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_CustomerShips", "CustomerShips", new { customerID = "#=CustomerID#" }))
.Model(model => { model.Id(i => i.CustomerShipID); })
)
.ToolBar(toolbar =>
{
toolbar.Custom().Name("<span class='k-icon k-i-add'></span>Add New Customer Ship").HtmlAttributes(new { style = "float:right", id = "btnAddNewCustomerShip", onclick = "AddEditCustomerShip(null,#=CustomerID#)" });
})
.Pageable(p => { p.PageSizes(new[] { 5, 10, 20, 50, 100 }).Responsive(false); })
.Sortable()
.ToClientTemplate()
)
</text>
);
})
.ToClientTemplate())
</script>
Georgi Denchev
Telerik team
answered
on
05 Mar 2021
2 answers
372 views
I'm using a custom client template on a Kendo UI Notification control. How can I add a button in the notification and respond to it in a javascript function?
Phil
Top achievements
Rank 1
Rank 1
answered
on
03 Mar 2021
3 answers
711 views
I tried to use fa icons in the drawer but it did not seem to resize / pad (in mini mode) properly. So some of the text was visible.
What am I missing?
Regards
Erwin
Tsvetomir
Telerik team
answered
on
03 Mar 2021
2 answers
280 views
I have a kendo grid in an asp.net MVC application to fill a catalog. There are 2 columns on the grid: ItemName (text) and IsActive (checkbox).
But every time I add or edit a new row, if I write something in the text column and then hover over any checkbox in the grid the text in the cell that I was working disappears.
I'm using InCell grid edit mode. To set the checkbox column I used a ClientTemplate:
columns.Bound(x => x.IsActive).Width(80).ClientTemplate("<input type='checkbox' class='GridCheckBox' name='IsActive' #=IsActive? checked='checked' : '' #/> ");
Is there a way to solve this?
1 answer
1.2K+ views
Hi,
i have view with few butons. when i click button am displaying a view in pop up using kendo window.
here i have a form with 2 fields. after entering form data and submit ,in controller action i want to check whether those 2 fileds values are exists.
if exists i want to show error message with values are already exists, i not exists in database then i want to insert those values.
below is my code
@(Html.Kendo().Window()
.Name("AddProjectWindow")
.Modal(true)
.Width(750)
.Height(500)
.Draggable()
.Resizable()
.Title("Add New Project")
.Actions(actions => actions.Close())
.LoadContentFrom("AddProject", "Home")
.Visible(false)
)
this is my partial popup view
@model Enhancements.Models.Project
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@{
using (Html.BeginForm("SubmitAddNewProject", "Home", FormMethod.Post, new { id = "basicUsage" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<table>
<tr>
<td>Enter Project Code <label style="color:red">*</label></td>
<td> @Html.TextBoxFor(x => x.ProjCode)</td>
<td>
@Html.ValidationMessageFor(m => m.ProjCode, "", new { @class = "text-danger" })
</td>
</tr>
<tr>
<td>Enter Project Name <label style="color:red">*</label></td>
<td> @Html.TextBoxFor(x => x.ProjectName)</td>
<td>
@Html.ValidationMessageFor(m => m.ProjectName, "", new { @class = "text-danger" })
</td>
</tr>
</table>
<div id="message">
</div>
<button type="submit" value="Submit" id="btnValidateForm">Submit</button>
}
}
</div>
</body>
@Scripts.Render("~/bundles/jqueryval")
</html>
Aleksandar
Telerik team
answered
on
01 Mar 2021
10 answers
603 views
We bind Kendo Grid column dynamically from DB in .net MVC.While we bind that column in Kendo Grid it will give me an error in Browser Console like
"Uncaught SyntaxError: Unexpected identifier".
I have also attached screen shot for console Error and my Code to bind Kendo Grid.
Eyup
Telerik team
answered
on
01 Mar 2021
1 answer
207 views
I'm trying to create a tile based dashboard, but when I try to put a chart into a container, I get the error:-
VM391:3 Uncaught ReferenceError: value is not defined at eval (eval at compile (kendo.all.js:234), <anonymous>:3:1161) at init._initContainers (kendo.all.js:174269) at new init (kendo.all.js:174169) at HTMLDivElement.<anonymous> (kendo.all.js:2520) at Function.each (jquery.min.js:2) at n.fn.init.each (jquery.min.js:2) at n.fn.init.e.fn.<computed> [as kendoTileLayout] (kendo.all.js:2519) at HTMLDocument.<anonymous> (Index:87) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2)--
The chart when placed outside of the TileLayout, works perfectly, and the chart from the demo works as well.
the code is:-
<script id="IPWL_WL" type="text/x-kendo-template"> @(Html.Kendo().Chart<BSOLPTLPortal.Models.IPWLWaitChartRecord>() .Name("ipwlChartOne") .Title(title => title .Text("Inpatient Waiting List - Waiting List (11)") .Visible(true) .Position(ChartTitlePosition.Top)) .Theme("office365") .Legend(legend => legend .Visible(false) .Position(ChartLegendPosition.Bottom) ) .Series(series => series .Column(model => model.Value).Labels(true).Gap(0.5) ) .ChartArea(area => area .Height(350) .Background("transparent") ) .CategoryAxis(axis => axis .Categories(model => model.WaitingBand) .Labels(labels => labels.Rotation(0)) .MajorGridLines(lines => lines.Visible(false)) .Title("Weeks Waiting" ) ) .ValueAxis(axis => axis.Numeric().Title("People Waiting").Visible(true) ) .DataSource(ds => { ds.Read(read => read.Action("_IPWLChartbyAdmissionTypex", "IPWL") ); } ) .Tooltip(tooltip => tooltip .Visible(true) .Template("#=value#") .Format("{0}") ).ToClientTemplate() )</script>@(Html.Kendo().TileLayout() .Name("tilelayout") .Columns(2) .RowsHeight("285px") .ColumnsWidth("50%") .Containers(c => { c.Add().Header(h => h.Text("Header One")).BodyTemplateId("IPWL_WL").ColSpan(1).RowSpan(1); c.Add().Header(h => h.Text("Header Two")).BodyTemplate("Body Text Two").ColSpan(1).RowSpan(1); c.Add().Header(h => h.Text("Header Three")).BodyTemplate("Body Text Three").ColSpan(2).RowSpan(1); }) .Reorderable(true) .Resizable(true) )
I'm using version v2021.1.119 of Kendo UI for MVC.
Thanks
Tsvetomir
Telerik team
answered
on
26 Feb 2021
1 answer
80 views
Hi,
I have two Kendo grids in my MVC page,. Each of grid inside its own <div> block. I need show them based on returned data. I code this “SHOW” condition in databound event. But have rendered issue (See attached image) when do that. If I remove the conditions, both grids showed correctly. Could someone help for the issue? Thanks in advance.
Function onDataBoundGrid1 (e) {
if (e.sender._data.length > 0) {
$("#grid1Div").show();
else {
$("#grid1Div").hide();
}
}
Function onDataBoundGrid2 (e) {
if (e.sender._data.length > 0) {
$("#grid2Div").show();
else {
$("#grid2Div").hide();
}
}
Ivan Danchev
Telerik team
answered
on
26 Feb 2021
