how to fill a grid without model from jquery

[Danny]

Greetings, I am wanting to fill a grid, with a json result, I do not use a model since this table is going to be loaded from data that its structure is not known, because it will be a general data window, I am trying to do the following but I can't show the content.

 

@(Html.Kendo().Grid<dynamic>()
          .Name("rgvListado")
          .HtmlAttributes(new {style = "height: 650px;"})
          .Scrollable()
          .ToolBar(t => t.Search())
          .Sortable()
          .Groupable()
          .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row))
          .DataSource(dataSource => dataSource
            .Custom()
            .Type("odata")
            .Transport(transport =>
            {
              transport.Read(read =>
                read.Url("https://demos.telerik.com/kendo-ui/service/products")
                  .DataType("jsonp")
                );
            }))
          )

 

How do I display a content either in the DataSource property or from jquery?
How do I make the columns auto-generate?

 

thank you very much in advance, nice evening

[Ivan Danchev]

Hello Danny,

The approach you are using is correct, but in the snippet .Type("odata") should be removed for it to work with "https://demos.telerik.com/kendo-ui/service/products":

@(Html.Kendo().Grid<dynamic>()
	.Name("rgvListado")
	.HtmlAttributes(new {style = "height: 650px;"})
	.Scrollable()
	.ToolBar(t => t.Search())
	.Sortable()
	.Groupable()
	.Selectable(selectable => selectable
	.Mode(GridSelectionMode.Single)
	.Type(GridSelectionType.Row))
	.DataSource(dataSource => dataSource
	.Custom()
		//.Type("odata")
		.Transport(transport =>
		{
			transport.Read(read =>
			read.Url("https://demos.telerik.com/kendo-ui/service/products")
				.DataType("jsonp")
			);
		}))
)

The Grid will make an AJAX call to the specified end point and will generate its columns automatically, based on the fields in the response.

As for loading JSON directly to the Grid, for example: you are making a separate AJAX request, you get the response and want to load the JSON data in the Grid, instead of it sending a request, this can be done the following way:

@(Html.Kendo().Grid<dynamic>()
	.Name("rgvListado")
	.HtmlAttributes(new {style = "height: 650px;"})
	.Scrollable()
	.ToolBar(t => t.Search())
	.Sortable()
	.Groupable()
	.Selectable(selectable => selectable
	.Mode(GridSelectionMode.Single)
	.Type(GridSelectionType.Row))
)

<input type="button" name="name" value="Load JSON" onclick="loadJSON()"/>

<script>
	function loadJSON() {
		var result = [
			{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18, "UnitsInStock": 39, "Discontinued": false },
			{ "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19, "UnitsInStock": 17, "Discontinued": false },
			{ "ProductID": 3, "ProductName": "Aniseed Syrup", "UnitPrice": 10, "UnitsInStock": 13, "Discontinued": false }
		];

		var ds = new kendo.data.DataSource({
			data: result
		});

		$("#rgvListado").data("kendoGrid").setDataSource(ds);
	}	
</script>

In this example the logic is executed in a button's click handler, but it could be called in an AJAX request's success callback, or at any other suitable moment, based on the exact scenario.

Regards,
Ivan Danchev
Progress Telerik

[Danny]

Hello Ivan.

perfect it worked very well, but it does not search, how would I do so that it can nuscar in the search panel.?

additionally, as I change the name of the columns, taking into account the same case of loading from a JSon, in which I do not have a base model.

 

 

[Danny]

 

Hello Ivan.

the first example works perfect, but using the second example skips the following error.

use Telerik.Kendo.mvc 2020.2.617.545

[Ivan Danchev]

Hello Danny,

The search functionality relies on columns being set, so it won't work if they are auto-generated.

As for the second example's error, you can get around it by using an empty dataSource initially:

@(Html.Kendo().DataSource<dynamic>()
	.Name("emptyDataSource")
)

@(Html.Kendo().Grid<dynamic>()
	.Name("rgvListado")
	.HtmlAttributes(new { style = "height: 650px;" })
	.Scrollable()
	.ToolBar(t => t.Search())
	.Sortable()
	.Groupable()
	.Selectable(selectable => selectable
	.Mode(GridSelectionMode.Single)
	.Type(GridSelectionType.Row))
	.DataSource("emptyDataSource")
)

<input type="button" name="name" value="Load JSON" onclick="loadJSON()" />

<script>
	function loadJSON() {
		var result = [
			{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18, "UnitsInStock": 39, "Discontinued": false },
			{ "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19, "UnitsInStock": 17, "Discontinued": false },
			{ "ProductID": 3, "ProductName": "Aniseed Syrup", "UnitPrice": 10, "UnitsInStock": 13, "Discontinued": false }
		];

		var ds = new kendo.data.DataSource({
			data: result
		});

		$("#rgvListado").data("kendoGrid").setDataSource(ds);
	}
</script>

 

Regards,
Ivan Danchev
Progress Telerik