Develop Reference

Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: string

I am new to tabulator and i wanted to know why this is isn't working my data response is like this
[{"UserId":2,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"4:37","Date":"2018-05-15T08:35:20"},
{"UserId":14,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"0:47","Date":"2018-05-15T08:36:10"},
{"UserId":8,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"1:20","Date":"2018-05-15T08:37:47"},
{"UserId":16,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:55 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:37:52"},
{"UserId":11,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:54 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:38:03"},
{"UserId":1,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:38 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:49:23"}]
(the names are all the same for purpose of privacy)
And this is my javascript
<script type="text/javascript">
var table = new Tabulator("#MyTable", {
ajaxURL: "#Url.Action("WorkingHours", "Dashboard")",
height: "292px",
layout: "fitColumns",
pagination: "local",
paginationSize: 20,
movableColumns: true,
columns: [
{ title: "UserId", field: "Id", formatter: "star", align: "center", width: 100 },
{ title: "Name", field: "name", width: 200 },
{ title: "Working Minutes", field: "progress", sorter: "number" },
{ title: "Working Hours", field: "progress" , sorter : "number" },
{ title: "Date", field: "dob", align: "center", sorter: "date" },
],
});
I checked the console and the response and it said this : Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: string
and then the data that is in the begging of the question. And yes me method returns a string but it is json.

The data you are returning is in the format needed for an Un-Paginated Table
For paginated data it needs the following format:
{
"last_page":15, //the total number of available pages (this value must be greater than 0)
"data":[ // an array of row data objects
{id:1, name:"bob", age:"23"}, //example row data object
]
}
Full documentation on how to use remote pagination can be found on the Tabulator Website

How to access JSON value in C# from a JArray?

I have have the following JSON data that i'm retrieving from a database. How do I go about getting the value of the label property?
{
elementAttributes: {
"layout": "row"
},
fieldGroup: [
{
type: "select",
key: "title",
className: "flex-100 layout-column",
templateOptions: {
label: "Title *",
multiple: false,
required: true,
disabled: false,
labelProp: "desc",
valueProp: "id",
options: [
{ desc: "Mr", id: 1 },
{ desc: "Mrs", id: 2 },
{ desc: "Ms", id: 3 },
{ desc: "Miss", id: 4 },
{ desc: "Dr", id: 5 }
],
description: ""
}
}
]
}

Just use Newtonsoft.Json, there is very good example:
http://www.newtonsoft.com/json/help/html/deserializeobject.htm
To generate class, u can use:
http://json2csharp.com/

Binding child of band Infragistics Hierarchical Data Grid to jsonResult

I have a hierarchical data grid that recieves data from a json call fine. But I have problems with the child band. I don't know if it is the code or how the data is presented within the list from the json call.
<table id="hierarchicalGrid"></table>
<script type="text/javascript">
var data = #MyData.AsRawJson()
$("#hierarchicalGrid").igHierarchicalGrid({
dataSource: data,
odata: true,
initialDataBindDepth: -1,
autoGenerateLayouts: true,
autoGenerateColumns: false,
primaryKey: "Username",
columns:
[{ key: "Username", headerText: "Username", dataType: "string" },
{key: "EmplID", headerText: "EmplID", dataType: "string" },
{key: "Comment", headerText: "Comment", dataType: "string" }],
features:
[{name: 'Paging',
type: "local",
pageSize: 50},
{ name: "Resizing"},
{ name: 'ColumnMoving' }],
columnLayouts: [
{
key: "GroupName",
primaryKey: "GroupName",
foreignKey: "GroupMembers",
autoGenerateColumns: false,
columns: [
{ key: "GroupName", headerText: "UserName", dataType: "string", width: "100px" },
{ key: "GroupDescription", headerText: "GroupDescription", dataType: "string", width: "100px" },
{ key: "GroupMembers", headerText: "GroupMembers", dataType: "string", width: "100px" }
],
features: [
{
name: "Sorting",
type: "local"
}]
}]
});
</script>
The data comes as follows
[username],[EmplID],[comment],[GroupName],[GroupDescription],[GroupMembers]
with UserName,EmplID, and Comment repeating with the same values per username while values for GroupName, and GroupDescription continue to be unique. GroupMembers has the same data as UserName. All of the data is coming from a view, which is a join from Users ([username],[EmplID],[comment]) and Groups ([GroupName],[GroupDescription],[GroupMembers]). I would like a single row for UserName,EmplID, and Comment as if it were a groupby then expanding the child band would show [GroupName] and [GroupDescription].
When the initial grid opens, I get repeating rows of [username],[EmplID],[comment] and when I try to expand the child band, it throws a errormessage displaying:
Unable to get value of the property '_injectGrid': object is null or undefined.
For what its worth, this is written on C# Razor pages using ServiceStack to Bootstrap. Any and all help is greatly appreciated.

Kendo Chart shows Incorrect results on Google Chrome. But correct result in Firefox?

I have a report which generates chart.I am showing this report on pre defined data set.
First Image is from chrome browser.Second is from firefox.Firefox shows the correct data. But chrome is showing incorrect. you can see the month order.
I went through This question in StackOverflow.
still I got the result similar to first image.
anyone came up with these sort of issue ??
setDataSource: function (jsonData) {
myDataSource = new kendo.data.DataSource({
data: jsonData,
group: [{ "field": "Series" }],
sort: [{ "field": "Series", dir: "asc" }, { "field": "SortOrder", dir: "asc" }],
schema: {
model: {
fields: {
Category: {
"type": "string"
},
Series: {
"type": "number"
},
Value: {
"type": "number"
}
}
}
}
});
},
setupChart: function (id) {
$("#chart" + id).kendoChart({
dataSource: myDataSource,
title: {
text: "#Lables.LBL_PlanningProjection"
},
legend: {
position: "top"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line"
},
series: [{
field: "Value"
}],
valueAxis: {
labels: {
format: "{0:N0}"
},
line: {
visible: true
},
majorUnit: 10000
},
categoryAxis: {
field: "Category",
labels: {
template: "#: value #",
rotation: 0
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
}

This is a problem occurs with Chrome's implementation of Array.sort;
You can fix it by sorting the data source explicitly here.
And as I can see in your code, there is a field named SortOrder here. I think in the original code that you have get this, used that field to sort the dataset explicitly.
Check your Controller or Back-End code inorder to find the SortOrder property. If not you can add that in your back-end logic to sort your dataset explicitly according to the month order.
As I can see you can't do a explicit sort here by adding following line.
sort: [{ "field": "Series", dir: "asc" }, { "field": "Category", dir: "asc" }],
Because it 'll get your data set sorted as the first image.
Apr , Aug, Dec , Feb , Jan , Jul , Jun, Mar , May, Nov , Oct, Sep
I think that's why the original code has a property called SortOrder.

Jqgrid Master Detail don't send the appropriate info

I'm searching about my problem here and find some tips, but doesn't work anyway, my problem is this:
In the jqgrid Javascrip, I send as setGridParam this: {url:'myurl/myfunction/'+ id, page:1, datatype:"json"} but, the Jgqgrid still doesn't sending to my controller the Id for make a selection of the details, It´s always null..... I tried everyting and the problem persist, please help me.
Here's my Javascript:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Master/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Descripción'],
colModel: [
{ name: 'Id', index: 'Id', width: 50 },
{ name: 'Descripcion', index: 'Descripcion', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} }
],
pager: jQuery('#pager'),
autowidth: true,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "asc",
viewrecords: true,
caption: '<b>Listado de Masters</b>',
onSelectRow: function(ids) {
if (ids != null) {
var data = $("#list").getRowData(ids);
jQuery("#DetailList").setGridParam({ url: "/Master/DetailGridData/" + data.Id, page: 1, datatype: 'json' })
.setCaption("<b>Details of Master : " + data.Descripcion+"</b>")
.trigger('reloadGrid');
}
}
}).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: false });
jQuery("#DetailList").jqGrid
({
height: 100,
datatype: "json",
colNames: ['Id', 'Descripción', 'Modelo'],
colModel: [
{ name: 'Id', index: 'Id', width: 50 },
{ name: 'Descripcion', index: 'Descripcion', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} },
{ name: 'Modelo', index: 'Modelo', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { maxlength: "100"} }
],
rowNum: 5,
rowList: [5, 10, 20],
pager: jQuery('#DetailPager'),
sortname: 'Id',
viewrecords: true,
sortorder: "desc"
}).navGrid('#DetailPager', { add: false, edit: false, del: false, search: false });
});
</script>
And here's my Controller Code:
public ActionResult GridData(string sidx, string sord, int? page, int? rows)
{
List<Master> ms = new List<Master>();
ms = MasterRepository.GetAll().ToList<Master>();
int pageIndex = Convert.ToInt32(page) - 1;
int totalrecords = ms.Count();
int totalpages = (int)Math.Ceiling((decimal)totalrecords / (decimal)rows);
var jsonData = new
{
sidx = "Id",
sord = "asc",
page = 1,
records = 25,
rows = (
from ch in ms
select new
{
id = ch.Id,
cell = new string[]
{
ch.Id.ToString(),
ch.Descripcion,
}
}).ToArray(),
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public ActionResult DetailGridData(string IdMaster, string sidx, string sord, int? page, int? rows)
{
int IdCh = Convert.ToInt32(IdMaster);
IList<Detail> det = new List<Detail>();
det = DetailRepository.GetByMaster(IdCh).ToList<Detail>();
int pageIndex = Convert.ToInt32(page) - 1;
int totalrecords = det.Count();
var jsonData = new
{
sidx = "Id",
sord = "asc",
page = 1,
records = 25,
rows = (
from bah in det
select new
{
id = bah.Id,
cell = new string[]
{
bah.Id.ToString(),
bah.Descripcion,
bah.Modelo
}
}).ToArray(),
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}
}

I think you should verify routes.MapRoute which you added to the route table. Do you really use IdMaster parameter or you should rename it to Id? It can be that you just forget to add the custom rule.
Another problem which I could see is the syntax error: you use
.navGrid(pager, {...
instead of
.navGrid('#pager', {...
(the variable pager in undefined).
Another possible problem is possible id duplicates. Be sure that ids of the detail grid has another values as the ids from the master grid. Because ids are strings you can for example use prefixes for the ids: like 'm_'+ch.Id for the master grid and 'd_'+bah.Id for details grid.
Some more remarks:
sidx and sord should not be included in the JSON response of the server. Instead of that total should be included. See here for more information.
I recommend you to use datatype: "local" instead of datatype: "json" for the details grid definition. It will prevent attempt to load data at the grid initialization.
I recommend you to use pager: '#pager' instead of pager: jQuery('#pager').
I recommend you to use key: true in the 'Id' column. In the case you will don't need to send Id values twice. If you would use additionally jsonReader: {cell:''} you can remove cell property like id property from the rows data. So you can use about the following from ch in ms select new { new string[] { ch.Id.ToString(), ch.Descripcion }}).ToList(). See here or here for example.
I recommend you to use error handling on the jqGrid at the beginning of your code. See the UPDATED part of the answer with the demo project. Displaying of error messages can save many time of your debugging. The demo could be interesting for you as a ASP.NET MVC code example which use jqGrid.

i think there is a issue in url string format. it should be like
jQuery("#DetailList").setGridParam({ url: "/Master/DetailGridData/?id=" + data.Id, page: 1, datatype: 'json' })

I have finally found the solution, thanks for the suggestion aamir and Oleg.
I had to do was the following:
First change the name Id in the MasterGrid by IdMaster, so there is no confusion with the Id of the Detail Grid, then correct the line where setGridParam is sent by the following:
jQuery("#DetailList").setGridParam({ datatype: 'json', url: "/Master/DetailGridData?IdMaster=" + data.IdMaster, page: 1 })
That was it and now everything works fine...!! ;)
Thanks again aamir and Oleg... you save my day..!!