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

15 posts, 0 answers
  1. Jonas
    Jonas avatar
    33 posts
    Member since:
    Sep 2009

    Posted 23 Jan 2012 Link to this post

    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
  2. Andrew
    Andrew avatar
    29 posts
    Member since:
    Sep 2010

    Posted 23 Jan 2012 Link to this post

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

    ... 
    navigatable: true,
    ...
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 25 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 27 Jun 2013 Link to this post

    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.
  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 28 Jun 2013 Link to this post

    Hi Joshua,

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

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 28 Jun 2013 Link to this post

    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/
  8. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 01 Jul 2013 Link to this post

    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.
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 02 Jul 2013 Link to this post

    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.
  11. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 03 Jul 2013 Link to this post

    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."
  13. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 05 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 05 Jul 2013 Link to this post

    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?
  15. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 09 Jul 2013 Link to this post

    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);
Back to Top
Kendo UI is VS 2017 Ready