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:

    @(Html.Kendo().Grid<Models.Ssdictcategory>(Model.listDictCategory)
            .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false))
            .Name("DgDict"))

     

    How can I use Taghelper to do the same.

  2.
  3. Georgi
    Admin
    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.

    e.g.

    // grid configuration
      
    <kendo-grid name="grid" height="550" datasource-id="dataSource">
    ...
      
    // js dataSource
      
        var data = @WebApplication3.Extensions.JavaScriptConverter.SerializeObject(Model);
              
        var dataSource = new kendo.data.DataSource({
            data: data,
            pageSize:5
        })
      
    //  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.

    Regards,
    Georgi
    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