Inline editing not triggering controller (update)

[Valentin]

Hi team !

I'm trying to work with the inline edit mode, but I can't manage to call my controller's method when a value is changed.

My grid is diplayed correctly, and I can click on the edit button, that makes the update and cancel button appear. Cancel works fine, but Update doesn't. In fact, both buttons are doing the exact same thing : making me leave edit mode. 

.Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))

 

I hoped this line to call my "EditingInline_Update" method in my "PeriodesRecueil" controller, but it doesn't. 

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, PeriodeRecueilViewModel prVm)
        {
            return Json(new { });
        }

 

Here is my html

@model List<PeriodeRecueilViewModel>

 

@(Html.Kendo().Grid(Model)
    .Name("gridHistoPeriodesRecueil")
    .NoRecords("Aucune période de récueil n'a été trouvée.")
    .Columns(columns =>
    {
        columns.Bound(l => l.dateDebut)
            .Title("Date de début")
            .Width(300)
            .ClientTemplate("<div class=#:hasErrorDateDebut?'orangeBack':''#>" +
                                "<div class=#:isActive?'greenBack':''#>" +
                                    " #=kendo.toString(dateDebut,'dd / MM / yyyy')# " +
                                "</div>" +
                            "</div>")
            .HeaderHtmlAttributes(new { style = "text-align:center;" })
            .Filterable(filterable => filterable
                .Extra(false)
                .Messages(m => m.Info("Afficher les lignes dont la date..."))
                .Operators(operators => operators
                    .ForDate(dt => dt.Clear()
                        .IsEqualTo("est...")
                        .IsGreaterThanOrEqualTo("est ultérieure à...")
                        .IsLessThanOrEqualTo("est antérieure à...")))
            )
            .EditorTemplateName("Date");

        columns.Bound(l => l.dateFin)
            .Title("Date de fin")
            .Width(300)
            .ClientTemplate("<div class=#:hasErrorDateFin?'orangeBack':''#> " +
                                "#=kendo.toString(dateFin,'dd / MM / yyyy')# " +
                            "</div>")
            .HeaderHtmlAttributes(new { style = "text-align:center;" })
            .Filterable(filterable => filterable
                .Extra(false)
                .Messages(m => m.Info("Afficher les lignes dont la date..."))
                .Operators(operators => operators
                    .ForDate(dt => dt.Clear()
                        .IsEqualTo("est...")
                        .IsGreaterThanOrEqualTo("est ultérieure à...")
                        .IsLessThanOrEqualTo("est antérieure à...")))
            )
            .EditorTemplateName("Date");

        columns.Template(@<text></text>)
            .Title("États")
            .Width(125)
            .ClientTemplate("# if(hasErrorDateDebut || hasErrorDateFin) {# <div class='k-icon k-i-warning'></div> #} # " +
                            "# if(isActive) {# <div class='k-icon k-i-doughnut'></div> #} # " +
                            "# if(hasHappened) {# <div class='k-icon k-i-clock'></div> #} #")
            .HeaderHtmlAttributes(new { style = "text-align:center;" });

            columns.Command(command =>
            {
                command.Edit().Text(" ").IconClass("k-icon k-i-edit").Visible("hasNotHappened").UpdateText(" ").CancelText(" ");
                command.Custom("cmdAnnuler").Text(" ").Click("cmdAnnuler").IconClass("k-icon k-i-close").Visible("hasNotHappenedAndNotToday");
            })
                    .Title("Actions")
                    .Width(125)
                    .HeaderHtmlAttributes(new { style = "text-align:center" })
                    .HtmlAttributes(new { @class = "actions" });
    })
    .Events(events => events
            .DataBound("onDataBound"))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .HtmlAttributes(new { style = "text-align:center" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(l => l.idPeriodePaie))
        .Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))
        .ServerOperation(false)
        .PageSize(10))
    .Pageable()
    .Filterable()
)

 

No error in the console. Any idea of what I'm doing wrong ?

 

Thank you,

Valentin

[Valentin]

Also my ViewModel

public class PeriodeRecueilViewModel
    {
        public int idPeriodePaie { get; set; }
        public DateTime dateDebut { get; set; }
        public DateTime dateFin { get; set; }

        public bool hasErrorDateDebut { get; set; }
        public bool hasErrorDateFin { get; set; }
        public bool hasHappened
        {
            get
            {
                return (DateTime.Now > dateFin);
            }
        }
        public bool isActive
        {
            get
            {
                return (DateTime.Now >= dateDebut && DateTime.Now <= dateFin);
            }
        }
    }

 

