I use a DropDownList as an EditorTemplate in a Grid.

The problem is, that the DDL has to display several thousand entries (products).

I tried to set the PageSize of the DataSource and handle the Filter-Event. This works fine so far.  The DDL opens very fast and I can search (filter) and then select an entry, that is not visible in the list at the beginning.

This works fine for adding a new record.

But when I want to edit an existing record in the grid I get problems. When the editor opens and the value is not in the select list of the DDL, it is not selected (also not displayed) and the value of the DDL is set to null.

This behavior makes sense to me.

When I remove the PageSize from the DataSource everythings works fine. But it takes to long to open the DDL. That's why I need another solution.

I also tried the virtualization. But the problem stays the same.

Does anyone have an idea how I can solve this?

Maybe another control? Finally the user should be able to search and select a product on an easy way.

I am grateful for any idea.

I have a grid which is a part of bigger form. I want to be able to do all sorts of data manipulation without saving it immediately. When saving form, I need to save data in a grid.

I'm experiencing a problem when editing a row in InLine mode. When I click on "edit", then "cancel", the row disappears from the grid depending on how I load data into the grid.

If Read method looks like this, than canceling edit works good but I'm not able to save data temporarily.

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            ToDestinations = _entities.ToDestinations.ToList();
            //var data = HttpContext.Session.Get("ToDestinationsData");
            //if (data != null)
            //{
            //    ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
            //}

            return new JsonResult(ToDestinations.ToDataSourceResult(request));
        }

On the other hand, if Read method looks like below, every row that I'm doing "edit" => "cancel" disappears. (This was a start to making grid data persistent while doing all kinds of data manipulation in a grid.)

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            //ToDestinations = _entities.ToDestinations.ToList();
            var data = HttpContext.Session.Get("ToDestinationsData");
            if (data != null)
            {
                ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
            }

            return new JsonResult(ToDestinations.ToDataSourceResult(request));
        }

This is my grid.

@(Html.Kendo().Grid<ToDestination>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.ForeignKey(c => c.TravelTypeId, ds => ds.Read(read => read.Url(Url.Page("Create", "TravelTypes"))), "TravelTypeId", "TravelTypeName").Title("Vrsta putovanja");

                columns.ForeignKey(c => c.CountryId, ds => ds.Read(read => read.Url(Url.Page("Create", "Countries"))), "CountryId", "CountryName", true).Title("Država")
                .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                columns.ForeignKey(c => c.PlaceId, ds => ds.Read(read => read.Url(Url.Page("Create", "Places"))), "PlaceId", "PlaceName", true).Title("Mjesto")
                .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                columns.ForeignKey(c => c.CenterId, ds => ds.Read(read => read.Url(Url.Page("Create", "Centers"))), "CenterId", "CenterName", true).Title("Centar")
                .EditorTemplateName("CenterEditor"); // Specify a custom editor template for the Center dropdown.

                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);
            })
            ))

I hope what I wrote makes sense.

What is the best practice to achieve saving grid data temporarily without "edit" => "cancel" bug appearing?

Hello,

after upgrading the versions buttons will not shown correctly

• Edit Button is disabled
• Delete Button will not shown anymore

We using dotnet core version 7 and Telerik version 2023.2.606:

Here is the code of the columns.

                      <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command template="<a class='k-grid-edit k-icon k-i-edit button_icon' href='\#'> </a>" text="\{Edit\}" icon-class="k-icon k-i-edit button_icon" name="edit"></column-command>
                            </commands>
                        </column>
                        <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
                            </commands>
                        </column>

Have you any idea to fix the problems? I think the icon class is changed with the update.

Second problem is to disable the buttons via javascript:

                $(".k-grid-edit").addClass("k-state-disabled")
                $(".k-grid-custom").addClass("k-state-disabled")

Before the update this commands works well after not. Have you any idea to find the icon via javascript.

Best regards
Jens

Hi, I have the following graph:

I would like to keep the values in the left side but without showing the negative sign, because they represent quantities. I tried several things for formatting the ValueAxis in order to perform some sort of Math.abs operation but nothing works. Is it possible what I want to achieve?

Otherwise, I wouldn't mid not showing the value axis if I can show the absolutes quantities using label template. However, I get a lot of undefined values that I don't know how to remove:

Thanks a lot.

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')