Hi,
I have a data display problem, multi-column header error showing foreign key column as shown in attached video.
Can someone help me, many thanks.
The foreign key column property is declared as below:
col.dataTextField = col.dataTextField ?? "text";
col.dataValueField = col.dataValueField ?? "value";
col.dataSource = {
type: "json",
transport: {
read: function (options) {
ufn_ApiGetLookup({
data: col.source,
success: function (d) {
options.success(ufn_GetData(d));
}
});
}
}
}
I am having a kendo autocomplete combo box, when typing out the keys i get the list of options. But it is not highlighting (focusing) the first option. when i try to hover with mouse it is focused. Adding the sample screenshots.
Kindly do the needful. Thanks in advance
It is working fine with the dropdown
But for the autocomplete
When i hover this with cursor it is working. This is our expectation when typing in the autocomplete.
I have written the following code for kendoComboBox, it does not cause any problem when creating, but when editing, only the id is displayed.
$('#buyer').kendoComboBox({
dataSource: new kendo.data.DataSource({
type: 'aspnetmvc-ajax',
serverFiltering: true,
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: kmc.urlBase + '/lookups/buyers',
dataType: 'json',
type: 'POST',
beforeSend: function (xhr) {
kmc.setRequestVerificationToken(xhr);
}
}
},
schema: {
aggregateResults: 'aggregateResults',
data: 'data',
errors: 'errors',
total: 'total',
model: {
id: 'id',
fields: {
id: { type: 'number' },
name: { type: 'string' },
code: { type: 'string' },
cidNID: { type: 'string' },
addr: { type: 'string' },
tel: { type: 'string' },
fax: { type: 'string' }
}
}
},
error: function (e) {
if (e.status === 'customerror') {
pki.alert(e.errors);
} else {
var failure = pki.parseJson(e.xhr.responseText);
if (failure && failure.success === false) {
pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + failure.errors);
} else {
pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + e.xhr.responseText);
}
}
}
}),
dataTextField: 'name',
dataValueField: 'id',
filter: 'startswith',
valuePrimitive: true,
//change: function (e) {
// var dataItem = this.dataItem();
// if (dataItem) {
// pro.headerModel.set('buyer', { id: dataItem.Id, name: dataItem.Name });
// }
//},
minLength: 2,
select: function (e) {
var item = e.dataItem;
if (item) {
$('#buyer-name').text(`TO: ${item.name}`);
$('#buyer-addr').text(`ADD: ${item.addr}`);
$('#buyer-tel').text(`TEL: ${item.tel}`);
$('#buyer-fax').text(`FAX: ${item.fax}`);
$('#buyer-nid').text(`COMMERCIAL/NATIONAL ID: ${item.cidNID}`);
}
}
});
html code :
<td>
<span class="caption">Buyer: </span>
<input id="buyer" name="buyer" class="combobox-lg" data-bind="value: buyer.id" required />
</td>
<
div
id
=
"myLayout"
class
=
"k-content"
style
=
"background-color:Gray; height:100%;"
>
<
div
id
=
"contentArea"
style
=
"background-color:Silver;"
>
<
div
id
=
"myList"
></
div
>
</
div
>
<
div
id
=
"footer"
style
=
"background-color:Silver;"
>
Click on ShipCity to trigger custom editor
</
div
>
var myDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
ShipName: { type: "string" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" }
}
}
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
});
var $footer = $("#footer");
var gridHeight = function () {
return $(window).height() - $footer.height() - 2;
}
var $grid = $("#myList").kendoGrid({
scrollable: { virtual: true },
editable: true,
dataSource: myDataSource,
sortable: true,
height: gridHeight(),
columns: [
{ field: "OrderID" },
{ field: "ShipName"},
{ field: "ShipCountry",
title : "Ship's Country",
editor: function(container, options) {
$('<
input
id
=
"ShipCountry1"
required
data-text-field
=
"ShipCountry"
data-value-field
=
"ShipCountry"
data-bind
=
"value:' + options.field + '"
/>').appendTo(container).kendoComboBox({
filter: "contains",
placeholder: "Select category...",
dataTextField: "ShipCountry",
dataValueField: "ShipCountry",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: 'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCountry'
}
},
});
}
},
{ field: "ShipCity",
title : "Ship's City",
editor: function(container, options) {
$('<
input
id
=
"ShipCity1"
required
data-text-field
=
"ShipCity"
data-value-field
=
"ShipCity"
data-bind
=
"value:' + options.field + '"
/>').appendTo(container).kendoComboBox({
autoBind: false,
cascadeFrom: "ShipCountry1",
filter: "contains",
placeholder: "Select product...",
dataTextField: "ShipCity",
dataValueField: "ShipCity",
dataSource: {
type: "odata",
transport: {
read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCity'
}
}
});
}
},
{ field: "ShipName",
title : "Ship's Name",
editor: function(container, options) {
$('<
input
id
=
"ShipName1"
required
data-text-field
=
"ShipName"
data-value-field
=
"ShipName"
data-bind
=
"value:' + options.field + '"
/>').appendTo(container).kendoComboBox({
autoBind: false,
cascadeFrom: "ShipCity1",
filter: "contains",
placeholder: "Select product...",
dataTextField: "ShipName",
dataValueField: "ShipName",
dataSource: {
type: "odata",
transport: {
read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipName'
}
}
});
}
}
]
});
$("#rootLayout").kendoSplitter({
orientation: "vertical",
panes: [
{ scrollable: false, collapsible: false, size: "90%" },
{ collapsible: true, size: "10%" }
]
});
var resizeGrid = function () {
var dataArea = $grid.find(".k-grid-content");
var newHeight = gridHeight();
var diff = $grid.innerHeight() - dataArea.innerHeight();
$grid.height(newHeight);
dataArea.height(newHeight - diff);
}
$(window).resize(function () {
resizeGrid();
});
I'm using the Kendo combobox on a edit form. I'm loading initial values into the comboboxes on page load by using the "value" and "text" properties. I have autobind set to false. If I click the "clear" button it doesn't actually clear out the text value until the second time I click it. It looks like the first time I click clear it loads the actual data items and then selects the value I have it set to. The second time I click clear it actually works. What is the proper way to configure this to load values from the server and preload a specific item when the control initializes?
@(Html.Kendo().ComboBox()
.Name("combo" + item.DataField.ID)
.Filter("contains")
.DataTextField("DataTextField")
.DataValueField("DataTextValue")
.Placeholder("Select an item...")
.AutoBind(false)
.ClearButton(true)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(40)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read(r =>
{
r.Action("Virtualization_ReadComboEdit3", "Search", new { dataFieldId = item.DataField.ID }).Type(HttpVerbs.Post).Data("getFormData");
});
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
.HtmlAttributes(new { style = "width:100%;", data_parent_id = (item.DataField.ParentDataFieldID!=null ? item.DataField.ParentDataFieldID.ToString() : ""), data_conditional = item.DataField.IsConditionListener })
.FooterTemplate("<b>#: instance.dataSource.total() # items found<b/>")
.Events(e =>
{
e.Select("onSelectCombo");
e.Open("onOpenCombo");
e.Change("onChangeCombo");
})
.Virtual(v =>
{
v.MapValueTo("dataItem");
v.ItemHeight(26);
v.ValueMapper(e => "function(options) { dropdownMapper(options," + item.DataField.ID + "); }");
})
.Value(item.DataField.CurrentFieldValueSingle.ToString())
.Text(item.DataField.CurrentFieldText)
)
Hey all,
I'm fairly new to kendo and have a bit of an problem ->
I'm currently troubleshooting a weird issue in version 2019.1.220. I'd love to upgrade but its not feasible for this project at this time.
Basically, what is going on is that we're seeing some weird behavior with the Combobox control after databind. Data comes from the database and is set in the control. When the Arrow (Open button) is clicked its almost as though it doesn't do a read on the datasource because I get the No items found message. However, if I change the selected text on the control it will do a pop open and locate the item in the list.
While trying to solve this with a work around I have tried to subscribe to the click event on the control and force a search function call in Kendo using the following:
$(document).ready(function () {
var itemCombo = $("#Items").data("kendoComboBox");
itemCombo.input.on("click", function () {
itemCombo.search(itemCombo.text);
});
});
This does seem to force a search to run on click of the control - however the arrow button on the control still does what it did before - not read the list or search for the item. Does anyone have any quick tips on how i can access the click event on the arrow button itself? The Open event isn't a good option - if I call .search on that it will cause an endless loop activity.
I'm sure this has been solved already in later versions but upgrade is not an option at this time.
Appreciative of any pointers! Thanks!
Hi,
I have an entry in my Knedo UI comboBox as 'Aré John' While searching, if i use 'are' search is not working. Is there any way to search diacritics in Kendo Ui combo box or any work around to search above criteria. appreciate your help on this
$("#EmpList").kendoComboBox({
Hi
How I can make cascade drop downlist inside a grid like in this example :
https://demos.telerik.com/kendo-ui/grid/editing-custom