Extjs Grid Paging Toolbar Shows All Data and No Page Number - asp.net-mvc

I am using extjs paging toolbar on my grid. I have pagesize 5, but it shows all data(default is I guess 25)... but when I click next page, it still shows the first 25 data. and also have issue with page number where it's blank of 2...when it's suppose to say 1 of 2... Click here to see what it looks like
this is my grid...
var myPageSize = 5;
store.load({
params: {
start: 0,
limit: myPageSize
}
});
this.grid = Ext.create('Ext.grid.Panel', {
title: 'GridView App',
store: store,
loadMask: true,
columns: [{
header: 'Q1',
sortable: true,
dataIndex: 'Q1',
flex: 1,
}, {
header: 'Q2',
sortable: true,
dataIndex: 'Q2',
flex: 1,
}, {
header: 'Q3',
sortable: true,
dataIndex: 'Q3',
flex: 1,
}, {
header: 'Q4',
sortable: true,
dataIndex: 'Q4',
flex: 1,
}, {
header: 'Improvements',
flex: 1,
sortable: true,
dataIndex: 'Improvements'
}, {
header: 'Comments',
flex: 1,
sortable: true,
dataIndex: 'Comments'
}],
bbar: Ext.create('Ext.PagingToolbar', {
style: 'border:1px solid #99BBE8;',
store: store,
displayInfo: true,
preprendButtons: true,
displayMsg: 'Displaying Surveys {0} - {1} of {2}',
emptyMsg: "No Surveys to display"
}),
stripeRows: true,
trackover: true,
renderTo: Ext.getBody()
});
and this is my store
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'myData',
scope: this,
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: new Ext.data.JsonReader({
root: 'myTable',
totalProperty: 'count'
})
}
});
And my Json looks like this, please click here
UPDATE JSON RESULT
{
"count": 30,
"myTable": [
{
"Q1": "1",
"Q2": "1",
"Q3": "1",
"Q4": "1",
"Improvements": "",
"Comments": "1"
},
{
"Q1": "1",
"Q2": "2",
"Q3": "3",
"Q4": "4",
"Improvements": "Iphone5",
"Comments": "Iphone14"
},
{
"Q1": "1",
"Q2": "1",
"Q3": "3",
"Q4": "3",
"Improvements": "This is Comment1-3",
"Comments": "This is Comment2-3"
},

The issue is with the data you're returning from server. With that store configuration you must return a json formatted like this (note that records fields are different that yours)
{
"success" : true,
"count" : 2,
"myTable" :[{
"id" : 1,
"cod" :"100001"
},{
"id" : 2,
"cod" :"100001"
}]
}
Store's root parameter is where extjs expects to have the array of records, success parameter is something you can handle to display server comunication errors and totalProperty is where you tell to extjs how many total records you have fetched. (Answer based on extjs 4.x, but as i can remember with 3.x is the same)

Related

Tabulator and Select2, not showing selecte value at load

I want to use Select2 in Tabulator but triggering the selected value does not work.
Here is my code of the formatter for the table column:
{
title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
formatter: function (cell, formatterParams, onRendered) {
onRendered(function () {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function (e) {
console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
I have added a working example.
Triggering the selected value works in drop-down above the table.
Although in the table the change event is triggered it does not show the selected value in the dropdown.
Thanks,
Aad
If you are trying to make the field editable, you should be creating a custom editor not a formatter
Formatters are for displaying data to users, editors are for allowing the user to edit the data.
Built In Select Editor
Before I go to far into this example, did you know that Tabulator already comes with a Select Editor built-in to make your life even easier, in the demo in the documentation, have a look at the gender column to see it in action.
Custom Editor
When using custom editors, they come with select and cancel call backs to allow you to pass the data back into the table.
So for your example it should look something like this (this code is untested)
//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){
//create input element to hold select
var editor = document.createElement("input");
onRendered(function(){
var select_2 = $(editor);
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
});
select_2.on('change', function (e) {
success(select_2.val());
});
select_2.on('blur', function (e) {
cancel();
});
});
//add editor to cell
return editor;
}
//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},
My first question .. this was not included!
var tabledata = [{
id: 1,
name: "Oli Bob",
progress: 12,
location: "United Kingdom",
gender: "male",
rating: 1,
col: "red",
dob: "14/04/1984",
car: 1,
lucky_no: 3
},
{
id: 2,
name: "Mary May",
progress: 1,
location: "Germany",
gender: "female",
rating: 2,
col: "blue",
dob: "14/05/1982",
car: true,
lucky_no: 2
},
{
id: 3,
name: "Christine Lobowski",
progress: 42,
location: "France",
gender: "female",
rating: 0,
col: "green",
dob: "22/05/1982",
car: "true",
lucky_no: 5
},
{
id: 4,
name: "Brendon Philips",
progress: 100,
location: "USA",
gender: "male",
rating: 1,
col: "orange",
dob: "01/08/1980",
lucky_no: 7
},
{
id: 5,
name: "Margret Marmajuke",
progress: 16,
location: "Canada",
gender: "female",
rating: 5,
col: "yellow",
dob: "31/01/1999",
lucky_no: 4
},
];
var list = [{
"id": 1,
"text": "Organisatorische tekortkomingen"
}, {
"id": 2,
"text": "Mechanische gevaren"
}, {
"id": 3,
"text": "Hijs-/hefgevaren"
}, {
"id": 4,
"text": "Ergonomische tekortkomingen"
}, {
"id": 5,
"text": "Mobiliteit en gevaarlijke situaties"
}, {
"id": 6,
"text": "Elektrische gevaren"
}, {
"id": 7,
"text": "Blootstelling aan gevaarlijke stoffen"
}, {
"id": 8,
"text": "Gevaarlijke situaties - Algemeen"
}, {
"id": 9,
"text": "Blootstelling aan straling"
}, {
"id": 10,
"text": "Druk"
}, {
"id": 11,
"text": "Blootstelling aan trillingen"
}, {
"id": 12,
"text": "Blootstelling aan geluid"
}, {
"id": 13,
"text": "Fysieke gevaren (overig)"
}, {
"id": 14,
"text": "Gevaar voor/door derden (hijsen/heffen)"
}, {
"id": 15,
"text": "Hijsen/heffen en ergonomische tekortkomingen"
}, {
"id": 16,
"text": "Mobiliteit en werkplek/bestuurdersplaats"
}, {
"id": 17,
"text": "Mobiliteit en ergonomische tekortkomingen"
}, {
"id": 18,
"text": "Mobiliteit en energiebron en -overbrenging"
}, {
"id": 19,
"text": "Mobiliteit en stabiliteit"
}, {
"id": 20,
"text": "Gevaarlijke situaties door onverwachte opstart/beweging"
}, {
"id": 21,
"text": "Gevaren beheerst!",
"scope": "Algemeen"
}, {
"id": 22,
"text": "NIET beoordeeld!"
}];
$('#selectList').select2({
data: list,
minimumResultsForSearch: Infinity,
width: 'resolve',
minimumInputLength: 0,
allowClear: true,
placeholder: "Select",
});
$('#selectList').val(7).trigger('change');
//Build Tabulator
var table = new Tabulator("#example-table", {
height: "500px",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Location",
field: "location",
width: 130
},
{
title: "Progress",
field: "progress",
sorter: "number",
align: "left",
formatter: "progress",
width: 140
},
{
title: "Gender",
field: "gender",
editor: "select",
editorParams: {
"male": "Male",
"female": "Female"
}
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date"
},
{
title: "Driver",
field: "car",
align: "center",
formatter: "tickCross"
},
{
title: "Select2",
field: "lucky_no",
align: "center",
width: 300,
//editor: true,
formatter: function(cell, formatterParams, onRendered) {
onRendered(function() {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function(e) {
//console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
],
});
//load sample data into the table
table.setData(tabledata);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tabulator-tables#4.1.3/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.1.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<html>
<body>
<div>
<select class="form-control" name="selectList" id="selectList">
</select>
</div>
<br />
<div id="example-table" class="table-striped table-bordered"></div>
</body>
</html>

How to use data from Model to bind as kendo datasource

i have an empty div that i want to initialize into a kendo grid using data from Model..it should be something like the following but i am unable to load data
$("#mapsDiv").kendoGrid({
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
About.cshtml
#model List<KendoExample.Entities.ShortStudent>
<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">
</div>
My Home Controller is as follows
List<ShortStudent> students = new List<ShortStudent>();
ShortStudent student1 = new ShortStudent();
student1.birthdate = new DateTime(1999, 4, 30);
student1.classname = "1B";
student1.firstname = "Fredie";
student1.surname = "Fletcher";
student1.studentid = 1;
ShortStudent student2 = new ShortStudent();
student2.birthdate = new DateTime(2010, 5, 4);
student2.classname = "1B";
student2.firstname = "Lee";
student2.surname = "Hobbs";
student2.studentid = 2;
students.Add(student1);
students.Add(student2);
return View(students);
I have seen examples using json but not odata...
Also, there are examples to use it like
#(Html.Kendo().Scheduler<MeetingViewModel>()
.Name("scheduler")
.Editable(false)
.DataSource(ds => ds
.Custom()
.Batch(true)
.Schema(schema => schema
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From("Description");
m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From("StartTimezone");
m.Field("endTimezone", typeof(string)).From("EndTimezone");
}))
.Transport(new {
//the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string)
read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" }
})
)
)
which i am unable to understand/implement so please ignore this kind of a solution.
Currently i see a grid footer that says (1 - 2 of 4852 items) without any header or content(datarows) on my screen. What am I doing wrong?
UPDATE
var dataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: '#Url.Action("About", "Home")',
contentType: "application/json",
dataType: "json"
}
},
schema: {
model: {
fields: {
firstname: { type: "string" },
surname: { type: "string" },
birthdate: { type: "date" },
classname: { type: "string" }
}
}
},
type: "json",
serverPaging: false,
serverFiltering: true,
serverSorting: false
}
);
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read: dataSource
},
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field: "age",
}]
});
HomeController
public ActionResult About()
{
....
return View(students);
}
Now the grid with header is there but no data is present..
If i change action to json, it returns plain json on the page
public ActionResult About()
{
....
return Json(students, JsonRequestBehavior.AllowGet);
}
Have you tried adding the fields to the grid?
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
columns: [
{
field: "classname",
title: "Class Name"
},
{
field: "firstname",
title: "First name"
},
{
field: "surname",
title: "Last name"
}
],
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
I just visit demo of telerik. Try following. Hope to help, my friend. Or you can visit this link to refer more: http://demos.telerik.com/kendo-ui/grid/remote-data-binding.
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
schema: {
model: {
fields: {
studentid: { type: "number" },
birthdate : { type: "date" },
classname : { type: "string" },
firstname : { type: "date" },
surname : { type: "string" }
}
}
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
So here is what i found what should have been straight forward :)
var values = #Html.Raw(Json.Encode(#Model));
$("#MapDetails")
.kendoGrid(
{
sortable: true,
dataSource: {
data:values,
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field
: "age",
}]
});

