Forcing Save Method

[Desenvolvimento Ingresso]

Good morning,
I have a problem could they help me?
I'm using Kendo Grid, one of the columns I am using an editor that calls a function that opens a popup, that popup'm working with image, I like it when I closed this popup and then clicked the save button from the toolbar kendo he called the method of update, even though I have not changed the data rows of the grid, but only the popup, which does not happen because as I have not changed any grid line he does not call the event. But only update the data of the row that was clicked.

What would help me a lot is to open a popup after clicking on a line, check if he uploaded a picture (I do this via jquery) if so, pretending that there was a change to that line without necessarily have occurred to that when you click save, it calls the update method of the object and send only the line was altered ie the image.

[Alexander Valchev]

Hi Marcel,

If I understood you correctly, you would like to force the update Ajax request to trigger even though the user did not made any changes to it.
In such case you should set the dirty flag of the DataItem (Model) to true and call the sync method of the DataSource.

//obtain the dataItem

dataItem.dirty = true;
dataSource.sync();

Regards,
Alexander Valchev
Telerik

[Desenvolvimento Ingresso]

Hello, good evening 

Your solution solved my previous thanks problem. 

Now, I came to another problem: 

I have a Group entity, which will be displayed in a form where it can be edited. 

Below, have a kendo grid where the local group that appears in the case 1 to N. 

The problem is this, I need to have a single "Save" button to update the Group (Form) and Local (Grid) that group at the same time. 

Could you help me this time? 

Thank you

[Alexander Valchev]

Hello Marcel,

I am afraid that I cannot understand the new scenario description. Could you please provide a small jsBin sample and/or screen shot of the UI which illustrates it?
Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Desenvolvimento Ingresso]

Hello, good day 

Thanks for responding. 

I'm still drawing this screen, but to summarize what I want: 

In a screen will have a form and kendo grid, wanted to have a single save button to save them both at once, however if error happen in one of two not save any. 

Get it?

[Alexander Valchev]

Hi Marcel,

To achieve that I suggest you to create a custom button which will call the saveChanges method of the Grid and hook up to the saveChanghes event to check if the form is filled with valid data. For example:

function saveChanges(e) {
    if(!$("#form").data("kendoValidator").validate()) {
        //the form is not valid
        e.preventDefault(); //stop the Grid data synchronization
    } else {
        //the form is valid
        //submit the form data via Ajax request
        //the grid will sync its data automatically
    }
}

If the Grid validation fails the saveChanges event will not trigger at all. The user will see Grid's validation warning messages.
If the Grid validation passes but form is not valid, the Grid's synchronization will be prevented. The user will see form validation warning messages.

I hope this approach will fit in your scenario.

Regards,
Alexander Valchev
Telerik

[Desenvolvimento Ingresso]

I guess I did not express myself correctly, the problem is that I do not know how to pass data from the form and the data kendo grid for the same method, ie when you click the save button, call the update method of the form with the data and data grid.

[Alexander Valchev]

Hello Marcel,

In terms of Kendo UI, you can pass the form's data through the Grid's update transport method. In order to do that you should add the form's data to the original update data in the parameterMap function. The parameterMap function is executed every time a transport Ajax request is about to start.

Regards,
Alexander Valchev
Telerik

[Vishnu]

Hi Alexander, 

Need some help with the same issue. I have an inline editing defined and it fires only if there is change in the input value once edit is clicked. According to your reply up here, I tried to get the dataItem like below and forced to trigger the update event using 'dirty' but getting a javascript runtime error - Unable to set property 'dirty' of undefined or null reference. 

 var dataItem = $("#grid").data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));

        dataItem.dirty = true;
        grid.dataSource.sync();

[Stefan]

Hello, Vishnu,

The provided code should be executed when the update button is clicked as this will allow locating the correct dataItem associated with the row.

I made an example demonstrating this:

http://dojo.telerik.com/aZotoK

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[n/a]

The example http://dojo.telerik.com/aZotoK dont works anymore since about 2023. Please help.

 

[Patrick | Technical Support Engineer, Senior]

Hi Sven, 

Sharing the approach sent to you for the community:

In order to update the function used in the edit event, change the selector to .k-grid-save-command:

JavaScript

            edit: function(e) {
              var grid = this;
              $(e.container).find('.k-grid-save-command').click(function(e){
                var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
                dataItem.dirty = true;
                grid.dataSource.sync();
              })
            },

Here's a Progress Kendo UI Dojo which shows the approach above using version 2024.3.806.