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.
Related
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
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
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.
I have posted on the Infragistics forums to no avail so I thought I would ask the community who may use their product.
I am implementing a Hierarchical Grid with IgniteUI and cannot seem to get my JsonResult to bind to the grid. The grid will render with the correct number of rows but none of the columns populated.
I have the following Grid:
$("#grid").igHierarchicalGrid({
dataSourceType: "json",
dataSource: "/Products/GetProducts/",
odata: "false",
autoGenerateColumns: "false",
primaryKey: "Id",
initialDataBindDepth: 1,
columns: [
{ headerText: "Id", key: "Id", dataType: "number" },
{ headerText: "SKU", key: "SKU", dataType: "string" },
{ headerText: "UPC", key: "UPC", dataType: "string" },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "ManufacturerId", key: "ManufacturerId", dataType: "number" },
{ headerText: "ManufacturerSKU", key: "ManufacturerSKU", dataType: "string" },
{ headerText: "Inventory", key: "Inventory", dataType: "number" },
{ headerText: "Weight", key: "Weight", dataType: "number" },
{ headerText: "Price", key: "Price", dataType: "number" },
{ headerText: "MSRP", key: "MSRP", dataType: "number" },
{ headerText: "CategoryId", key: "CategoryId", dataType: "number" },
{ headerText: "Active", key: "Active", dataType: "string" },
{ headerText: "CreateDate", key: "CreateDate", dataType: "date", format: "MM-d-yyyy, h:mm tt" },
{ headerText: "UpdateDate", key: "UpdateDate", dataType: "date", format: "MM-d-yyyy, h:mm tt" }
],
features: [
{
name: "Sorting",
type: "local"
},
{
filterExprUrlKey: 'filter',
filterLogicUrlKey: 'filterLogic',
name: "Filtering",
type: "remote",
columnSettings: [
{
columnKey: 'Id',
condition: "equals"
}
]
},
{
name: 'Paging',
type: "local",
pageSize: 10
}
],
columnLayouts: [
{
key: "VendorProducts",
primaryKey: "Id",
foreignKey: "Id",
autoGenerateColumns: "false",
responseDataKey: 'results',
columns: [
{ headerText: "Id", key: "Id", dataType: "number" },
{ headerText: "ProductId", key: "ProductId", dataType: "number" },
{ headerText: "PartnerName", key: "PartnerName", dataType: "string" },
{ headerText: "VendorSKU", key: "VendorSKU", dataType: "string" },
{ headerText: "Cost", key: "Cost", dataType: "number" },
{ headerText: "Inventory", key: "Inventory", dataType: "number" },
{ headerText: "Active", key: "Active", dataType: "number" }
],
features: [
{
name: "Sorting",
type: "local"
}]
}
]
});
The Json returned from the server is as follows
var data = [{ "Id": 1032, "SKU": "5_113990", "UPC": "10000001", "Name": "NVG7-3P", "ManufacturerId": 1015, "ManufacturerSKU": "NVGONVG73P", "Inventory": 0, "Weight": 3, "Price": 3026.6, "MSRP": 3799, "CategoryId": 1018, "Active": true, "CreateDate": "\/Date(1398794923467)\/", "UpdateDate": "\/Date(1400000587250)\/", "VendorProducts": [{ "Id": 1046, "ProductId": 1032, "PartnerName": "Direct Buy", "VendorSKU": "113990", "Cost": 0, "Inventory": 0, "Active": true }] }];
Which when plugged into dataSource will render the grid just fine, however when the grid calls out to the method:
[HttpGet]
public JsonResult GetProducts()
{
var model = Query.....
return Json(model, JsonRequestBehavior.AllowGet);
}
The following error is thrown:
**Uncaught Error: There was an error parsing the JSON data and applying the defined data schema: The input data doesn't match the schema, the following field couldn't be mapped: VendorProducts**
I have tried a number of things but cannot seem to get the grid to load on demand.
Is a current known issue of the igGrid, see: http://www.infragistics.com/community/forums/p/91530/452561.aspx
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