I am trying to create a multifilter from enum data type column using the ItemTemplate. But ItemTemplate Javascript function is not being called and data is not being shown in combobox. Please can you give me a help. Here is the code
Enum Records
public enum EmpTypes { [Display(Name = "Service")] Service = 0, [Display(Name = "Sales")] Sales = 1, [Display(Name = "Purchase")] Purchase = 2, [Display(Name = "Office")] Office = 3 }
Kendo Grid
columns.Bound(c => c.EmpTypes).Title("Type")
.Filterable(filterable => filterable
.Multi(true)
.UI(“”).DataSource(s=>s.Read(r=>r.Action(“GetEmpTypes”,”Report”)))
.ItemTemplate(“typetemplate”));
<script>
function typetemplate(e)
{
alert('Test');
}
</script>
Public ActionResult GetEmpTypes()
{
List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}
Hello,
I currently have multiple comboBoxes in a modal view, once everythig is opened up there is a single x above the comboBox (photo 1) but if i leave the page and come back a new x will appear over the comboBoxes (photo2).
the code for the html portion is
<div data-role="view" data-title="New Simulation" data-layout="back" data-model="app.newSim" data-before-show="app.newSim.beforeShow">
<a href="#NewSimModal" data-rel="modalview" data-role="button">Open Modal</a>
</div>
<div data-role="modalview" id="NewSimModal" style="width: 75%; height: 70%; border-style:double;" data-modal="false">
<input id="Manufacturer" />
<input id="ProductFam" />
<input id="CCT" />
<input id="CRI" />
<input id="PartNumber" />
<a data-role="button" data-click="app.newSim.addLED">add LED</a>
</div>
And a piece of the javascript portion is
$("#CCT").kendoComboBox({
dataTextField: "CCT",
dataValueField: "CCT",
dataSource: app.CCTData,
index: 0
});
$("#CRI").kendoComboBox({
dataTextField: "CRI",
dataValueField: "CRI",
dataSource: app.CRIData,
index: 0
});
$("#PartNumber").kendoComboBox({
dataTextField: "LEDPartNumber",
dataValueField: "LEDPartNumber",
//dataSource: app.data
});
As subject says, we load the combobox in a kendo window by demand.
Hence the combobox and window are not visible by default.
I wrote a short function to preselect either the entry with ID -1 if it exists - else I want the first entry to be displayed.
My problem is the dynamic loading of all that - my commands are executed in the databound event of the combobox - but it seems not to work as expected .. when I manually enter the needed command AFTER that kendo window with the combobox is displayed it works to a 'T' but not during regular execution ..
Can you give me some hints ?
onComboBoxDataBound: function (evt) {
var widget = evt.sender;
if (this.dataSource.total() > 0) {
// delete preselection then try to select entry with id -1
$('#modComboBox').data('kendoComboBox').input.select();
$('#modComboBox').data('kendoComboBox').input.val('');
$('#modComboBox').data('kendoComboBox').select(function (data) {
return data.id == -1;
});
// no selection then select first entry
if (widget.select() === -1) { // hint I found in stackoverflow
$('#modComboBox').data('kendoComboBox').select(0);
}
}
},
Hello,
Cascading Comboboxes do not clear and reset values correctly when Virtualization is enabled.
I mimicked the bug though Codepen.
Find it here and follow instructions to reproduce the bug.
Thank you.
I have a combo inside a column of the grid, i already managed to introduce a default value.
Now i need to block the combo actions, so the user cannot remove the default value.
My grid with combobox:
My code do default value inside combobox:
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.
<
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)
)