Hello. I wanted to know exactly how to check a dynamically generated table of dropdown lists for duplicates. so, for example, if the user selects the first dropdown in a set of 3 cascaded dropdowns, all 3 dropdowns change value, (of course they have to since they're cascaded together.). But, if you use a standard jquery function to check for the change event on the LAST dropdown like so:
$("input[id$='SkillsId']").change(function () {
var value = $(this).val();
$("input[id$='SkillsId']").not(this).each(function () {
if ($(this).val() == value) {
alert("duplicate!");
} else {
alert("no dupes.");
}
});
});
This of course, never gets fired, because they're cascaded, which is not good at all. So, I attached a change event to the last dropdown:
@(Html.Kendo().DropDownList()
.Name("SkillsRows[" + Model.row + "].SkillsId")
.Value(Model.SkillsId.ToString())
.HtmlAttributes(new { @style = "width:31%" })
.DataTextField("Description")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSkills", "Admin")
.Data("cba.filterSkills");
})
.ServerFiltering(true);
})
.Events(e =>
{
e.Change("cba.onSkillsIdChanged");
})
.CascadeFrom("SkillsRows_" + Model.row + "__SkillsTypeId")
)
function onSkillsIdChanged(event) {
var value = this.element.val();
$("input[id$='SkillsId']").not(this).each(function () {
if ($(this).val() == value) {
alert("duplicate!");
} else {
alert("no dupes.");
}
});
}
This fires the onSkillsIdChanged() event, but the alerts never appear, and I could never obtain the ID of the element that fired the event, which is not good, but they do work in a simple example with hardcoded id's. So, exactly what is the solution? AND, FYI, the first 2 dropdowns with the code above work fine, and I was able to obtain both the sending element ID and selected dropdown value, but NOT the last one (3rd one). Why is that? This is a simple example that just doesn't work, and the documentation is no help at all.
Thanks
Hello,
I have a Kendo Grid that gets filtered by a DropDownList box located in the grid's toolbar in a ClientTemplate. I'm trying to set the value/index of the DropDownList box to a specific value (e.g. 2), based on a value I obtain from my DB, on page load. I was trying to achieve this by setting a ViewData value in the "List" action method that is responsible for filling the Grid with data, and then setting the DropDownList's value in $(document).ready() function in the View where the Grid is located. The problem is that I cannot access the DropDownList by using $("#filter").data("kendoDropDownList). This always returns "undefined". How do I access this DropDownList box that is located inside a client template for the grid's toolbar to set it's value?
Thanks.
My Grid (partial):
@(Html.Kendo().Grid<Model>()
.Name(
"Grid"
)
.Columns(columns =>
{
columns.Bound(c => c.Value1);
columns.Bound(c => c.Value2);
})
.ToolBar(toolbar =>
{
toolbar.ClientTemplateId(
"GridToolbarTemplate"
);
})
.....
Here's the template:
<script id=
"GridToolbarTemplate"
type=
"text/x-kendo-template"
>
<div>
<label class=
"category-label"
for
=
"category"
>Filter</label>
@(Html.Kendo().DropDownList()
.Name(
"filter"
)
.OptionLabel(
"All"
)
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
.Events(e => e.Change(
"thresholdChange"
))
.HtmlAttributes(
new
{ style =
"width: 60px;"
})
.BindTo(
new
List<SelectListItem>()
{
new
SelectListItem() {
Text =
"1"
, Value =
"1"
},
new
SelectListItem() {
Text =
"2"
, Value =
"2"
},
new SelectListItem() {
Text = "3", Value ="3"
}
})
.ToClientTemplate()
)
</div>
</script>
Hello,
if I set .Selectable(s => s.Mode(GridSelectionMode.Multiple)) I cannot select a text in a grid cell for copy - why?
is this by design and if yes, is there a workaround?
robert
I have a gridview that displays images using your example at: https://demos.telerik.com/kendo-ui/listview/index.
However I don't want the control to expand but I want it to scroll vertically as new items are added to it. How can I accomplish this?
1) My primary question is speed for large data sets. If Kendo UI exports the data in this grid that contains 3475 records it takes 14-15 minutes. The resulting PDF is fine but the time taken is not practical.
Are there any options here?
2) Any additional options for this in terms of adding rows, graphics etc.?
3) Are there any options for converting an Excel file to PDF using Kendo?
Current project we started after purchasing the telerik in last year which 2018 version. Again we purchased in this /-2019, after that we download and installed the latest product. our project smoothly and no error comes.
Yesterday I try to add one web-service of which successfully added and its added some packages. The packages shows that it is version (when I checked via package manager- see image link attached), I tried to update package via update button, at that time it gives the below error.
"Error The local source 'C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R1 2018\wrappers\aspnetcore\Binaries\AspNet.Core' doesn't exist.0"
How to resolve this?
VS2017 - error page and packages
Local pc file explorer where the error shows the path
I would like to make the splitter bend to my will. Can you give me an example on how to do this?:
@(Html.Kendo().Splitter()
.Name("splitter")
.HtmlAttributes(new { id = "vertical" })
.Panes(panes =>
{
panes.Add().Collapsible(true).HtmlAttributes(new { id = "vertical" }).Size("440px").Content(
@<
div
>
... content
</
div
>);
panes.Add().Content(
@<
div
>
... content
</
div
>);
})
Hi,
I am trying to find a suitable example of using a Kendo UI Grid to display data from a
Microsoft.AspNetCore.Mvc.RazorPages.PageModel
(v 2.0.1.0)
I can already successfully render to a native html <table> without problem so I know I have no errors in fetching and displaying data without Kendo Grid.
I have tried so far - without success :
1) http://demos.telerik.com/aspnet-core/grid/local-data-binding
2) http://demos.telerik.com/aspnet-core/grid/remote-data-binding
When the page loads I see no client-side js errors. The grid is simply no rendered.
The IndexModel class serves as the Model for the Razor Page.
It has a simple
public async Task OnGetAsync(int? id)
This sets a Public Property to expose a collection/list of a type.
So for example if I use Kendo grid with a local datasource like so:
@(Html.Kendo().Grid(Model.Practice.Practices)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Width(140);
columns.Bound(c => c.Name).Width(190);
columns.Bound(c => c.PracticeAddresses[0].Address1);
columns.Bound(c => c.PracticeAddresses[0].Address2);
columns.Bound(c => c.PracticeAddresses[0].PostCode);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable()
.Sortable()
.Scrollable(scr=>scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
)
)
The page shows no grid.
Thanks in advance for any suggestions...
[using
Microsoft Visual Studio Enterprise 2017
Version 15.5.1
VisualStudio.15.Release/15.5.1+27130.2003
Microsoft .NET Framework
Version 4.7.02053
]
I am new to kendo and I am in a situation where I have a kendo grid bound to a data source and I need to add a custom filter to it.
The filter should have a dropdownlist that has distinct values from the column "Issuer". How can I achieve this without making another server call to get distinct Issuer values. I want to bind the dropdownlist to the existing data source which already has all the data. Please suggest.
Here's my code:
$("#DivGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/DataView/GetData",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
else if (options) {
var kendoString = kendo.stringify(options);
return { models: kendoString };
}
}
},
pageSize: 10,
schema: {
model: {
tranId: "id",
fields: {
tranId: { editable: false, nullable: false },
issuer: { editable: false },
dateAdded: { editable: false, type: "date" }
}
}
}
},
filterable: true,
columns: [
{
field: "tranId",
title: "TranId",
width: "30px",
},
{
field: "issuer",
title: "Issuer",
width: "50px",
},
{
field: "dateAdded",
title: "Created Date",
format: "{0:MM-dd-yyyy hh:mm:ss}",
width: "40px",
},
],
dataBound: function (e) {
//something
},
pageable: {
alwaysVisible: false,
refresh: false,
pageSizes: true,
buttonCount: 3
},
});