How to cascade DropDownList in Grid?

I've tried a lot of stuff using JavaScript, JQuery and Ajax but I can't get this to work. I wasn't able to find an example on how to do this.

This is my code for grid and editor templates...

@(Html.Kendo().Grid<ToDestination>(Model.ToDestinations)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.TravelTypeId,
                    (System.Collections.IList)ViewData["TravelTypes"], "TravelTypeId", "TravelTypeName").Title("Travel Type");

                    columns.ForeignKey(c => c.CountryId,
                    (System.Collections.IList)ViewData["Countries"], "CountryId", "CountryName").Title("Country")
                    .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                    columns.ForeignKey(c => c.PlaceId,
                    (System.Collections.IList)ViewData["Places"], "PlaceId", "PlaceName").Title("Place")
                    .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                    columns.Bound(c => c.PlaceName);
                    columns.Bound(c => c.CenterName);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
                })
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .DataSource(ds => ds.Ajax()
                .Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
                .Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
                .Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
                .Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
                .Model(m =>
                {
                    m.Id(id => id.ToDestinationId);
                    m.Field(tt => tt.TravelTypeId).DefaultValue(1);
                    m.Field(c => c.CountryId).DefaultValue(1);
                })
                )
                )

@model int? // Assuming CountryId is nullable

@(Html.Kendo().DropDownList()
    .Name("CountriesList")
    .DataTextField("CountryName")
    .DataValueField("CountryId")
    .BindTo((System.Collections.IEnumerable)ViewData["Countries"])
    .OptionLabel("Select a country")
    .Events(e => e.Change("onCountryChange"))
)

@model int? // Assuming PlaceId is nullable

@(Html.Kendo().DropDownList()
    .Name("PlacesList")
    .DataTextField("PlaceName")
    .DataValueField("PlaceId")
    .BindTo((System.Collections.IEnumerable)ViewData["Places"])
    .OptionLabel("Select a place")
)

I want to disable drag and drop images from local folders or copy paste the images from clipboard into the Kendo Editor (https://demos.telerik.com/aspnet-core/editor). 
I am using this function emailEditorPaste() to prevent such ,

function emailEditorPaste(e) { var clipboardData = e.event.clipboardData || window.clipboardData; var items = clipboardData.items; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.type.indexOf("image") !== -1) { e.preventDefault(); console.log("Images cannot be pasted here"); break; } } }

and I have appended it to the Paste events on Editor as in here
@(Html.Kendo().EditorFor(m => m.MsgT.body) . .Tools(tools => tools .Clear() .FontName().FontSize() .Bold().Italic().Underline() .JustifyLeft().JustifyCenter().JustifyRight() .ForeColor().BackColor() .InsertUnorderedList().InsertOrderedList() .Outdent().Indent() .CreateLink().Unlink() .InsertImage() ) .Events(events => events .Change("emailEditorChange") .Paste("emailEditorPaste")

emailEditorPaste() works fine in not allowing me the user to drag and drop the images but when I have a text copied to clipboard and I try to paste it into editor , it doesn't paste on first attempt and throws a console error:
"Cannot read properties of undefined (reading 'clipboardData')
TypeError: Cannot read properties of undefined (reading 'clipboardData')" .

On second attempt the text is pasted into the editor just fine.

I looked all places but I am still missing something, can you please share me some resources on how to disable the drag and drop images into the editor.

I need to show the notification on my razor page. The message comes from the controller. Below is what I have:

 public ActionResult Index()
        {
           

            if (test == "Success")
                return View("Successfully stored);
            else
                return View("failed to store");
        }

On My razor page, I want to show the Success notification message when test is Success otherwise show the failure message. How can I achieve this. I don't want to click any button to show the success and failure notification.

Hi there,

I'd like to trigger the virtualization scroll event programatically. My idea is to use a global body scroller to register the scroll down, and completely turn off the scroller on the listview container.

When I use the following code it will only replace my existing rows.

$("#allProductsListView").data("kendoListView").dataSource.read({ page: 2, pageSize: 36 })

I need a way to append in order to make virtualization work programatically.

Thank you.

I need grouping, filtering, sorting for a column. When I'm trying to bind to a field of an object which can be null, I get:

Uncaught TypeError: Cannot read properties of null (reading 'Name')

Hello,

can be hidden Saturdays and Sundays from the scheduler control in all views and how?

Many thanks!

I am looking for a sample of a responsive pie chart. I have tried different suggestions from the forums but none seem to work. Is there a fully worked sample I can reference?

I have a situation where certain users should be able to view data in a grid, but not be able to edit it. It looks like there are ways to disable individual elements of the grid, but is there a way to make it entirely readonly?

[edit: of course as soon as I finished typing this a co-worker made a suggestion that works. Simply putting the grid in a div with the class k-state-disabled does the trick]

I have grid, which has a boolean column, I want after page loading, to show only records with true value of the boolean column. I'm using row filtering, and I also want to show filter controls for this column activated on true value. I turned off server operations.