Using kendoui grid with signalr

[Anıl]

Is there anyone one who used kendo ui grid with signalr in an asp.net mvc 4 application? I could not find any sample using them both. I'm trying to develop a sample as in the stock ticker sample. I need any kind of help.

Thanks in advance,

[Vladimir Iliev]

Hi Anıl,

 
Please find attached demo which demonstrates how to use the KendoUI Grid with SignalR to prevent editing given record from more than one user at given time.

Kind Regards,
Vladimir Iliev
the Telerik team

[Anıl]

Thanks for your answer Vladimir. Let me clear what I need precisely.

I have a partial view as you can see below:

<div class="tabContainer">
    @(Html.Kendo().TabStrip()
              .Name("tabstripMarketWatch")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Market Rates")
                      .Selected(true)
                      .Content(
                           @<text>
                                @RenderMarketWatchGrid()
                           </text>
                      );

                  tabstrip.Add().Text("Cubes")
                      .Content(
                            @<text>
                            <div class="weather">
                                <h2>18<span>ºC</span></h2>
                                <p>Cubes</p>
                            </div>
                            <span class="rainy"> </span>
                            </text>);
              })
        )

    @helper RenderMarketWatchGrid()
    {
        @(Html.Kendo().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.direction).ClientTemplate(
                        "# if (direction==1) {#" +
                        "<img src='" + @Url.Content("~/Images/up.png") + "' />" +
                        "#}#" +
                        "# if (direction==0) {#" +
                        "<img src='" + @Url.Content("~/Images/down.png") + "' />" +
                        "#}#"
                    ).Title("").Width(30);
                columns.Bound(p => p.symbol);
                columns.Bound(p => p.bid);
                columns.Bound(p => p.ask);
            })
            .Sortable()
            .Scrollable()
            //.DataSource(dataSource => dataSource
            //.Ajax()
            //.Read(read => read.Action("Products_Read", "MarketWatch"))
            //)
        )
    }
</div>

And a script to connect my hub:

$(function () {

    var ticker = $.connection.marketWatch;

    function init() {
        return ticker.server.getAllMarketWatchData().done(function (data) {

            alert(data.length); // I'm getting data, but can not bind to the grid.

            // $("#Grid").datasource.data(data);
        });
    }

    // Add client-side hub methods that the server will call
    $.extend(ticker.client, {
        updateMarketWatchData: function (marketWatchData) {
            alert(marketWatchData.bid);
        }
    });

    // Start the connection
    $.connection.hub.start()
        .pipe(init)
        .done(function () {

        });
});

I want to complete the init function. After alert statement how can I bind data to my grid?

Thanks,

[Anıl]

I updated my script as below and it works well now.

<script type="text/javascript">
    $(function () {

        var ticker = $.connection.marketWatch;

        function init() {
            return ticker.server.getAllMarketWatchData().done(function (data) {
                $("#marketWatchGrid").data("kendoGrid").dataSource.data(data);
            });
        }

        // Add client-side hub methods that the server will call
        $.extend(ticker.client, {
            updateMarketWatchData: function (marketWatchData) {
                alert(marketWatchData.bid);
            }
        });

        // Start the connection
        $.connection.hub.start()
            .pipe(init)
            .done(function () {

            });
    });
</script>

Thanks,

[Amitkumar]

What %  of effort we have to be taken care if we want to enable and disable this feature ?? I mean simple Kindo Grid to SignalR and vicesa versa...? Appreciate your feed back on that...

Thanks
Amit

[Vladimir Iliev]

Hi Anil,

Basically It depends entirely on you and the the exact setup that you have - I would suggest to try migrating one of the Grids to SignalR and see how much time/effort costs. 

Regards,
Vladimir Iliev
Telerik

 

 

[Amitkumar]

Do you have any sample where first you develop Kendo MVC Grid and requirement change and then you have converted in to signalR Grid  ? and same other sample having SignalR to Kendo MVC grid ?
I do appreciate if you have any sample which shows that follwoing change will help to change the grid type?

Thanks ,
Amit Mistry

[Vladimir Iliev]

Hi,

Currently we have no such example which we can provide. 

Regards,
Vladimir Iliev
Telerik

 

 

[gary davis]

Can you provide and updated locking solution for the new integrated Signlar enabled grid? thanks

[Vladimir Iliev]

Hi Gary,

I'm not sure that I understand correctly what exactly you are looking for, however you can check the following example in our CodeLibrary which demonstrates how to use the SignalR DataSource builder:

• Grid: Binding to SignalR

Regards,
Vladimir Iliev
Telerik

 

 

[gary davis]

Take a look at my request on kendoui Feedback page, second item.

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/filters/new

"Add row edit locking mechanism to SignalR enabled Real-Time Grid"

[Vladimir Iliev]

Hi Gary,

For convenience I added the "lock edited records" functionality to the previously provided SignalR CodeLibrary and attached it to the current thread. 

Regards,
Vladimir Iliev
Telerik