Set value (code and name) after dataload

[Ahmed]

Hello,

I am trying to apply this example in my code :  Text Value Field in ASP.NET CORE Auto Complete Component (syncfusion.com)

And here is my code :

 <ejs-autocomplete id="LEAVE_REQUEST_PROJECTLOT_ID" dataSource="@ViewBag.PhasesAndLots" placeholder="e.g. Absences"  filtering="filtering" autofill="false" filterType="StartsWith" sortOrder="@ViewBag.sort" value="@Model.ID" itemTemplate="<span class='item'><span class='Text'>${Text}</span> <input class='Id' type='hidden' value='${Id}'/></span>">

                                <e-autocomplete-fields value="Id" Text="Text"></e-autocomplete-fields>

                            </ejs-autocomplete>

                            <script>

                                function filtering(e) {

                                    var predicate = new ej.data.Predicate('Text', 'contains', e.text, true);

                                    var query = new ej.data.Query();

                                    query = (e.text !== '') ? query.where(predicate) : query;

                                    e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.PhasesAndLots)), query);

                                }

                            </script>

@ViewBag.PhasesAndLots is a list of object :

   public class IdTextViewModel

    {

        public string Id { get; set; }

        public string Text { get; set; }

    }

Unfortunatly, when I set the value to @Model.ID, it displays the ID of the object. I am expecting to display Text property instead.

How can I fix that?

[Sureshkumar P]

Hi Ahmed, 

We have validated your requirement, but we cannot replicate the reported issue in our end. we have created the sample based on your attached code example.  

 

Find the code example here: 

[sample.cshtml] 

 

<ejs-autocomplete id="LEAVE_REQUEST_PROJECTLOT_ID" dataSource="@ViewBag.PhasesAndLots" placeholder="e.g. Absences" filtering="filtering" autofill="false" filterType="StartsWith" sortOrder="@ViewBag.sort" value="@Model.Id" itemTemplate="<span class='item'><span class='Text'>${Vegetable}</span> <input class='Id' type='hidden' value='${Id}'/></span>"> 

 

    <e-autocomplete-fields value="Id" Text="Vegetable"></e-autocomplete-fields> 

 

</ejs-autocomplete> 

 

<script> 

 

    function filtering(e) { 

 

        var predicate = new ej.data.Predicate('Vegetable', 'contains', e.text, true); 

        predicate = predicate.or('Id', 'contains', e.text); 

        var query = new ej.data.Query(); 

        query = (e.text !== '' && e.value !== '') ? query.where(predicate) : query; 

        e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.PhasesAndLots)), query); 

 

    } 

 

</script> 

 

[sample.controller.cs] 

public class IdTextViewModel 

 

    { 

        public string Id { get; set; } 

        public string Text { get; set; } 

    } 

 

IdTextViewModel dt = new IdTextViewModel(); 

        public IActionResult Index() 

        { 

            ViewBag.PhasesAndLots = new Vegetables().VegetablesList(); 

            dt.Id = "item2"; 

            return View(dt); 

        } 

 

public class Vegetables 

    { 

        public string Vegetable { get; set; } 

        public string Category { get; set; } 

        public string Id { get; set; } 

        public List<Vegetables> VegetablesList() 

        { 

            List<Vegetables> veg = new List<Vegetables>(); 

            veg.Add(new Vegetables { Vegetable = "Cabbage", Category = "Leafy and Salad", Id = "item1" }); 

            veg.Add(new Vegetables { Vegetable = "Chickpea", Category = "Beans", Id = "item2" }); 

            veg.Add(new Vegetables { Vegetable = "Garlic", Category = "Bulb and Stem", Id = "item3" }); 

            veg.Add(new Vegetables { Vegetable = "Green bean", Category = "Beans", Id = "item4" }); 

            veg.Add(new Vegetables { Vegetable = "Horse gram", Category = "Beans", Id = "item5" }); 

            veg.Add(new Vegetables { Vegetable = "Nopal", Category = "Bulb and Stem", Id = "item6" }); 

            veg.Add(new Vegetables { Vegetable = "Onion", Category = "Bulb and Stem", Id = "item7" }); 

            veg.Add(new Vegetables { Vegetable = "Pumpkins", Category = "Leafy and Salad", Id = "item8" }); 

            veg.Add(new Vegetables { Vegetable = "Spinach", Category = "Leafy and Salad", Id = "item9" }); 

            veg.Add(new Vegetables { Vegetable = "Wheat grass", Category = "Leafy and Salad", Id = "item10" }); 

            veg.Add(new Vegetables { Vegetable = "Yarrow", Category = "Leafy and Salad", Id = "item11" }); 

            return veg; 

        } 

    } 

 

Find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASPCore1824640631  

 

If still you have faced the issue, then please update the below details  

1.       Update your exact Syncfusion package version. 

2.       If you have faced the issue in any version upgrade, then please update the previous and current version details. 

3.       If possible, replicate the reported issue in our attached sample, and revert the sample with detailed replication procedure. 

These details will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar p