Kendo Grid, Tag Helper, SignalR bindings.

[Danny]

I would like to utilise the SignalR data binding patterns while using the grid tag helpers however I can find no supporting documentation and no obvious way of configuring. Is SignalR binding supported with the tag helpers, if so is there any documentation to assist me? If not is this in the development roadmap and what are my current workaround options?

Thanks for any help you can offer.

Danny

[Tsvetomir]

Hi Danny,

The Kendo team has implemented the CRUD operations for the Kendo UI Datasource. Since the SignalR is a rather custom data source, the implementation with tag helpers has not been introduced so far. However, there are two approaches you can undertake.

The first way is to use the HtmlHelpers to set up the grid. Due to backward compatibility, in the cshtml file, you can use both – TagHelpers and Razor syntax. You can find a live demo which shows an example of how to integrate the grid’s data source with via the SignalR object using HtmlHelpers.

https://demos.telerik.com/aspnet-core/grid/signalr

The second approach would be to mix up the TagHelpers and HtmlHelpers. You can build the grid using the TagHelpers and only for the data source use HtmlHelpers. And later on, in case TagHelpers for the SignalR are implemented, you will have to only migrate the data source of the grid.

That said, if you would like to include editing in your grid, it is not recommended to use SignalR as a data source.

Should any additional question arise, feel free to contact me back.


Kind regards,
Tsvetomir
Progress Telerik

[Keisuke]

Hi Tsvetomir,

Can you please share the example of how to do your second approach? I tried to mix up the TagHelper and HtmlHelper but didn't work.Thank you.

Keisuke

[Tsvetomir]

Hi Keisuke,

The TagHelper could be used in combination with the data source as shown below:

// dataSource
 
    var dataSource = new kendo.data.DataSource({
        // data source options
    })
 
// grid
 
<kendo-grid  name="grid" datasource-id="dataSource">
...

And the implementation of the data source would be similar to the one shown in the following live demo:

https://demos.telerik.com/kendo-ui/grid/signalr

 

Best regards,
Tsvetomir
Progress Telerik

[Keisuke]

Thank you Tsvetomir for quick reply!

This seems to me not the mix of TagHelper and HtmlHelper but TagHelper and JS?

 

[Tsvetomir]

Hi Keisuke,

The HtmlHelper declaration of the data source can be used in a similar manner. An example of such a configuration could be found below:

@(Html.Kendo().DataSource<EmployeeViewModel>()
    .Name("dataSource")
    .Custom(dataSource => dataSource
        .Type("odata")
        .Transport(t=>t.Read(r=>r.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers")))
    )
)

<kendo-grid name="grid" height="550" datasource-id="dataSource">
    <groupable enabled="true" />
    <sortable enabled="true" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <filterable enabled="true" />
    <columns>
        <column field="ContactName" title="Contact Name" width="240" />
        <column field="ContactTitle" title="Contact Title" />
        <column field="CompanyName" title="Company Name" />
        <column field="Country" title="Country" width="150" />
    </columns>
</kendo-grid>

And the SignalR implementation of the data source should be implemented accordingly.

 

Best regards,
Tsvetomir
Progress Telerik

[Keisuke]

Hello Tsvetomir,

 

Thank you so much! This helped me a lot.

 

Regards,

Keisuke