I am using kendo boBox in my app and I need to get value and ID of record out of ComboBox, outside the ComboBox actual function.... I am using boBox dropdown in table against each record so I can't relay on css ID to get boBox value... I have managed to reach to input boBox of selected record and I did this test by apply background color to it. I have tested .val() which works fine for just input textbox but its not happening for kendo ComboBox...
Many Thanks
input
<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkSchemeId_Input" }) </td>
ComboBox function
$("._MarkSchemeId_Input").kendoComboBox({
minLength: 1,
filter: 'contains',
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
serverFiltering: false,
transport: {
read: "/Qualification/GetAllMarkScheme_JSON"
},
},
change: function () {
alert("value " + this.value() + " " + this.text());
}
});
jQuery function
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
$(this).closest('table').find("._MarkSchemeId_Input").css("background", "red");
var a1 = $(this).closest('table').find("._MarkSchemeId_Input").text(); // doesn't work
alert("a1 " + a1);
.....
I am using kendo boBox in my app and I need to get value and ID of record out of ComboBox, outside the ComboBox actual function.... I am using boBox dropdown in table against each record so I can't relay on css ID to get boBox value... I have managed to reach to input boBox of selected record and I did this test by apply background color to it. I have tested .val() which works fine for just input textbox but its not happening for kendo ComboBox...
Many Thanks
input
<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkSchemeId_Input" }) </td>
ComboBox function
$("._MarkSchemeId_Input").kendoComboBox({
minLength: 1,
filter: 'contains',
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
serverFiltering: false,
transport: {
read: "/Qualification/GetAllMarkScheme_JSON"
},
},
change: function () {
alert("value " + this.value() + " " + this.text());
}
});
jQuery function
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
$(this).closest('table').find("._MarkSchemeId_Input").css("background", "red");
var a1 = $(this).closest('table').find("._MarkSchemeId_Input").text(); // doesn't work
alert("a1 " + a1);
.....
3 Answers
Reset to default 3Have a look at the Kendo demo, it actually shows precisely what are you interested in
var fabric = $("#fabric").data("kendoComboBox");
var select = $("#size").data("kendoComboBox");
$("#get").click(function() {
alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value());
});
The value retrieval in your example is not working because you are calling method at the html element not a Kendo control. Consider this example :
$("#bobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var bobox = $("#bobox").data("kendoComboBox");
bobox.value("Oranges");
Therefore in your case do following :
$(this).closest('table').find("._MarkSchemeId_Input").data("kendoComboBox").text()
By design, the ComboBox widget copies all styles and CSS classes from the original element to the visible input. This is documented here. If you examine the rendered HTML it will look like this:
- original element + initialization code
<input class="custom-class" />
<script>
$(function() {
$(".custom-class").kendoComboBox();
});
</script>
- results in this HTML
<span class="k-widget k-bobox k-header custom-class">
<span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
<input class="k-input custom-class" type="text" autoplete="off" style="width: 100%;">
<span tabindex="-1" unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">
select
</span>
</span>
</span>
<input class="custom-class" data-role="bobox" style="display: none;">
</span>
As you can see the custom-class is copied to wrapper element and to the visible input. Because of this you will need to use a more specific selector to find only the original input elements:
$(".custom-class[data-role=bobox]");
Note that this will return a list of input elements. If you need to get selected data items, you will need to loop them and get the bobox instance for each of the input element.
Here I prepared a simple jsBin demo, which shows how to acplish this.
I have managed to resolve the issue as following
<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkScheme_Input" }) </td>
//--get all the MarkScheme from database and put in drop-down
$("._MarkScheme_Input").kendoComboBox({
minLength: 1,
filter: 'contains',
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
serverFiltering: false,
transport: {
read: "/Qualification/GetAllMarkScheme_JSON"
},
},
change: function () {
// alert("value " + this.value() + " " + this.text()); //if it need to test selected record data...
}
});
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
$(this).closest('table').find("._MarkScheme_Input").css("background", "red");
//read all the input 'boxBox' in loop...
//var _boBoxInput = $(this).closest('table').find("._MarkScheme_Input").filter("[data-role=bobox]");
//_boBoxInput.each(function (idx, input) {
// alert("idx " + idx + " \n input " + input);
// var bobox = $(input).data("kendoComboBox");
// alert("ID>>> : " + bobox.value() + ", Text: >>> " + bobox.text());
//});
//-------------------------
var input = $(this).closest('table').find("._MarkScheme_Input");
var boboxInput = input.filter("[data-role=bobox]");
var bobox = boboxInput.data("kendoComboBox");
var selectedText = bobox.text();
var selectedValue = bobox.value();
var dataItem = bobox.dataItem();
alert("ID>>> : " + selectedValue + ", Text: >>> " + selectedText);