Create a Monitoring view

[morteza]

I have around 200 machines which i want to create a page show their status(which updates every 5 seconds)and then when click on each of them i get more detail,but i dont have any idea in Kendo which tool can help me to achieve that?

[Tsvetina]

Hi Morteza,

It depends on the type of information that you want to show about these machines. If the main view should only list some details and current status, you can use a ListView to display each machine as a separate item. This gives you control over the layout and, depending on the template that you provide for the ListView items, may have the smallest output in terms of HTML.
You can trigger a rebind of the ListView every 5 seconds to update the status data.

Another option is to use SignalR binding, so that the widget showing the status information is updated only if a change is sent from the server. You can do this with the ListView or with a Grid if a table layout looks good to you. Here, you can see a demo showing a Grid bound to a SignalR hub:
Grid / Binding to SignalR

You opened this thread for the Chart product, so I assume you want to do a part of the visualization using a Chart. Could you provide more details about the requirement with regard to the Charts usage?

Regards,
Tsvetina
Progress Telerik

[morteza]

Thanks for the answer,i need kind of realtime monitoring dashboard,it should show me the status of the machines,and when i click on each of the i should get other information regarding that machine such as chart and table,i want to implement it in kendo,with a flexible mobile view 

[Tsvetina]

Hi Morteza,

If you need a flexible layout, then a ListView be a better option than a Grid. The output and layout of the ListView are controlled by the templates and styles provided by the developer. Here is a quick example:
https://dojo.telerik.com/OTidiSem/18

However, to give you more concrete suggestions about binding the ListView, I need to know more about your backend. How will you be passing the information about the machine statuses from the server to the client? Will you be using real-time updates through a technology like SignalR or are you returning the information on demand, meaning that the client will be making requests manually every 5 seconds? Kendo UI only takes care of the client-side visualization, so you would need to have the infrastructure to query and return the information already in place before any Kendo UI widgets are created to display this information.

If you have some endpoint already set up to return the information that you need to visualize, you can show us the structure of this information, so we can suggest a way to bind the ListView to it.

Regards,
Tsvetina
Progress Telerik

[morteza]

the updates are real time with signalR,because its updating upon a status change,and when i click on any of these machines i should get a view with more detail,like production chart and so,now your suggestion ?

 

thanks a lot in advance

[Tsvetina]

Hi Morteza,

In this case, you can create a ListView bound to SignalR for the main page. You can use a template like the one from my previous post example for producing the card-like layout. 

To see an example of SignalR binding, you can go to this Grid demo, the set up would be identical for the ListView:
Grid / Binding to SignalR

There is additional information and examples in the DataSource documentation here:
transport.signalr

Since Charts can also be bound to a DataSource, it is possible to have SignalR binding for any Charts you decide to use in the machine details view. If you have a specific design you need to implement for the Charts in the detail view, you can show a screenshot, so we can confirm if the desired look can be achieved with the Kendo UI Chart.

Regards,
Tsvetina
Progress Telerik

[morteza]

is it possible to do it using dashboard?is there any link with a live sample to edit a dashboard?

[Tsvetina]

Hi Morteza,

We do not have such an example available at present. In general, Kendo UI does not have ready-to-use dashboard templates. It consists of the smallest building blocks and it is up to you to arrange and style them to produce a dashboard layout.

One generic example of a dashboard built with Kendo UI is available to see here:
Northwind Dashboard

In the Team Efficiency view, you can see a ListView (Team Members) that renders some data. When its items are clicked, the Chart and other widgets on the right are populated with details about the selected item. You could use this as an example for tying the ListView entries with the details visualization for a given machine.

Regards,
Tsvetina
Progress Telerik