assigning Datasource of kendo grid in Javascript part. (Asp.net MVC-Razor Engine)

Question

I want to assign the datasource of the kendo grid in Javascript part of the View, as i want to display it in response to selecting another object from another kendogrid on the same page, so i want to pass the value of this object to the controller back and then view the grid.

I found the best way is to assign the datasource in the javascript function related to the selection part, if there is better ideas, please suggest it.

Kendo grid :

@(Html.Kendo().Grid<dynamic>()
.Name("StatusGrid")
//.HtmlAttributes(new { style="width:50%;" })
.Columns(columns =>
{
    foreach (System.Data.DataColumn c in Model.GridStatus.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");
    }
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridStatus.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    //.Read(read =>

    //  read.Action("ActivityGridDisplay", "Configuration")
    //)
))

So how to write this part in the javascript:( assigning the read and the model) ?

    .DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridStatus.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("ActivityGridDisplay", "Configuration")
    )
))

KamalF · Accepted Answer · 2015-10-12 14:10:20Z

It can be done in an easier way, just to assign or bind the read part using ajax, even you can pass some variables with that read part using javascript which i find easier than kendo:

function onChange(e) {

    var grid = $("#grid").data("kendoGrid");
    var dataRows = grid.items();
    var rowIndex = dataRows.index(grid.select());
    var selectedname = grid.dataItems()[rowIndex];
    document.getElementById("ActivityGrid").style.bottom = "0px";

    $.ajax({

        url: '/Configuration/ActivityGridDisplay',
        contentType: 'application/html charset=utf-8',
        type: 'GET',
        dataType: 'html',
        data: { 'nodeName': selectedname.Name, 'nodeType': selectedname.Type, 'nodeID': selectedname.NodeId },
        success: function (data) {
            $('#body').html(data);
        }
    })


}

and the edited part of the question

Collectives™ on Stack Overflow

assigning Datasource of kendo grid in Javascript part. (Asp.net MVC-Razor Engine)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related