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.

ASP.NETCore KendoGrid Correct way to disable delete for specific rows?

I have a use case where I need to disable the deletion of rows that still have children to maintain referential integrity of the database.  Instead of having the user hit DELETE and catch the error, I need to prevent the user from attempting to perform an invalid action.  I can attempt to hide the DELETE button in the onDataBound() or the onDataBinding() events but the results are poor and inconsistent.  When it works, it only works when the page is first loaded.  If the user performs an in-line edit on any row, the delete button unhides.  Other interactions with the page also unhide the DELETE button.  I have found several posts claiming that the "k-grid-delete" class can't be hidden. 

Instead of hiding the button outright, ideally I'd like to be able to still have the button visible, but in a disabled state. 

Is there a solution?

     function onDataBound(e) {
          var grid = $("#grid").data("kendoGrid");
          var rows = grid.tbody.children();
          rows.each(function (e) {
               var dataItem = grid.dataItem(this);
               if (dataItem.ChildrenCount > 0) {
                    var row = $("[data-uid=" + dataItem.uid + "]");
                    var deleteButton = row.find("k-grid-delete");
                    deleteButton.hide();
               }
          });
     }

Hi,

We need to develop a form for submitting data using kendo grid, in ASP NET CORE 5.0 MVC

basically we need to create an empty grid based on a database table, (this is clear using model binding), the user can click on a button in a toolbar for making a "Lookup" of that database, select one or many row and then, once selected, add them to the previous grid, ready for submit. 

What's the best way to achieve this with telerik controls?

Hello,

Is it possible to have server filtering in Razor Net Core 3.1? We used the demo as our base and referred to the documentation for server filtering (https://docs.telerik.com/aspnet-core/html-helpers/scheduling/scheduler/server-filtering). However we cannot pass Data("getAdditionalData") and the Data("forgeryToken") at the same time. Does anyone know how we can go about doing this so we can filter the results on the database side? Without the forgeryToken in Data, the app does not trigger the Read method (OnPostMeetings_Read)

Any insight is appreciated.

Thank you!

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

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