How to validate if a wrong value entered in a combobox.

[kalum]

Hi,

I have a combobox and I need a functionality like this. If the user enter an itemcode which is not avilable in the list then it shoud clear that value when focusing out of the combo. I have mensioned my code bellow and please help me to get above.

 @{Html.EJ()
                                            .ComboBox("ItemCodes")
                                            .AllowFiltering(true)
                                            .ComboBoxFields(h => h.Text("ItemCode").Value("InputItemKey"))
                                            .Query("new ej.Query().select(['InputItemKey','ItemCode']).take(50)")
                                            .ClientSideEvents(h => h.Filtering("filtering_ItemCode").Change("setItemCodeComboValue"))
                                            .Datasource((IEnumerable<Object>)ViewBag.Items)
                                        
                                            .Placeholder("Select an Item Code")
                                            .Width("200")
                                            .Render();
 }




 function filtering_ItemCode(e) {
            var query = new ej.Query().select(['ItemCode', 'InputItemKey']);
            query = (e.text !== '') ? query.where('ItemCode', 'contains', e.text, true) : query;
            e.updateData(e.model.dataSource, query);
         
 }



 function setItemCodeComboValue(args) {

 

        var value = $("#ItemCodes").ejComboBox("model.value");

        if (value != null) {


            var array2;
            var array = @Html.Raw(Json.Encode(@ViewBag.Items));
            for (var i = 0; i < array.length; i++)      {
                if (array[i].InputItemKey == value) {
                    array2 = [array[i].ItemName, array[i].UnitAbbr, array[i].UCPrice, array[i].ItTypeCode];
                }
            }


            var cmbItNms = $("#ItemNames").data("ejComboBox")
            cmbItNms.option({ value: value });

            $('#HdnUnitAbbr').val(array2[1]);
            $('#HdnUCPrice').val(array2[2]);
            $('#HdnItTypeCode').val(array2[3]);

        }
    }

Thank you

Kalum

[Prince Oliver]

Hi kalum, 

Thank you for using Syncfusion products. 

As per your requirement, we can use the AllowCustom property to remove the typed values in the input that are not in the dataSource. It is true by default, so setting AllowCustom to false will remove the typed values. Kindly refer to the following code. 

<div class="frame"> 

    <div class="control"> 

        @{ 

            Html.EJ() 

                .ComboBox("select") 

                .Width("100%") 

                .Datasource((IEnumerable<Flowers>)ViewBag.datasource) 

                .AllowCustom(false) 

                .ComboBoxFields(f => f.Text("text").Value("text")) 

                .Placeholder("Select") 

                .Render(); 

        } 

    </div> 

</div> 

Kindly refer to the following UG documentation for more information on the Custom Values: https://help.syncfusion.com/aspnetmvc/combobox/getting-started#custom-values 

Regards, 

Prince 

[kalum]

Hi Prince,

It worked fine. Thank you very much for your kind help.

Thanks,

Kalum