How to unlock Kendo-UI Grid multi-column header programmatically

I have a grid with multi-column headers and there is a group column A which is locked. Here is the code:
$scope.gridOptions.columns = [
{
title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A",
columns: [{ field: "ROW_HEADER", filterable: false, width: "20px", title: " .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha rowHeaderCell" } },
{ field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
{ field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}
]
},
{
title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",
columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },
{ field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },
}]
}]
I want to unlock the group column A programmatically before printing the grid so that it appears as one grid instead of two. I have set locked=false for COLUMN1, COLUMN2 and group column A before printing but it still stays locked. Then I've set only group column A as unlocked before printing and the group still stays locked. I am using recursive method to unlock them but I but in order to show the gist of this functionality I am doing this to unlock:
thisGrid.unlockColumn("A");thisGrid.unlockColumn("ROW_HEADER");thisGrid.unlockColumn("COLUMN1");thisGrid.unlockColumn("COLUMN2");
Where thisGrid is instance of above grid. If anyone has programmatically locked/unlocked multi-column header please help. Thanks
When we are unlocking columns we have to make sure that there is atleast one column left in the grid which is still locked. So in my case I removed ROW_HEADER from the group A and put it independently as the first column, now when I try to unlock column group A it get successfully unlocked.
$scope.gridOptions.columns = [{ field: "ROW_HEADER", filterable: false, width: "20px", title: " .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha rowHeaderCell" } },
{
title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A", field: "DUMMY_FIELD"
columns: [
{ field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
{ field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}
]
},
{
title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",
columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },
{ field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },
}]
}]
Another issue is that there is no field property defined in grouped column A but we need to either have field property or column index to lock/unlock a column, so I've added field: "DUMMY_FIELD" there and then unlock it successfuly using this code: thisGrid.unlockColumn("DUMMY_FIELD")
First of all, in order for the unlockColumn method to work on the A column group you need to assign it a field property.
The problem is that the Kendo UI Grid documentation states that after initializing the grid with a locked column, at least one column should remain locked at all times.
In your case, You have two main "columns", A and B, and only A is locked.
Therefore when you try to unlock A, it stays locked.
One workaround is to add another column with a zero width and keep it locked at all times.
See a demo here.

