How can I bind data use TagHelper.

[Vincent]

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.

[Georgi]

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