Using .NET Core, have a grid bound to a local data source. We are adding a similar item after selecting via a multiselect control. We have this working, however when we add it to the bound data source, any CSS changes we may have made to other rows disappear.  We are trying to make it so the CSS is either retained on the existing row or where we can restore it via an "item data bound" like event.

From the code below, I'm assuming the changed event on the data source occurs before the grid is rebound. And I cannot seem to identify a valid event on the grid for after the grid has been rebound to restore any CSS placed from the remove command.

Grid:
<kendo-grid name="TaskGrid" persist-selection="true" selectable="single row" height="300" datasource-id="gridDataSource" on-page="LoadRoleToTask()">            
                <columns>
                    <column hidden="true" field="TaskId" />
                    <column title="Task" field="TaskName" />
                    <column>
                        <commands>
                            <column-command name="Remove" click="RemoveTask" text="Remove"></column-command>
                        </commands>
                    </column>
                </columns>

                <groupable enabled="false" />
                <sortable enabled="true" allow-unsort="false" initial-direction="ascending" />
                <filterable enabled="true" />
            </kendo-grid>

Javascript:
    var gridDataSource = new kendo.data.DataSource({ change: AddCSS });
    
    function LoadRoleToTask()
    {
        @foreach(var r2t in Model.RoleToTasks)
        {
            <text>
        var roleToTask =
        {
            TaskId: "@r2t.TaskId",
            TaskName: "@r2t.TaskName",
            IsDeleted: false
        };

        gridDataSource.add(roleToTask);
            </text>
        }
    }

    function AddCSS(e)
    {
        var grid = $("#TaskGrid").data("kendoGrid");
        if (!grid) return;

        var headerCells = grid.element.find("th");
        
        for (var row = 0; row < grid.dataSource.total(); row++)
        {
            var dataItem = grid.dataSource.at(row);
            var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
            var currentTask = FindTask(dataItem.TaskId);

            if (!currentTask.isDeleted) continue;

            for (var i = 1; i < headerCells.length; i++)
            {
                var cell = $(rowCells[index]);
                cell.addClass("deletedRole");
            }
        }
    }

    function AddTask()
    {
        var multi = $("#TaskMultiSelect").getKendoMultiSelect();
        var multiDataItems = multi.dataItems();

        if (multiDataItems.length == 0) return;

        for (var i = 0; i < multiDataItems.length; i++)
        {
            var selectedTask = multiDataItems[i];
            var currentTask = FindTask(selectedTask.TaskId);

            if (currentTask) continue; //if already in data source, don't re-add

            var newRole =
            {
                TaskId: selectedTask.TaskId,
                TaskName: selectedTask.Name,
                IsDeleted: false
            };

            gridDataSource.add(newRole); //successful but removes any CSS already in place
        }
    }

function RemoveTask(e)
    {
        e.preventDefault();
        var grid = $("#TaskGrid").data("kendoGrid");
        var headerCells = grid.element.find("th");
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
        var currentTask = FindTask(dataItem.TaskId);

        if (!currentTask.IsDeleted)
        {
            currentTask.IsDeleted = true;
            e.target.innerText = "Undo";

            for (var index = 1; index < headerCells.length; index++)
            {
                var cell = $(rowCells[index]);
                cell.addClass("deletedRole");
            }
        }
        else
        {
            currentTask.IsDeleted = false;
            e.target.innerText = "Remove";

            for (var index = 1; index < headerCells.length; index++)
            {
                var cell = $(rowCells[index]);
                cell.removeClass("deletedRole");
            }
        }
    }

    function FindTask(taskId)
    {
        for (var i = 0; i < gridDataSource.data().length; i++)
        {
            var currentTask = gridDataSource.data()[i];

            if (currentTask && currentTask.TaskId == taskId)
            {
                return currentTask;
            }
        }
    }

Hi

I am new to Telerik, can someone point me to a sample of using Scheduler in Razor Page with EF data? I am not using Controller but code behind for Razor Page.

thanks in advance.

Hello,

I am trying to use the Scheduler control for my application. I have it reading the data from my controller fine. However, I cannot get it call the HttpPut handler correctly.

My breakpoint isnt hit & checking the traffic the responce is:

The code I am using for the UI is:

The code I am using for the Controller is:

What could be the issue for me?

Hi!

Example: https://demos.telerik.com/aspnet-core/grid/editing

When the user changes the first product name from "Chai" to "Chai2", and then back again to "Chai" without clicking on "Save changes", the dirty flag stays visible, and unchanged data is transferred to the server when clicking on "Save changes".

Is it possible to change this grid editing behaviour? In comparison, in inline editing mode, data is sent to the server when clicking on "Update" only when the data has really changed.

Best regards,

Kaan

Hi,

I have created a grid with 10 columns, but I need two of them to be editable.

1 - I don't want to use inline buttons [Edit], [Save] or [Delete];

2 - I don't want the other cells to be editable, only those two I need.

3 - I want the user to click in a cell, opening it for edition;

4 - I want to save those two values only if both of them are filled out;

5 - I don't mind having a server request when the user change from once cell to another (among the editable ones).

Is it possible to do? If not, could you give me some options of how I could manage it in a Telerik grid?

Thanks.

Hello,

I am evaluating Kendo UI for ASP.NET Core for our team.

We need to be able to render different editors in the same column. I have attached a screenshot with an example grid:

1. Wireless Keyboard: The parameter column is empty and not editable. There is only one single version of the keyboard.
2. T-Shirt: The parameter column has a DropDownList with options S (Id 1), M (Id 2), L (Id 3), XL (Id 4).
3. LED Lightbulb: The parameter column has a DropDownList with options 25 Watts and 40 Watts.