Bind data to grid after page load MVC

I have problem here.With kendo grid i'm loading data from some action in controller.But in the last column i have link which should fire another action in same controller.When i delete this piece of code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
last column is working perfect,bit when is present this piece of code, last column is not working>please here some help, i;m new to mvc.Below is the code:
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "Status",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "jobNumber",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "Customer",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "Id"
},
#*{
field: "ShortDesc",
title: "ShortDesc"
},*#
{
field: "DateCompletition",
title: "DateCompletition"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: 'Edit'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true
});
});
</script>
It seems you want to add a command to the grid, The way to add a command as described here is as follows
var grid = $("#jobs-grid").kendoGrid({
dataSource: {
pageSize: 20,
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
},
pageable: true,
height: 550,
columns: [
{ field: "JobNumber", title: "JobNumber", width: "140px" },
{ field: "CustomerId", title: "Customer", width: "140px" },
{ field: "Id", title:"Id" },
{ field: "DateCompletition", title:"DateCompletition" },
{ command: { text: "Edit",
click: function(e){
// here you can add your code
}},
title: " ",
width: "180px" }]
}).data("kendoGrid");
You might have a look on the documentation of the kendo grid here
Hope this will help you

How to innest 2 grids properly in a same view with Gijgo Grid?

I have a problem with gijco grid in this case.
I have 2 grids in a same View (ASP.NET MVC).
If I have a pager in the first grid and not in second, the second grid doesn't load tha data... if I uncomment the pager on second grid (with the same condition) the data are loaded properly (see code).
Source
$(document).ready(function () {
datasourceiniziale = #Html.Raw(Json.Encode(Model.PSA));
dsIstruttori = #Html.Raw(Json.Encode(Model.Istruttori));
$("#hdatasource").val(JSON.stringify(#Html.Raw(Json.Encode(Model.PSA))));
grid = $("#gridPSA").grid({
pager: { enable: true, limit: 10, sizes: [10, 20, 50, 100] },
dataSource: datasourceiniziale,
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>idPSAAzienda:</b>{idPSAAzienda}<br /><b>idToken:</b>{idToken}<br /><b>Compilatore;</b>{Compilatore}<br /><ul><li><b>CompilatoreContatti:</b>{CompilatoreContatti}</li></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "Id", sortable: false, hidden: true },
{ field: "idPSAAzienda", sortable: false, hidden: true },
{ field: "idToken", sortable: false, hidden: true },
{ field: "Compilatore", sortable: false, hidden: true },
{ field: "CompilatoreContatti", sortable: false, hidden: true },
{ field: "RagioneSociale", sortable: false, title: "Ragione Sociale" },
{ field: "Comune", sortable: false, title: "Comune" }
//,
//{ width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Modifica", events: { "click": Edit } },
//{ width: 34, type: "icon", icon: "glyphicon-remove", tooltip: "Elimina", events: { "click": Delete } }
]
});
gridIstruttori = $("#gridIstruttori").grid({
dataSource: dsIstruttori,
//pager: { enable: false, limit: 10, sizes: [10, 20, 50, 100] },
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>IdUtente:</b>{IdUtente}<br /><b>UserName:</b>{UserName}<br /></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "IdUtente", sortable: false, hidden: true },
{ field: "Cognome", sortable: false},
{ field: "Nome", sortable: false },
{ field: "UserName", sortable: false, title: "Username", hidden: true }
]
});
});
Where is the error?
Exist a workaround for this situation?
Thanks.
This is a bug in version 0.6.
This is an example with workaround for this issue.
<table id="grid1"></table>
<table id="grid2"></table>
<script>
var data1 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
var data2 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
$('#grid1').grid({
dataSource: data1,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
gj.grid.methods.getRecordsForRendering = function ($grid) {
return $grid.data('records');
};
$('#grid2').grid({
dataSource: data2,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
This is already fixed in version 1.0 and above I would recommend you to upgrade to new version from http://gijgo.com

Resources