New Offline feature

[Mike]

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

[Petur Subev]

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

 

 

[Mike]

Thanks. What about the second part of my question? The demo on determining if Online or Offline in IE, Chrome, or FireFox.

[Petur Subev]

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

 

 

[Quickstoker]

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.