How can I bind data use TagHelper.

2 posts, 0 answers
  1. Vincent
    Vincent avatar
    56 posts
    Member since:
    Dec 2013

    Posted 24 May 2018 Link to this post

    My code as follow:

            .DataSource(dataSource => dataSource


    How can I use Taghelper to do the same.

  2. Georgi
    Georgi avatar
    695 posts

    Posted 29 May 2018 Link to this post

    Hi Vincent,

    The Kendo TagHelpers support remote data binding and local data binding (to a local array). However, server rendering as in the Html helpers is not supported.

    A possible solution to bind the Grid on the server is to serialize the data to JSON and pass it to a JS dataSource. Then bind the Grid to the JS dataSource.


    // grid configuration
    <kendo-grid name="grid" height="550" datasource-id="dataSource">
    // js dataSource
        var data = @WebApplication3.Extensions.JavaScriptConverter.SerializeObject(Model);
        var dataSource = new{
            data: data,
    //  model
    @model IEnumerable<AuditVM>
    // JavaScriptCoverter
        public static class JavaScriptConverter
            public static HtmlString SerializeObject(object value)
                using (var stringWriter = new StringWriter())
                using (var jsonWriter = new JsonTextWriter(stringWriter))
                    var serializer = new JsonSerializer
                        // Let's use camelCasing as is common practice in JavaScript
                        ContractResolver = new CamelCasePropertyNamesContractResolver()
                    // We don't want quotes around object names
                    jsonWriter.QuoteName = false;
                    serializer.Serialize(jsonWriter, value);
                    return new HtmlString(stringWriter.ToString());

    For your convenience I am attaching a sample which demonstrates the above approach. Please examine it and let me know if it helps.

    I look forward to your reply.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top