I am using kendo comboBox in my app and I need to get value and ID of record out of ComboBox, outside the ComboBox actual function.... I am using comboBox dropdown in table against each record so I can't relay on css ID to get comboBox value... I have managed to reach to input comboBox 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
<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>
$("._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());
}
});
$("#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);
.....
Have 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 :
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.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:
<input class="custom-class" /> <script> $(function() { $(".custom-class").kendoComboBox(); }); </script>
<span class="k-widget k-combobox k-header custom-class"> <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"> <input class="k-input custom-class" type="text" autocomplete="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="combobox" 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=combobox]");
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 combobox instance for each of the input element.
Here I prepared a simple jsBin demo, which shows how to accomplish 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 'comboxBox' in loop...
//var _comboBoxInput = $(this).closest('table').find("._MarkScheme_Input").filter("[data-role=combobox]");
//_comboBoxInput.each(function (idx, input) {
// alert("idx " + idx + " \n input " + input);
// var combobox = $(input).data("kendoComboBox");
// alert("ID>>> : " + combobox.value() + ", Text: >>> " + combobox.text());
//});
//-------------------------
var input = $(this).closest('table').find("._MarkScheme_Input");
var comboboxInput = input.filter("[data-role=combobox]");
var combobox = comboboxInput.data("kendoComboBox");
var selectedText = combobox.text();
var selectedValue = combobox.value();
var dataItem = combobox.dataItem();
alert("ID>>> : " + selectedValue + ", Text: >>> " + selectedText);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.