As we deal with internationalization of our application we are seeing odd behavior from the ComboBox in IE 11 when the Placeholder is in a language using Unicode characters.

For example, the placeholder text "Select Ingredient" in English translates to

Vælg ingrediens - Danish

Wählen Sie Ingredient - German

Seleccione Ingrediente - Spanish

Välj ingrediens - Swedish

In English and Spanish, the ComboBox loads correctly. However, in Danish, German, and Swedish the ComboBox loads into the page already open. The same thing happens if I try to convert those Unicode characters to HTML-encoded. Is there a workaround?

I have a combobox that has to display very many rows so I have decided to use virtual. Now I have to display for each row 6 fields in a table and I saw there was an example https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-with-embedded-table. After playing around and trying to make it work I saw in the documentation that Combobox auto-width does not work with virtual.

Is there an alternative to this?

I tried to set myself the width of the popup but for some reason the kendo ui code changes it back or the display ignores the value.

I am trying to get a ComboBoxFor to work inside a Kendo Modal Window. Thing is, the value type is always null.  THis is what I am doing in side a modal window:

Currently I read the data needed for the ComboBox like:

            $(domNode).kendoComboBox({
                dataSource: {
                    transport: {
                        read: function(options) {
                            setReadOptions && setReadOptions(options);
                            const filters = that.getDataSourceData(options.data);
                            const serviceUrl = `${trackUrl.includes('?') ? trackUrl + '&' : trackUrl+'?'}${that.encodeData(filters)}`;
                            ajax.get<any>(serviceUrl)
                                .then((returnObj) => {
                                    let comboBoxOptions = returnObj;
                                    if (filterOptions) {
                                        comboBoxOptions = filterOptions(returnObj);
                                    }
                                    options.success(comboBoxOptions);
                                }).fail(() => {
                                    options.error("Could not retrive data for selected document Id.");
                                })
                        },
                        prefix: ''
                    },
. . . . .

Now there is the possibility of the url that is used could change. Based on that changed url I would like to set new options with a call to something like  I do for when the ajax method returns

                                    if (filterOptions) {
                                        comboBoxOptions = filterOptions(returnObj);
                                    }
                                    options.success(comboBoxOptions);

I know I can refresh the comboBox with something like

                this.comboBox.dataSource.read()

But I don't know how to also affect the options for the comboBox?

Kevin

Hi,

I need to filter a combobox based on the value of a check box.
I explain.

I have a checkbox that will start unchecked (value 0).
And below is a combobox that will use an api to fetch the data.
If the user selects this checkbox, the data from the combobox must be updated.

Very similar to this example: https://demos.telerik.com/aspnet-core/combobox/cascadingcombobox
But using the checkbox.

Can someone help me?
I am using ASP.NET MVC Core.

I have an old application where the user was entering an input a dropdown list (of multiple values concatenated) was displayed and he could filter the list based on the values displayed.

Now we decided to use Combobox since the Autocomplete does not open the dropdown when the autocomplete receives focus. Since the list contains too many values I though I should try also virtualization

However when I write something in the combobox no event is triggered on the server. If I open the dropdown manually the server is called.

I tried removing the Virtual and the result was the same (Probably it did not worked because I left the Ajax and the PageSize).

Hi,

I'm using an EditorTemplate to enable the user to select a person

@model Int64

@(Html.Kendo().ComboBox()
            .Name("RepIRN")
            .Filter("contains")
            .Placeholder("Select a rep...")
            .DataTextField("Text")
            .DataValueField("Value")
       .HtmlAttributes(new { style = "width:100%;" })
          .Filter("contains")
          .AutoBind(false)
          .MinLength(3)
          .DataSource(source =>
          {
            source.Read(read =>
            {
              read.Action("GetUsers", "AutoComplete");
            })
            .ServerFiltering(true);
          })
)

The model that I'm displaying is

 public class JobObjectModel
  {
    public long IRN { get; set; }
    public string Rep { get; set; }

    [UIHint("RepEditor")]
    public long RepIRN { get; set; }

    public string JobStatus { get; set; }
    public string Promised { get; set; }
 }

The combobox works fine except I can't figure out how I populate it with the rep value and rep name when the page loads the model.Everything else seems to work, if the user selects a value it is sent back to the controller fine etc.

I just can't figure out how I load the value (and text) when the page loads.

Below is how I populate the combobox

   public JsonResult GetUsers(string text)
    {

    var sortedPeople = Database.GetPeople(text);
      List<SelectListItem> items = new List<SelectListItem>();
      foreach (var person in sortedPeople)
      {
        items .Add(new SelectListItem() { Text = person.FullName, Value = person.IRN.Value.ToString() });
      }

      return Json(items , JsonRequestBehavior.AllowGet);
    }

So I am trying to do something a little odd. I have a few tables with denormalized data. I have a setup table that based on the field name returns a list of values I populate a combobox on my grid with. On my grid when I edit up create a new record it never sends over the selected value. Also, by default if that record in the grid does not have a value it says "null" instead of the placeholder which seems to defeat the whole purpose of a place holder. Any assistance would be greatly appreciated.

public class InventoryViewModel
    {
        public int InventoryId { get; set; }
        public int ProjectId { get; set; }
        public int Qty { get; set; }
        public bool AuditFlag { get; set; }
        public string UpdatedBy { get; set; }
        public DateTime? UpdatedDt { get; set; }
        public int? ProductNameId { get; set; }
        public string Size { get; set; }
        public string WorkTypes { get; set; }

        [DisplayName("Size")]
        [UIHint("NewMeterSizeDDEditor")]
        public MeterSizeDDViewModel SizeList { get; set; }

        [DisplayName("Work Types")]
        [UIHint("WorkTypesMSEditor")]
        public IEnumerable<InventoryWorkTypesMSViewModel> WorkTypesMS { get; set; }

        public List<InventoryViewModel> GetList(int projectId, int? productNameId)
        {
            try
            {
                int ii = 1;

                List<InventoryViewModel> model = new List<InventoryViewModel>();
                 model = _db.Inventories
                        .Select(i =>
                              new InventoryViewModel
                              {
                                  InventoryId = i.InventoryId,
                                  ProjectId = i.ProjectId,
                                  Qty = i.Qty,
                                  AuditFlag = i.AuditFlag,
                                  ProductNameId = i.ProductNameId,
                                  UpdatedBy = i.UpdatedBy,
                                  UpdatedDt = i.UpdatedDt,
                                  Size = i.Size,
                                  WorkTypes = i.WorkTypes,
                                  SizeList = new MeterSizeDDViewModel
                                              {
                                                 // WorkOrderFieldDropDownValueId = -1,
                                                  Size = i.Size
                                              }
                              })
                        .Where(i => i.ProjectId == projectId)
                        .Where(i => productNameId == 0 || i.ProductNameId == productNameId).ToList();

                foreach(var m in model)
                {
                    if(m.WorkTypes != null)
                    {
                        string[] workTypeArray = m.WorkTypes.Split(',');

                        List<InventoryWorkTypesMSViewModel> f = new List<InventoryWorkTypesMSViewModel>();

                        foreach(string wt in workTypeArray)
                        {

                            f.Add(new InventoryWorkTypesMSViewModel
                            {
                                Id = ii,
                                WorkType = wt
                            });

                            ii++;
                        }

                        m.WorkTypesMS = f.AsEnumerable();
                        
                    }
                }

                return model.ToList();
            }

            catch (Exception ex)
            {
                StatusErrorHandlingViewModel sc = new StatusErrorHandlingViewModel();

                System.Web.UI.Page page = new System.Web.UI.Page();
                string loginUserID = page.User.Identity.Name;

                sc.Id = -1;
                sc.Class = "InventoryViewModel";
                sc.Method = "GetList";
                sc.User = loginUserID;
                sc.Message = ex.ToString();

                sc.AddError(sc);

                _db.SaveChanges();

                return null;
            }
        }

public JsonResult _PopulateNewMeterSize(string text)
        {
            var meterSizes = _db.WorkOrderFieldDropDownValues
                .Where(v => v.WorkOrderFieldDropDown.WorkOrderField == "NewSize")
                .Select(w => new MeterSizeDDViewModel
                {
                   // WorkOrderFieldDropDownValueId = w.WorkOrderFieldDropDownValueId,
                    Size = w.Value
                });

            if (!string.IsNullOrEmpty(text))
            {
                meterSizes = meterSizes.Where(p => p.Size.Contains(text));
            }

            return Json(meterSizes, JsonRequestBehavior.AllowGet);
        }

        public void _PopulateNewMeterSizeViewData()
        {
            var meterSizes = _db.WorkOrderFieldDropDownValues
                .Where(v => v.WorkOrderFieldDropDown.WorkOrderField == "NewSize")
                .Select(w => new MeterSizeDDViewModel
                {
                    //   WorkOrderFieldDropDownValueId = w.WorkOrderFieldDropDownValueId,
                    Size = w.Value
                }); //.OrderBy(v => v.WorkOrderFieldDropDownValueId).ToList();

            ViewData["newSize"] = meterSizes;
            ViewData["defaultNewSize"] = meterSizes.First();
        }

View

<script type="text/kendo" id="WorkTypesMSTemp">
    <ul>
        #for(var i = 0; i< data.length; i++){#
        <li>#:data[i].WorkType#</li>
        #}#
    </ul>
</script>

<script type="text/javascript">
    var WorkTypesMSTemp = kendo.template($("#WorkTypesMSTemp").html(), { useWithBlock: false });
</script>

<h2>Inventory List</h2>


@(Html.Kendo().Grid<FS2.ViewModels.Inventory.InventoryViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(u => u.InventoryId).Visible(false);
            columns.Bound(u => u.ProjectId).Visible(false);
            columns.Bound(u => u.ProductNameId).Visible(false);
            columns.Bound(u => u.Qty);
            columns.Bound(u => u.AuditFlag);
            columns.Bound(u => u.SizeList).ClientTemplate("#=SizeList.Size#");
            columns.Bound(u => u.WorkTypesMS).ClientTemplate("#=WorkTypesMSTemp.WorkTypesMS#");
            columns.Command(command => { command.Destroy(); }).Width(150);
        })
        .ToolBar(toolBar =>
        {
        //code to create template
        toolBar.Template(@<text>
        <div class="toolbarbuttons">
            <a id="AddNew" class='k-button k-button-icontext k-grid-add k-state-disabled' href='#'><span class='k-icon k-add'></span>Add new record</a>
            <a class='k-button k-button-icontext k-grid-save-changes' href='#'><span class='k-icon k-i-check'></span>Save</a>
            @*onclick="return onSave()"*@
        </div>
        <div class="toolbar">

            <label class="workDate-label" for="workDate">Product:</label>
            @(Html.Kendo().DropDownList()
                                .Name("productname")
                                .OptionLabel("All")
                                .DataTextField("ProductName")
                                .DataValueField("ProductNameId")
                                .AutoBind(false)
                                .Events(e => e.Change("productnameprojectChange"))
                                .HtmlAttributes(new { style = "width: 70%;" })
                                .DataSource(ds =>
                                {
                                    ds.Read("_PopulateProductNamesDD", "Common");
                                })
            )
            <label class="site-label" for="site">Project:</label>
            @(Html.Kendo().DropDownList()
                                .Name("project")
                                .OptionLabel("All")
                                .DataTextField("ProjectName")
                                .DataValueField("ProjectId")
                                .AutoBind(false)
                                .Events(e => e.Change("projectChange"))
                                .HtmlAttributes(new { style = "width: 70%;" })
                                .DataSource(ds =>
                                {
                                    ds.Read("_PopulateProjectsDD", "Common");
                                })
            )
        </div>
        </text>);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events

                .Error("error_handler")

                .Change("onChange")
                )
        .Model(model =>
        {
            model.Id(u => u.InventoryId);
            model.Field(u => u.Size == u.SizeList.Size);
            model.Field(u => u.WorkTypesMS).DefaultValue(new List<FS2.ViewModels.Common.InventoryWorkTypesMSViewModel>());
            model.Field(u => u.SizeList).DefaultValue(
               ViewData["defaultNewSize"] as FS2.ViewModels.Common.MeterSizeDDViewModel);
        })
        .PageSize(20)
        .Read(read => read.Action("_InventoryListGrid", "Inventory").Data("onRead"))
        .Create(create => create.Action("_InventoryListGridCreate", "Inventory").Data("serialize"))
        .Update(update => update.Action("_InventoryListGridEdit", "Inventory").Data("serialize"))
        .Destroy(destroy => destroy.Action("_InventoryListGridDestroy", "Inventory"))

    )
)

Hi,

i am facing issue with Kendo Combo boxes, where the Change event is getting fired two times, please find the below code.

<table>
                            <tr id="controls">
                                <td>
                                    <label id="lbl1">Config Type:</label>
                                </td>
                                <td>

                                    @(Html.Kendo().ComboBox()
                                        .Name("cmb_configType")
                                        .HtmlAttributes(new { @class = "fieldentertext", required = "required", style = "width:85%;", validationmessage = "" })
                                        .Placeholder("Select Config Type...")
                                        .DataTextField("ConfigTypes")
                                        // .DataValueField("Names")
                                        .Filter(FilterType.Contains)

                                                .Events(e =>
                                                {
                                                    e.Change("OnChange_ConfigType");
                                                    //.Select("OnSelect_Config")
                                                    //.Open("OnOpen_Config")
                                                    //.Close("OnClose_Config")
                                                    //.DataBound("OnDataBound_Config")
                                                    //.Filtering("OnFiltering_Config");
                                                })
                                                                            )


                                </td>
                                
                                <td>
                                    <label id="lbl3">Config Name:</label>
                                </td>
                                <td>
                                   
                                    @(Html.Kendo().ComboBox()
                                .Name("cmb_confignames")
                                .HtmlAttributes(new { @class = "fieldentertext", required = "required", style = "width:85%;", validationmessage = "" })
                                .Placeholder("Select Config Name...")
                                .DataTextField("ConfigNames")
                                // .DataValueField("Names")
                                .Filter(FilterType.Contains)

                                        .Events(e =>
                                        {
                                            e.Change("OnChange_ConfigNames");
                                            //.Select("OnSelect_Config")
                                            //.Open("OnOpen_Config")
                                            //.Close("OnClose_Config")
                                            //.DataBound("OnDataBound_Config")
                                            //.Filtering("OnFiltering_Config");
                                        })
                                                                    )
                                </td>
                                <td>
                                    <button class="btn-brdr" id="btnctrl">+</button>
                                </td>
                                
                            </tr>
                        </table>

i am creating two combo boxes 1. Config Type 2. Config Name

when user clicks on first combo, based on the selection i am loading data to second combo box.

when User clicks on Second Combo box(Config Name), It is firing the event for(Config Type) once again and then it is firing event for(Config Name), Why it is firing event for First combo box, when i select on Second combo box?

And also i observed that, if i click on any where in the page these two events are firing, What is wrong in this code?

Here are my fucntions which gets hit on event.

function OnChange_ConfigType(obj)

{

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

}

function OnChange_ConfigName(obj)

{

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

}

Please help on this.