When the user changes the option in a DropDownList, data is send to the server, and an updated row is returned back to the client (for example, with a different price).

Is it possible to implement this grid with Kendo UI? Could you provide a working example for us?

Best regards,

Kaan

Are there any asp.net core examples for embedding controls in a grid?  I am trying to show a progressbar along with my row data.  The data fields display fine, but not the progress bar. I've attached a couple screen images - one showing a list version of what I am trying to do and the second of my results.  Here is how my grid is setup:

        @(Html.Kendo().Grid<ITFactory.Models.ChartModels.FeatureProgress>()
                                .Name("FeatureProgress")
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(10)
                                    .Read(read => read
                                        .Action("GetFeatureProgress", "Dashboards")
                                        .Data("FeatureProgressFilter")
                                    )
                                )
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.FeatureName);
                                    columns.Bound(c => c.EstimatedCardCount);
                                    columns.Bound(c => c.CompletedCardCount);
                                    columns.Template(" ").Title("ProgressBar");
                                })
                                .ClientRowTemplate(
                                           "<tr>" +
                                                "<td>" +
                                                    "#:FeatureName#" +
                                                "</td>" +
                                                "<td>" +
                                                    "#: EstimatedCardCount#" +
                                                "</td>" +
                                                "<td>" +
                                                    "#: CompletedCardCount#" +
                                                "</td>" +
                                                "<td>" +
                                                    "@(Html.Kendo().ProgressBar()" +
                                                    ".Name(Progress#:FeatureName#)" +
                                                    ".Type(ProgressBarType.Percent)" +
                                                    ".Max(#: EstimatedCardCount#)" +
                                                    ".Value(#: CompletedCardCount#))" +
                                                "</td>" +
                                            "</tr>"
                                )
                                .Sortable()
        )

Hello, 

I am trying to use a DDL (This happens to both HTML Helper & Tag Helper) With a 'Option-Label'. however, every time this is applied it causes the DDL to deformat. Please see the attached pictures. Do you have any idea why this is happening? 

I have an issue where the DIV on the bottom of the edit templates is not filling the width of the window.  Please see attached.

I have added the following .css which seems to control it but if the width is set to "auto" or "100%" it looks like the attachment.  If I change to to a specific pixel width it sizes but as I remember this should not need to be manually handled.

The grid does have the height and width set in the column declarations

Please advise

Have a grid and context menu defined in a partial view.  When the grid is positioned where the page is scrolled to the top then the context menu opens at point of right mouse click.  But as soon as page is scrolled down and grid is partially moved up and hidden from view, then the context menu is not positioned correctly on the y axis.

@using Kendo.Mvc.UI

@using NEP_Deconstruction.Data
@{
    const string ValuesSuffix = "-Values";
}

@(Html.Kendo().Grid<NEP_Deconstruction.Data.Models.ApprovalViewModel>()
                    .Name("approval_grid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID)
                            .EditorTemplateName("IntegerReadonly");
                        columns.Bound(o => o.ApprovalNumber)
                            .EditorTemplateName("IntegerReadonly");
                        columns.Bound(o => o.SourceCount)
                            // other column definitions
                        columns.Bound(o => o.Comment);

                        columns.Command(command =>
                        {
                            command.Edit().Text(" ").IconClass("k-icon k-i-edit").HtmlAttributes(new { style = "min-width: auto" });
                            command.Destroy().Text(" ").IconClass("k-icon k-i-delete").HtmlAttributes(new { style = "min-width: auto" });
                        }).Width(/*210*/ 125);
                    })
                    .ToolBar(toolbar => { toolbar.Create(); /*toolbar.Save();*/ })
                    .Editable(editable =>
                    {
                        editable.TemplateName("ApprovalPopupEditor");
                        editable.Mode(GridEditMode.PopUp);
                    })
                    .Resizable(c => c.Columns(true))
                    .Reorderable(c => c.Columns(true))
                    .Filterable()
                    .Groupable()
                    .Pageable(p => p.Numeric(false).PreviousNext(false))
                    .Selectable()
                    .Sortable()
                    .Scrollable(scrollable => scrollable.Virtual(true).Endless(true))
                    .ColumnMenu()
                    .HtmlAttributes(new { style = "height:430px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(100)
                        .ServerOperation(true)
                        .Events(events => events.Error("error_handler")
                                                .RequestStart("approval_grid_requeststart"))
                        .Model(model =>
                        {
                            // ***
                            // various default values set
                        })
                        .Read(read => read.Action("Read", "Approval"))
                        .Create(create => create.Action("Create", "Approval"))
                        .Update(update => update.Action("Update", "Approval"))
                        .Destroy(destroy => destroy.Action("Destroy", "Approval"))
                    )
                    .Events(events => events.Change("approval_grid_change")
                                            .DataBound("approval_grid_databound")
                                            .Edit("approval_grid_edit")
                                            .Save("approval_grid_save"))
)
@(Html.Kendo().ContextMenu()
                    .Name("approval_menu")
                    .Target("#approval_grid")
                    .Filter("tr[role='row']")
                    .Orientation(ContextMenuOrientation.Vertical)
                    .Items(items =>
                    {
                        items.Add()
                        .Text("Refresh");
                        //.ImageUrl(Url.Content("~/shared/web/toolbar/reply.png"))
                        items.Add()
                        .Text("Edit");
                        items.Add()
                        .Text("Delete");
                    })
                    .Events(e => e.Select("approval_menu_select"))
)