This is a migrated thread and some comments may be shown as answers.

Using kendoui grid with signalr

11 Answers 464 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anıl
Top achievements
Rank 1
Anıl asked on 17 Apr 2013, 11:49 AM
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,

11 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 17 Apr 2013, 01:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anıl
Top achievements
Rank 1
answered on 17 Apr 2013, 02:02 PM
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,

0
Anıl
Top achievements
Rank 1
answered on 17 Apr 2013, 03:16 PM
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,
0
Amitkumar
Top achievements
Rank 1
answered on 31 Mar 2014, 06:36 PM
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
0
Vladimir Iliev
Telerik team
answered on 02 Apr 2014, 12:59 PM
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
 

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.

 
0
Amitkumar
Top achievements
Rank 1
answered on 02 Apr 2014, 01:05 PM
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
0
Vladimir Iliev
Telerik team
answered on 04 Apr 2014, 09:05 AM
Hi,

Currently we have no such example which we can provide. 

Regards,
Vladimir Iliev
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.

 
0
gary davis
Top achievements
Rank 1
answered on 12 May 2014, 07:03 PM
Can you provide and updated locking solution for the new integrated Signlar enabled grid? thanks
0
Vladimir Iliev
Telerik team
answered on 14 May 2014, 11:10 AM
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:

Regards,
Vladimir Iliev
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.

 
0
gary davis
Top achievements
Rank 1
answered on 14 May 2014, 11:50 AM
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"
0
Vladimir Iliev
Telerik team
answered on 16 May 2014, 10:11 AM
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
 

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.

 
Tags
Grid
Asked by
Anıl
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Anıl
Top achievements
Rank 1
Amitkumar
Top achievements
Rank 1
gary davis
Top achievements
Rank 1
Share this question
or