New Offline feature

5 posts, 0 answers
  1. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 02 Dec 2014 Link to this post

    Can someone point to some demos using this new feature using the MVC Wrappers. A complete demo would be nice. Someone mentioned during the webinar about some examples that also show how to detemine when Broswers on online and offline.  Thanks
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 04 Dec 2014 Link to this post

    Hello Mike,

    At this point we do not have MVC demo that represents the same as the that the HTML demo, but it is possible to do it through the MVC wrappers. Basically the only option that you need to enable is to specify the OfflineStorage variable.

    You can try this on the editing (incell) MVC demo like I did:



    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
        .Name("Grid")   
        .Columns(columns => {       
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(140);
            columns.Bound(p => p.UnitsInStock).Width(140);
            columns.Bound(p => p.Discontinued).Width(100);
            columns.Command(command => command.Destroy()).Width(110);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
            toolbar.Save();       
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource       
            .Ajax()        
            .Batch(true)
            .PageSize(20)
            .OfflineStorage("foo")
            .ServerOperation(false)               
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.ProductID))
            .Create("Editing_Create", "Grid")
            .Read("Editing_Read", "Grid")
            .Update("Editing_Update", "Grid")
            .Destroy("Editing_Destroy", "Grid")
        )
    )
    <script type="text/javascript">
        function error_handler(e) {   
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function() {
                            message += this + "\n";
                        });
                    }
                });       
                alert(message);
            }
        }
    </script>


    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 04 Dec 2014 in reply to Petur Subev Link to this post

    Thanks. What about the second part of my question? The demo on determining if Online or Offline in IE, Chrome, or FireFox.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 08 Dec 2014 Link to this post

    Hello Mike,

    I assume the following topic is the one that you are looking for:

    http://docs.telerik.com/kendo-ui/framework/datasource/offline#detect-browser-internet-connection

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. El Chamo
    El Chamo avatar
    6 posts
    Member since:
    Jul 2006

    Posted 29 Jul 2015 Link to this post

    Hi,

    The example is good but how can I set Offline the datasource ? How can I do the equivalent on MVC of the following javascript code to set the datasource offline explicitly?:

    dataSource.online(true);

    How can I get the datasource object from mi MVC Razor code?

    This is my code:

     

    @(Html.Kendo().Grid<User>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.DisplayName).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(c => c.UserPrincipalName).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(c => c.JobTitle);
            columns.Bound(c => c.ObjectId);
            columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
        })
        .HtmlAttributes(new { style = "height: 730px;" })
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(10))
        .DataSource(dataSource => dataSource
            .Ajax()
                    .PageSize(10)
                .ServerOperation(true)
                            .Read(read => read.Action("GetUsers", "Users"))
                            .OfflineStorage("User-Offline")
                                    .Model(i => i.Id("ObjectId"))                       
        )
    )

    Thanks.
     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready