In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

Installer and VS Extensions for ASP.NET Core

Visual Studio Integration Overview
A new article on how to enhance your experience in developing web applications with ASP.NET Core.

Downloading New Versions
A new article on how to keep your projects updated when using Telerik UI for ASP.NET Core.

Creating Projects
A new article on how to create a new Telerik UI for ASP.NET Core application.

In asp.net core I would like to refresh a grid form combobox.

Here my code but not working

Hi,

I am trying to Drag & Drop a data item from grid1 to grid2. The row should not be deleted in grid1.

After dropping the dataitem to grid2 I want to

• call the Create method on the controller
• check, if the operation is allowed  (there is a role / right model behind)
• update my model, if allowed
• rollback the change on the grid, if not allowed

I use TileLayout and kendoDraggable / kendoDropTarget.

On the frontend everything looks fine. But in the Create Method of the controller, I receive an empty model.

Any ideas, what I am doing wrong?

The model:

public class SignatureModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Img { get; set; }
    }

The controller:

public class LayerDefController : Controller
    {

        public ActionResult AllObjectTypes_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetAllObjectTypes().ToDataSourceResult(request));
        }

        public ActionResult MyObjectTypes_Read([DataSourceRequest] DataSourceRequest request)
        {
            var all = GetAllObjectTypes();
            var my = all.Where(o => o.Id < 5);
            return Json(my.ToDataSourceResult(request));
        }

        public ActionResult MyObjectTypes_Update([DataSourceRequest] DataSourceRequest request)
        {
            var all = GetAllObjectTypes();
            var my = all.Where(o => o.Id < 5);
            return Json(my.ToDataSourceResult(request));
        }

         [HttpPost]
        public IActionResult MyObjectTypes_Create([DataSourceRequest] DataSourceRequest request, SignatureModel model)
        {
            // update model
            //_all.Add(model);
            return new StatusCodeResult(200);
        }

private IEnumerable<SignatureModel> GetAllObjectTypes()
        {
            var result = Enumerable.Range(0, 50).Select(i => new SignatureModel
            {
                Id = i,
                Name = "Signature " + i,

            });

            return result.ToList();
        }

   }

}

The cshtml:

<script id="sig-img-template" type="text/x-kendo-template">
    <div class='sig-img'
         style='background-image: url(@Url.Content("~/images/#: Id #.svg"));'></div>
    <div class='sig-title'>#: Name #</div>
</script>

<script id="my-sig-template" type="text/x-kendo-tmpl">
    <div class="signature">
        <img src="@Url.Content("~/images/")#:Id#.svg" alt="#:Name# image" />
        <h3>#:Name#</h3>
        <p>#:kendo.toString(Id, "c")#</p>
    </div>
</script>

<!-- container templates -->
<script id="all-sigtypes-template" type="text/x-kendo-template">
    <div id="all-sigs-container" style="height:100%;width:100%;">
        @(Html.Kendo().Grid<collact.admin.web.Models.SignatureModel>()
        .Name("AllSigsGrid")
        .Columns(columns => {
            columns.Bound(s => s.Id).Width(50).Title("ID");
            columns.Bound(s => s.Name).Width(200);
            columns.Bound(s => s.Id).ClientTemplateId("sig-img-template").Title("img");
        })
        .HtmlAttributes(new { style = "height: 90%;" })
        .Navigatable()
        .Sortable()
        .Groupable()
        .Filterable()
        .ToolBar(t => t.Search())
        .Scrollable()
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
        .PersistSelection(true)
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.Id))
            .Read(read => read.Action("AllObjectTypes_Read", "LayerDef"))
         )
        .ToClientTemplate()
    )
    </div>
</script>

<script id="my-sigtypes-template" type="text/x-kendo-template">
    <div id="my-sigs-container" style="height:100%;width:100%;">
    @(Html.Kendo().Grid<collact.admin.web.Models.SignatureModel>()
        .Name("MySigsGrid")
        .Columns(columns => {
            columns.Bound(s => s.Id).ClientTemplateId("my-sig-template").Title("img");
    })
         .HtmlAttributes(new { style = "height: 90%;" })
         .DataSource(dataSource => dataSource
         .Ajax()
         .Model(m => m.Id(s => s.Id))
         .Read(read => read.Action("MyObjectTypes_Read", "LayerDef"))
         .Create(c => c.Action("MyObjectTypes_Create", "LayerDef"))
         .Update(update => update.Action("MyObjectTypes_Update", "LayerDef"))
         .PageSize(15)
        )
        .Pageable()
        .Scrollable()
        .ToClientTemplate()
    )

    </div>
</script>

<div id="tilelayout"></div>
@(Html.Kendo().TileLayout()
        .Name("tilelayout")
        .Columns(5)
        .RowsHeight("500px")
        .ColumnsWidth("285px")
        .Containers(c => {
            c.Add().Header(h => h.Text("Alle verfügbaren Objekttypen")).BodyTemplateId("all-sigtypes-template").ColSpan(2).RowSpan(2);
            c.Add().Header(h => h.Text("Ausgewählte Objekttypen")).BodyTemplateId("my-sigtypes-template").ColSpan(1).RowSpan(2);
        })
        .Resizable()
    )


