Edit Cell in Kendo Grid ASP.NET MVC

[Mayurbhai]

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

 

[Mayurbhai]

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

 

[Hetali]

Hello Mayur,

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

Regards,
Hetali
Progress Telerik

[Patrick | Technical Support Engineer, Senior]

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

[Mayurbhai]

Thank you for doing it! I am looking forward to see an example of what we discussed.

[Patrick | Technical Support Engineer, Senior]

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