Auto save on destroy, and keyboard shortcut for next column + save

[Jonas]

Hi,
can I make the grid auto save after user clicks and confirms a destroy?

And I wonder if there are keyboard shortcuts for going to next column (tab doesnt work for me) and also for save? 

Thanks

[Andrew]

For the tabbing behavior, enable navigation for your grid using:

... 
navigatable: true,
...

[Rosen]

Hi Jonas,

I'm afraid that in current version the autoSync functionality is not available out-of-the-box. However, we have addressed this limitation and it will be available in next official release.

All the best,
Rosen
the Telerik team

[Joshua]

Is there an example of this? I cannot seem to find a sample of autosave anywhere. Right now I am doing some crazy stuff to detect and sync the grid.

[Rosen]

Hi Joshua,

In order to automatically sync the DataSource on every data change you should set its autoSync option to true.

Regards,
Rosen
Telerik

[Joshua]

Thanks for responding. I found the option after combing through the API documentation. I missed it the first time through.

Anyway, I am now having a problem, where the cell that is being edited loses focus after the autosync fires. I have created a fiddle to demonstrate this:

Edit a cell other than the upper left most cell and you will see focus change back to the upper left most cell.
http://jsfiddle.net/grippstick/zUbmY/

[Joshua]

I was just informed that this is a deficiency with the grid. Using AutoSync with Navigation will cause your cell to lose focus.

I know this is cross posting, but perhaps a user has come across this problem and can help me.

fiddle example: http://jsfiddle.net/grippstick/zUbmY/
---
That is a huge deficiency. If you look at the use cases for autosync, I would think the major one would be to save changes as a user navigates through a grid.

Given that we have to work with what the product currently offers, do you have any suggestion on how I can use the toolset to accomplish the needed functionality?

If I leave out line 29 in the fiddle: options.success(response);, then it does not cause the grid to lose focus, but it also does not cause the dirty indicator to go away.

If you can tell me how to make the dirty indicator go away without losing focus, then it should meet my needs.

[Rosen]

Hello Joshua,

As you have mentioned, this is not supported out-of-the-box. However, you may handle it yourself by manually focusing the cell after the grid is recreated. Here is modified version of the test page, which illustrates a possible approach. You could use it as a base of a more involved implementation which to better suits your needs.

Regards,
Rosen
Telerik

[Joshua]

The updated sample has the same result as my example with no code.

When you tab away or hit enter, it just goes back to the upper left hand cell.

I would think it would refocus on the cell that had been edited.

I think the bigger problem here is that you cannot use navigation with autosync.

Can you tell me how to make the dirty indicator go away, then i can just not call  options.success(response); when my ajax succeeds?

Perhaps you can tell me how to focus on a specific cell. Moving focus back to the first cell of a row, would be unusable.

[Rosen]

Joshua,

Did you try the second grid to which the extra code is attached. Here is a short video which captures example's local behavior. Please take a look, maybe, I'm missing something obvious.

Regards,
Rosen
Telerik

[Joshua]

I didn't try the second grid. Now that I did, that is a start, it still moves it back to the first cell in the row instead of leaving it in the cell that was being edited.

"Perhaps you can tell me how to focus on a specific cell. Moving focus back to the first cell of a row, would be unusable."

[Rosen]

Hi Joshua,

You can change which cell is selected by modifying the following selector to select the appropriate one:

grid.current(grid.items().filter("[data-uid=" + model.uid + "]").find("td:first")); <-- pick a cell to focus

Regards,
Rosen
Telerik

[Joshua]

So I can just use cellIndex and :nth-child(n) to select the row.

Is .current an undocumented feature? Will I be safe to use it?

[Rosen]

Hello Joshua,

Indeed, you could get the cell index of the edited cell from the save event. And then use this index to select and focus the cell from within the Grid's dataBound event.

Regards,
Rosen
Telerik

[Joshua]

It works close enough :/  There is still potentially a problem when a user is entering data really quickly or there is a delay in the save function.

In case someone runs across this thread, here is the fiddle with the sorta working code:
http://jsfiddle.net/grippstick/zUbmY/75/

here is the actual code:

<div id='container'>
    <div>These Grids Share Data so changes in one should reflect the other!</div>
    <br/>
    <div data-role='grid' data-scrollable='false' data-sortable='true' data-pageable='{buttonCount:5}' data-editable='true' data-navigatable='true' data-bind='source:dsGrid'></div>
    <br/>
    <div data-role='grid' data-scrollable='false' data-sortable='true' data-pageable='{buttonCount:5}' data-editable='true' data-navigatable='true' data-bind='source:dsGrid,events:{dataBound:gridBound,save:saveFocus}'></div>
</div>

var data = [{
    id: 1,
    name: 'test',
    orderdate: new Date(),
    field2: 2,
    field3: 3,
    field4: 4
}, {
    id: 2,
    name: 'test2',
    orderdate: new Date(),
    field2: 2,
    field3: 3,
    field4: 4
}];

var vm = new kendo.observable({
    saveFocus: function (e) {
        vm.focusID = e.model.uid;

        var td = e.container;
        vm.focusCellIndex = td[0].cellIndex;
    },
    gridBound: function (e) {
        var grid = e.sender;
        if (vm.focusID) {
            var row = grid.items().filter("tr[data-uid=" + vm.focusID + "]");
            var cell = row.find("td:eq(" + vm.focusCellIndex + ")");
            console.warn(cell);
            grid.current(cell);
        }
        vm.focusID = null;
    },
    dsGrid: new kendo.data.DataSource({
        transport: {
            read: function (options) {
                console.warn('read');
                //we are just sending back our data
                options.success(data);
            },
            update: function (options) {
                console.warn('update');
                //send this to our web service.
                //I would be ok using the normal url based transport here,
                //but cannot get that to work when read is a function
                $.ajax({
                    url: "/echo/json/",
                    data: options.data,
                    type: "POST",
                    success: function (response) {
                        //simulate a delay
                        setTimeout(function () {
                            options.success(response);
                        }, 1000);
                    }
                });
            }
        },
        schema: {
            model: {
                id: 'id'
            }
        },
        change: function (e) {
            console.warn(e);
            if (e.action === 'itemchange') {
                console.warn('sync');
                this.sync();
            }
        },
        autoSync: false,
        pageSize: 10 //needed to add to having paging show appropriately
    })
});

kendo.bind($('#container'), vm);