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

KamalF

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Setting Kendo UI Grid DataSource Read property with Handler in ASP.NET Core MVC with Razor Pages

Kendo Grid MVC - DataSource Error

Kendo grid css in asp.net mvc

JQuery Grid for ASP.NET MVC Razor

access model in javascript asp .net mvc razor

ASP.NET MVC mix Razor and JavaScript

ASP.NET MVC Kendo Grid Add New using Popup

filter data in Kendo grid by connect to a method asp.net MVC

Formatting date column in Kendo ASP.NET MVC Grid

Reference to Kendo UI (ASP.NET MVC) dropdown on a grid

Custom Paging for ASP.Net MVC Kendo Grid

data changes using Kendo Grid on ASP.NET MVC

Populating ASP.NET MVC Kendo Grid Via Ajax Call

Filtering kendo grid asp.net mvc by linq

ASP.NET MVC 4 Kendo Grid - ForeignKeyAttribute on property is not valid

Asp.net MVC deserialize Kendo Grid data in the controller

ASP MVC Net using Check list kendo Grid

Data does not display in the Kendo MVC Grid ASP.NET Core

How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC

Kendo UI MVC Grid - DataSource Interfering With Column Template

kendo mvc grid with a custom datasource that has null id rows

Setting number value in JavaScript via Razor in ASP.NET MVC

Use JavaScript Variable in Asp.net MVC Razor syntax

Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

How to render ModelMetadata object using Html.Displar in Razor-engine in ASP.NET MVC app?

How to stop ASP.NET Core 2 MVC's razor engine using HTML unicode escaping?

ASP.Net Async MVC controller function causes Razor View Engine error

Kendo UI Grid MVC dataSource.at(0) undefined with AutoBind = false and after dataSource.Read()

updating a cell value based on another cell value in kendo grid asp.net mvc