Grid popup with dropdown list example in asp.net core (tag helper)

[JOHNY]

Telerik UI for asp.net core 2024.1.130

I am trying to implement a grid popup with dropdown list in asp.net core (tag helper) , would like to know how to make this work.

List associated with dropdownlist will be available via a web api call.

please use the following sample as a starter, where we have popup with Frieght, order date, shipName, shipCity 

https://netcorerepl.telerik.com/QoYdOJlL07aiiORy37

I would like to convert shipCity from text box to dropdown list, where i get the list of cities using a web api call.

Could you please help me with this implementation? (if there is already another sample which demonstrates this, that would be fine as well)

 

[Anton Mironov]

Hi Johny,

Thank you for the details provided.

The described scenario should be achieved with a custom PopUp Editor Template. It is a view that should be placed in the Views folder of your project, so the REPL example can not be used for example.

In order to achieve the desired behavior, I would recommend using the approach from the following article:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/editing/custom-popup-editor

The implementation in the article above is for HTML helpers, but feel free to use it or change the code to use Tag Helpers.

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[JOHNY]

Hope you could provide a real working example, don't know how to translate from html helpers to tag helpers and bind data from different pages ( grid vs popup editor using different files)

[JOHNY]

Appreciate if you have any update on this.

Thanks

[Anton Mironov]

Hi Johny,

In order to prepare a sample project I used the following approach with TagHelper syntax:

For the Template, I used "template-id":

<editable mode="popup" template-id="editTemplate" />

Here is the template:

<script type="text/x-kendo-template" id="editTemplate">
    <div class="k-edit-label">
        <label for="ShipName">Ship Name:</label>
    </div>
    <div class="k-edit-field">
        <select id = "ShipName" name="ShipName" data-role="dropdownlist"
                data-source="{
                    transport: {
                        read: {
                            url: '@Url.Action("GetShipNames", "Grid")',
                            dataType: 'json'
                        }
                    }
                }"
                style="width: 100%;"></select>
    </div>
</script>

And the Action Method for populating the template:

        public JsonResult GetShipNames()
        {
            List<string> shipNames = new List<string>();

            for (int i = 1; i < 11; i++)
            {
                string shipName = "ShipName " + i;

                shipNames.Add(shipName);
            }

            return Json(shipNames);
        }

Attached is the sample project that I prepared for the case.

I hope it achieves the desired result.

 

Best Regards,
Anton Mironov

[JOHNY]

Thank you Anton!

[Anton Mironov]

Hi Johny,

Thank you for the kind words.

I am glad to hear that the desired behavior is now achieved.


Kind Regards,
Anton Mironov