[Tsvetomir]

Hi Valentin,

I have investigated the provided code snippets and declaration-wise, they seem to be set up correctly. Can you ensure that the row that you are editing has a value assigned to the "idPeriodePaie" property that is different from the default value for the respective data type?

Also, can you open the console of the browser, navigate to the Network tab at the top. Execute an update and check whether a request is being sent. If yes, check out the response and its status code.

Looking forward to your reply.

 

Best regards,
Tsvetomir
Progress Telerik

[Valentin]

Hi Tsvetomir, thank you for your answer.

Next to the edit command, I have a delete command ("cmdAnnuler") that get the "idPeriodePaie" property of the row to delete it. As this delete command works fine, I think that the "idPeriodePaie" property is well assigned.

I can also tell you that no request is sent when I execute an update, wether I changed values or not, or I use confirm or cancel button. 

Something I didn't mention is that when I modify a data and then click on confirm or cancel button, a little red triangle (element with k-dirty class) appears. Also, cancel button don't cancel anything and modify the data as if I confirmed it.

 

 

Best regards,

Valentin

[Valentin]

I moved my whole grid and some of the JS and controller methods that are necessary in an other of my view, and surprisingly it works. I don't understand how and why I still can't make it works on my inital view. 

The only difference between them is that the initial view is a partial one, and the one where it the controller method is triggered is a simple view. 

 

Any idea ?

[Valentin]

(Sorry, I didn't find the edit button.)

 

Ok I found out where it comes from ! I have this in the beginning of my script :

$(document).ready(function () {
    $("#gridHistoPeriodesRecueil").data("kendoGrid").bind("edit", function (e) {
        e.container.find(".k-grid-cancel").click(function () {
            $('#gridHistoPeriodesRecueil').data('kendoGrid').refresh();
        });
        e.container.find(".k-grid-update").click(function () {
            $('#gridHistoPeriodesRecueil').data('kendoGrid').refresh();
        });
    });
});

 

I needed it because to trigger the DataBound event of my grid when the user leaves the edit mode by validating or cancelling his update, but it seems to be problematic for the inline editing. 

 

So, is there a way to make inline editing works despite the grid refresh when the cancel or update button is clicked ?

OR

Is there a way to call the Databound event or any other event when the user click the update or cancel button ie edition mode is left ?

[Valentin]

Finally, I implemented the second solution, using setTimeout(function () {} when .k-grid-cancel is clicked, and events.Save to update a boolean that I use in events.Databound to know if the Databound is called after an edit or not. 

[Tsvetomir]

Hi Valentin,

Thank you for your time and efforts to keep me updated on the current case. 

Indeed, the refresh() method of the grid will force it to rebind and perform a READ request, overriding the UPDATE request that should have been initiated by the button.

However, I am not completely sure what is the purpose behind calling the refresh() method explicitly. If the user clicks on the update button, then the grid will rebind automatically. It will not rebind automatically only if the cancel button is clicked. And this is due to the fact that there has been no change, hence, no request to the server-side is required. Perhaps, you would like to persist the templates within your cells, is that correct? 

An alternative to the refresh method is actually triggering the dataBound event manually. This can happen with the help of the trigger method of the jQuery library over the instance of the grid:

https://api.jquery.com/trigger/

 

Best regards,
Tsvetomir
Progress Telerik

[Valentin]

Hi Tsvetomir,

You're right, I wanted to persist the templates within my cells. I was coloring a few td on DataBound, but clicking on edit then cancel was erasing this color, because Databound wasn't call when update is cancelled or when datas aren't edited (see this post https://www.telerik.com/forums/change-grid-cell-style-with-inline-edit).

Calling Databound event manually, as you said, was the solution. 

 

Thank you for your help !

[Tsvetomir]

Hi Valentin,

An alternative for calling the dataBound event manually would be to extract the logic inside a JavaScript function. This function has to be called inside the dataBound event handler as well as the cancel event. This is due to the fact that the dataBound triggers additional internal functions. However, there might be no particular need to trigger the event and all of its inner functions.

 

Best regards,
Tsvetomir
Progress Telerik