<script>
    $(document).ready(function () {
        var grid1 = $("#AllSigsGrid").data("kendoGrid");
        var grid2 = $("#MySigsGrid").data("kendoGrid");
        var dataSource1 = grid1.dataSource;
        var dataSource2 = grid2.dataSource;

        $(grid1.element).kendoDraggable({
            filter: "tr",
            hint: function (e) {
                var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                return item;
            },
            group: "gridGroup1",
        });

        try {

            grid2.wrapper.kendoDropTarget({
                drop: function (e) {
                    var dataItem = dataSource1.getByUid(e.draggable.currentTarget.data("uid"));

                    console.log("dataItem: " + dataItem + ", ID = " + dataItem.get("Id"));
                    grid2.dataSource.add(dataItem);

                    $.each(grid2.dataSource.data(), function () {
                        console.log(this.Id);
                    })

                    grid2.dataSource.sync();
                    grid2.refresh();
                },
                group: "gridGroup1",
            });
        } catch (err) {
            console.log(err);
        }
    });
</script>

<style>
    .sig-img {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: 40px 44px;
        background-position: center center;
        vertical-align: middle;
        line-height: 41px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    }

    .sig-title {
        display: inline-block;
        vertical-align: middle;
        line-height: 41px;
        padding-left: 10px;
    }


    .signature {
        float: left;
        position: relative;
        width: 111px;
        height: 60px;
        margin: 0 5px;
        padding: 0;
    }

    .signature img {
        width: 50px;
        height: 50px;
    }

    .signature h3 {
        margin: 0;
        padding: 3px 5px 0 0;
        max-width: 96px;
        overflow: hidden;
        line-height: 1.1em;
        font-size: .9em;
        font-weight: normal;
        text-transform: uppercase;
        color: #999;
    }

    .signature p {
        visibility: hidden;
    }

    .signature:hover p {
        visibility: visible;
        position: absolute;
        width: 110px;
        height: 110px;
        top: 0;
        margin: 0;
        padding: 0;
        line-height: 110px;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,0.75);
        transition: background .2s linear, color .2s linear;
        -moz-transition: background .2s linear, color .2s linear;
        -webkit-transition: background .2s linear, color .2s linear;
        -o-transition: background .2s linear, color .2s linear;
    }

    .placeholder {
        border: 1px dashed #ccc;
        background-color: #fff;
        color: #333;
    }

    .hint {
        opacity: 0.4;
    }
</style>

The images are just numbered svg-files.

Can anybody help, please?

Best regards

Christine

having a grid, with a search panel, the text in the search panel "Search..." is not translated, but another toolbars are translated

        .ToolBar(

            toolbar => {
                toolbar.Create(); // translated to french
                toolbar.Save(); // translated to french
                toolbar.Excel(); // translated to french
                toolbar.Search().Text("Recherche..."); // NOT translated to french
            }
        )

I should hardcode translation, but shouldn't it be already translated in JS localization files?

Please add this to translation files :

$(function () {
    /* Grid messages */
    if (kendo.ui.Grid) {
        kendo.ui.Grid.prototype.options.messages =
            $.extend(true, kendo.ui.Grid.prototype.options.messages, {
                commands: { search: "Rechercher..." }
            });
    };
});

I have created a ViewComponet that contains a Kendo textbox.

		public async Task<IViewComponentResult> InvokeAsync(ModelExpression aspFor)
		{
			return View("MyView", new MyModel(){AspFor = aspFor ... });
		}

My AspFor when it gets to the view is an instance of a ModelExpression, but the Kendo controls are expecting a string for the "Expression()" method.

How do I bind this Kendo control to the instance of the ModelExpression?

The TextBoxFor isn't happy and attempting to convert the ModelExpression instance back to its string doesn't result in HTML that contains all of the proper attributes on it.

Thanks

-Cam

How to localize "Retry", "Cancel" buttons of the Spreadsheet messages?

I added that to the head of the page, but didn't help

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/cultures/kendo.culture.fr-FR.min.js")"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/messages/kendo.messages.fr-FR.min.js"></script>

The question is also on SO: question

I have a list of Countries in my Grid, a country has a Code, that is unique. The Grid is in EditCell mode. 

I need to perform a check, if newly inserted Country Code is Unique. 

So, on the controller I have

        [AcceptVerbs("GET", "POST")]
        public IActionResult KeyExist(string key)
        {
            if (_countryService.CodeExists(key))
            {
                return Json($"The Code '{key}' is already used, please try another one!");
            }

            return Json(true);
        }

Could we have an example of remote validation when Popup editing of a grid object ?

I added the [Remote] attribute to the DTO object. Added the Controller's check method, that receives always null as parameter, where should receive the modified string param. Please see for details the following question. I also get in the request playload the correct parameter, when the client sends to the server. But on the server side - always null.

I have a grid and I want to sum the number of true values in a boolean column. Is there a way to create a custom aggregate function to achieve this?

Brett