This is a migrated thread and some comments may be shown as answers.

Edit Cell in Kendo Grid ASP.NET MVC

5 Answers 636 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mayurbhai
Top achievements
Rank 1
Veteran
Mayurbhai asked on 15 Apr 2021, 04:28 AM

Hi Team,

I am using the Kendo Grid ASP.NET MVC. Please find the column code below. I want to do few things.

1) Edit button is position in the last column for each row having its own. Once the Edit button is being clicked, I want Edit button to be replaced with "Update and Cancel" button.

2) After clicking the edit button, the First column of the whatever row's" Edit" button being clicked will be able to editable by the user. User can type what they wanted to.

3) Once the user clicks on the "Update" button, the first column should be updated (what a user has changed) and become noneditable, and Edit button will replace the "Update and Cancel" button. If user clicks the Cancel button, then the first column would not be updated and Edit button will replace the "Update and Cancel" button. 

4) Grid rows (all data) should remain same as they were before. Refresh function would wipe out the previous data which I do not want it to happen. I want to update a specific row's first column when a user clicks the Edit button of that row. After editing and clicking the update button, the rest of the rows must remain same as they were before.

columns.Bound(p => p.ClickStatus)
        .Title("Action")
        .ClientTemplate("<button type='k-button' class='btn btn-link' id='editComment'>Edit</button>")
        .Groupable(true)
        .Width(120)
        .Locked(false)
        .HtmlAttributes(new { style = "text-align: center;" });

Please guys let me know if you know ways to do it. I have been researching this but not able to succeed. Please get back to me as quickly as possible since I am working on the project. 

 

Best,

Mayur Maisuria

 

5 Answers, 1 is accepted

Sort by
0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 15 Apr 2021, 04:40 PM

Hi Team,

 

I found the following example "editable.mode - API Reference - Kendo UI Grid | Kendo UI for jQuery (telerik.com)", but it's in the Jquery. I am using the ASP.NET MVC kendo grid. Please find the code below.

    @(Html.Kendo().Grid<SoCoGas.Reviewer.DTO.LeakTrackingSearchResultsDTO>
    ().Name("ltOrderSummaryCommentGrid")
    .Columns(columns =>
    {
        //columns.Command(command => command.Edit().Text(" ")).Width(43).Locked(false);
        columns.Bound(p => p.OrderId).Title("Comments").Width(200).Groupable(true).Format("{0:g}").HtmlAttributes(new { style = "text-align: center;" });
        columns.Bound(p => p.ServiceArea).Title("Added By").Groupable(true).Width(150).Locked(false).HtmlAttributes(new { style = "text-align: center;" });
        columns.Bound(p => p.BusinessUnit).Title("Date Added").Groupable(true).Width(170).Locked(false).HtmlAttributes(new { style = "text-align: center;" });
        columns.Bound(p => p.EmergencyType).Title("Last Modified By").Groupable(true).Width(150).Locked(false).HtmlAttributes(new { style = "text-align: center;" });
        //columns.Command(command => command.Edit().Text("Action"));
        columns.Bound(p => p.ClickStatus)
        .Title("Action")
        .ClientTemplate("<button type='k-button' class='btn btn-link' id='editComment'>Edit</button>")
        .Groupable(true)
        .Width(120)
        .Locked(false)
        .HtmlAttributes(new { style = "text-align: center;" });
        //columns.Select().HeaderTemplate("Delete").Width(100).Locked(false).HtmlAttributes(new { @class = "checkbox-align", style = "text-align: center;" }).HeaderHtmlAttributes(new { @class = "checkbox-align", style = "text-align: center; height: auto; vertical-align: super; padding-bottom: 9px;" });
        /**
        columns.Bound(p => p.City)
        .Title("Delete")
        .ClientTemplate("<input class='box' name='locationthemes' type='checkbox' value='#=OrderId#' />")
        //.ClientGroupHeaderTemplate("<input type='checkbox' id='selectAll' onclick='toggleSelection()' />")
        .HtmlAttributes(new { style = "text-align: center;"})
        .Width(100)
        .Sortable(false)
        .Filterable(false);
        */
        //columns.Command(command => command.Custom("Move to Unassign").Visible("showUnassignButton").Click("releaseOrderToClick")).Width(150);
    }) // End of Column definition
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()
    .IsEqualTo("Is equal to")
    .IsNotEqualTo("Is not equal to")
    ))
    ).Selectable(selectable => selectable
    .Mode(GridSelectionMode.Single)
    .Type(GridSelectionType.Row)
    )
    //.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode.
    .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .PageSize(500)
    .Read(read => read.Action("", "").Data(""))
    ).Events(e => e.DataBound("ltGrid_dataBound").ExcelExport("onLTExportExcel"))
    .Excel(excel => excel
    .FileName("Leak Tracking Orders.xlsx")
    .Filterable(true)
    .AllPages(true)
    )
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Groupable()
    .Sortable()
    .ColumnMenu()
    .HtmlAttributes(new {style = "height:204px;"})
    .Pageable(pageable => pageable
    .Refresh(false)
    .PageSizes(new List<object>
        { 10, 20, 50, "All" })
        )
        .AutoBind(false)
        .Scrollable(a => a.Height("auto"))
        )

 

0
Hetali
Telerik team
answered on 15 Apr 2021, 04:46 PM

Hello Mayur,

Please take a look at the article for Inline Editing in Telerik UI for ASP.NET MVC Grid.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 15 Apr 2021, 07:09 PM

Hello Mayurbhai,

I have created a new support ticket for you to help provide an escalated 24 hour support time frame for this issue instead of the 72 hour forum time frame.  I will continue the support from the other ticket.  

Please let me know if you have any questions.

Regards,
Patrick
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 15 Apr 2021, 07:11 PM
Thank you for doing it! I am looking forward to see an example of what we discussed.
0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 15 Apr 2021, 08:53 PM

Hi Mayurbhai,

To help those looking for how to make a column non-editable, there are two options for an inline editing Kendo UI Grid:

1.  Set the schema.model.field's editable property to false:

    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => { 
            model.Id(p => p.ProductID);
            model.Field(p => p.UnitPrice).Editable(false);
            model.Field(p => p.UnitsInStock).Editable(false);
            model.Field(p => p.Discontinued);
        })
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
    )

2.   Set the column.editable property to a function which returns false:

Grid

    .Columns(columns =>
    {
        columns.Bound(p => p.Discontinued).Width(120).Editable("notEditable");
        //...
    })

JavaScript

    function notEditable(e) {

        //add any custom conditionals 

        return false;
    }

Regards,
Patrick
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Mayurbhai
Top achievements
Rank 1
Veteran
Answers by
Mayurbhai
Top achievements
Rank 1
Veteran
Hetali
Telerik team
Patrick | Senior Technical Support Engineer
Telerik team
Share this question
or