Develop Reference

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.

Default value for combobox in kendo grid

I added combobox to the Kendo Grid, as in the following example:
http://demos.telerik.com/kendo-ui/grid/editing-custom
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
CityId: {
editable: true,
type: "number",
validation: { required: true }
}, ...
columns: [{
field: "CityId",
title: "City",
editor: cityDropDownEditor,
template: "#=City.Name#",
width: 200,
} ...
function cityDropDownEditor(container, options) {
$('<input required data-text-field="CityName" data-value-field="CityId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: true,
dataTextField: "CityName",
dataValueField: "CityId",
filter: "contains",
index: 1,
autocomplete: true,
dataSource: {
transport: {
read:
{
url: "/Contact/GetCities",
type: "POST",
dataType: "json"
}
}
}});
}
And if I clicked to Add button, combobox is shown prefilled value 0. If i remove line type: "number" in schema - combobox shows prefilled value with CityName, index of which is set in the combobox initialization
.kendoComboBox({
index: 1...
But when I click Submit, this value isn't got to the back-end and I see exception. How I can add correct default value for combobox?

First as note you have dataTextField: "CityName", dataValueField: "CityId" twice initiated, and think you've missed something on your example which is this part in the schema
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 3, CategoryName: "Confections"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
On the category field they set the default value to { CategoryID: 1, CategoryName: "Beverages"} , now i changed it to { CategoryID: 3, CategoryName: "Confections"}. It is working good here
DEMO

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.

Extjs Paging Toolbar in Grid does not work

I have searched high and low for this problem... and I found a lot of people have the same problem but none have a definite solution...
Basically I have a grid on extjs... it gets data from sqldb. It loads fine using json. "But"... when trying to implement paging, this is where it gets messy...
pagesize is set to 5... which means first page should only show 5 records, but my grid shows the entire records
Even though the "next" button exists, it does not work technically because the entire record is already there on the first page
I set page.loadPage(2)... and the message says "Displaying Second Page", but it's actually displaying the entire records
The page number in "Page _ of 6" is always blank. see below image...
Below is my store...
var store = Ext.create('Ext.data.Store', {
storeId: 'myData',
pageSize: 5,
autoLoad: true,
method: "POST",
remoteSort: true,
fields: [
{ name: 'Q1', type: 'int' },
{ name: 'Q2', type: 'int' },
{ name: 'Q3', type: 'int' },
{ name: 'Q4', type: 'int' },
{ name: 'Q5', type: 'int' },
{ name: 'Improvements', type: 'string' },
{ name: 'Comments', type: 'string' }
],
sorters: [
{
property: 'Q1',
direct: 'ASC'
}
],
proxy: {
type: 'ajax',
url: 'GridView/writeRecord',
reader: {
type: 'json',
totalProperty: "count",
root: "myTable"
}
},
autoLoad: { params: { start: 0, limit: 5} }
});
this.grid = Ext.create('Ext.grid.Panel', {
title: ' ',
trackMouseOver: true,
disableSelection: true,
autoHeight: true,
store: store,
loadMask: true,
height: 500,
width: 800,
renderTo: Ext.getBody(),
columns: [
{ header: 'Q1',
sortable: true, dataIndex: 'Q1'
},
{ header: 'Q2',
sortable: true, dataIndex: 'Q2'
},
{ header: 'Q3',
sortable: true, dataIndex: 'Q3'
},
{ header: 'Q4',
sortable: true, dataIndex: 'Q4'
},
{ header: 'Improvements', flex: 1,
sortable: true, dataIndex: 'Improvements'
},
{ header: 'Comments', flex: 1,
sortable: true, dataIndex: 'Comments'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
preprendButtons: true,
displayMsg: 'Displaying Surveys {0} - {1} of {2}',
emptyMsg: "No Surveys to display"
})
});
and this is my JSON... it has actually 30 records but I trimmed it down...
{
"count": 30,
"myTable": [
{
"Q1": "1",
"Q2": "1",
"Q3": "1",
"Q4": "1",
"Improvements": "",
"Comments": "1"
},
{
"Q1": "3",
"Q2": "2",
"Q3": "2",
"Q4": "2",
"Improvements": "This is A very long comment. What do you think?",
"Comments": "Agreed"
},
{
"Q1": "4",
"Q2": "2",
"Q3": "4",
"Q4": "3",
"Improvements": "Hello2",
"Comments": "Hello2"
},
{
"Q1": "3",
"Q2": "2",
"Q3": "2",
"Q4": "1",
"Improvements": "Hello4",
"Comments": "Hello4"
}
]
}
Also if it helps this is how I get my Json
string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM ITable";
conn.Open();
SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);
SqlCommand comd = new SqlCommand(sqlquery, conn);
DataSet myData = new DataSet();
cmd.Fill(myData, "myTable");
comd.CommandText = "SELECT COUNT(*) FROM ITable";
Int32 count = (Int32)comd.ExecuteScalar();
comd.ExecuteNonQuery();
conn.Close();
var results = (new
{
TotalNumber = count,
myTable = myData
});
return JsonConvert.SerializeObject(new { count=count, myTable = myData.Tables[0] }, Formatting.Indented,
new JsonSerializerSettings
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
});
I know my Json is right... and it reads 30 records because is says "Displaying _ of 30"... I just have no clue what I am doing wrong... It cannot be a browser issue... why is it throwing up all in one page? anybody?

When using the paging toolbar, the server is supposed to page the data for you. You don't feed it all of the records at once.
The paging toolbar will send requests asking for each page, and the server is supposed to return just the records for that page.
If you want to page with in memory data (fetching them all at once, you have to implement your own, or use one of the extensions.
See the section titled "Paging with Local Data" at http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging
Therefore, to use it as intended, you have to change your server code to account for the start and limit HTTP parameters