"Realtime" data updates in grid?

2 posts, 0 answers
  1. Nicklas
    Nicklas avatar
    45 posts
    Member since:
    Oct 2012

    Posted 19 Jun 2013 Link to this post

    I have a Grid-component that is populated by a call to a service, from an action in my controller. I was wondering if it is possible to do this continuously, so that it will update the grid with real-time data? 

    Right now, my view looks like this;
    @model FleetMonitorModel
     
    <div class="span12">
        <legend>Fleet Monitor</legend>
            <div>
            @(Html.Kendo().Grid<FleetMonitorModel>()
                  .Name("Grid")
                  .DataSource(ds => ds
                      .Ajax()
                      .Read(read => read.Action("Get", "FleetMonitor"))
                  )
                  .HtmlAttributes(new { style = "height:auto;" })
                  .AutoBind(true)
                  .Columns(columns =>
                      {
                          columns.Template(p => { }).ClientTemplate(" ").Width(310);
                          columns.Template(p => { }).ClientTemplate(" ").Width(250);
                          columns.Template(p => { }).ClientTemplate(" ").Width(150);
                          columns.Template(p => { }).ClientTemplate(" ");
                          columns.Template(p => { }).ClientTemplate(" ").Width(80);
                      })
                  .ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())
                  .Pageable()
                  .Sortable())
        </div>
    </div>
    And my controller like this:
        private FleetMonitorModel Model { get; set; }
     
        ...      
     
        public ActionResult Get([DataSourceRequest] DataSourceRequest request)
        {
            UnitContract[] listOfUnitsFromService = Client.GetListOfUnits(true);
     
            Model = new FleetMonitorModel()
                        {
                            UnitDetails = GenerateUnitDetails(listOfUnitsFromService.ToList()),
                            Refresh = true
                        };
     
            return Json(Model.UnitDetails.ToDataSourceResult(request));
        }
    }

    Basically, the service will provide a steady stream of updated data, causing it to be more or less real-time.. All I want to accomplish, is to refresh the grid with my new data and update the graphical elements of my template. Current template is working fine, but data is only refreshed when page is refreshed.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 21 Jun 2013 Link to this post

    Hi Nicklas,

     
    You can call the dataSource read method to refresh the data from the server using for example the setInterval method:

    $(function () {
        var grid = $("#grid").data("kendoGrid");
                   
        setInterval(function () {
            grid.dataSource.read();
        }, 9000);
    }

    Kind Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top