This is a migrated thread and some comments may be shown as answers.

Help reading data values & text for selected item

3 Answers 393 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Patrick
Top achievements
Rank 1
Veteran
Patrick asked on 17 Apr 2020, 10:37 PM

As you an see in my view below, I am trying to read the selected values in the change event of my MultiColumnComboBox.

The box is populating fine with about 300 records from a JsonResult from the controller. Here are the problems I'm needing help with:

1) Getting/Reading the data value and data text of the selected item in the list. combo.item shows as undefined when I put a breakpoint on it in the browser.

2) I'd like to know how to get/read the text of the third column that isn't either the DataValue or DataText of the selected item, Title in this case.

3) When I click on the an item when the list is dropped down, I have to click a second time for it to collapse. In the demos, they collapse as soon as I click on an item.

------------------------------------------------------

@{
    ViewBag.Title = "Index";
}

<h2>Bond Maturities</h2>

@(Html.Kendo().MultiColumnComboBox()
          .Name("bonds")
          .Placeholder("Select a bond")
          .DataTextField("IssueAbbreviation")
          .DataValueField("BondId")
          .Columns(columns =>
          {
              columns.Add().Field("IssueAbbreviation").Title("Issue");
              columns.Add().Field("Title");
              columns.Add().Field("BondId").Title("ID");
          })
          .HtmlAttributes(new { style = "width:100%;" })
          .Filter(FilterType.Contains)
          //.AutoBind(false)  <-- Prevents list from loading until something typed in to trigger filter.
          .MinLength(3)
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetBondTitleList", "Bond");
              })
              //.ServerFiltering(true)
              ;
          })
          .Events(e => { e.Change("onChange"); })
    )

<div class="box">
    <h4>Console log</h4>
    <div id="console"></div>
</div>

<script>
    
    function onChange(e) {
        $("#console").html("event: change");

        //var numeric = $("#age").data("kendoNumericTextBox");
        //numeric.value(10);
        var combo = $("#bonds").data("kendoMultiColumnComboBox");
        var dataItem = dataItem(combo.item.index());  //dataItem
        $("#console").html("Changed to " + dataItem.Value);
    //var dataItem = dataItem(combo.item.index());
        alert("ID: " + dataItem.Value + "; Title: " + dataItem[2] );
        
    }

</script>

3 Answers, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 21 Apr 2020, 02:47 PM

Hello Patrick,

All event objects have a sender field which provides a reference to the widget instance that triggered the event - e.sender.

1) To get the value and the text of the selected item you could use the value() and text() methods.

var value = e.sender.value();
var text = e.sender.text();

2) You can get the dataItem corresponding to the selected item via the dataItem() method. You can then check the value for the particular property you need.

var dataItem = e.sender.dataItem();

3) I was not able to reproduce this issue. Could you please check the attached sample project, and update it so the issue is reproducible, and send it back to me for further investigation?

The project attached also demonstrates how to get the value, text, and dataItem for the selected item.

Let me know if you have any additional questions.

Regards,
Aleksandar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Patrick
Top achievements
Rank 1
Veteran
answered on 21 Apr 2020, 08:57 PM

Thank you, Aleksandar. Using the sender object's properties gives me what I was looking for. As for the 3rd issue in my post, it appears that a problem in my event was stopping things. Once I revised the event handler, the list collapsed on one click.

FYI: The approach I basically from copied from the onSelect event handler in the events demo. Not sure why it works there. For me, e.Item came back as Undefined.

https://demos.telerik.com/aspnet-mvc/multicolumncombobox/events

if (e.item) {
  var dataItem = this.dataItem(e.item.index());
  kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
} else {

 

0
Accepted
Aleksandar
Telerik team
answered on 23 Apr 2020, 09:20 AM

Hi Patrik,

I am glad to hear you were able to achieve the desired result.

Allow me to clarify why e.item returns undefined when called in the change event. The change event provides reference only to the instance that triggered the event. The select event, however, provides additional event data - the data item instance of the selected item, the jQuery object representing the selected item and the possibility to prevent the select event. That's why calling e.item in the change event returns undefined, but calling e.item in the select event returns the jQuery object of the selected item.

Regards,
Aleksandar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
MultiColumnComboBox
Asked by
Patrick
Top achievements
Rank 1
Veteran
Answers by
Aleksandar
Telerik team
Patrick
Top achievements
Rank 1
Veteran
Share this question
or