Related
enter image description hereI am new with Extjs 6, and i am implementing a Grid with groupping summary features, i tried this two examples :
http://examples.sencha.com/extjs/6.5.0/examples/classic/grid/group-summary-grid.html
but doesn't work, i have this problem in my browzer console.
Have someone an idea about this errors?
enter image description here
GET localhost/Geomap2018/feature/groupingsummary.js?_dc=20170104130840 404 (Not Found)
Uncaught TypeError: c is not a constructor
this is the example which i tried: http://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.feature.GroupingSummary.html
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
}, {
student: 'Student 1',
subject: 'Science',
mark: 72
}, {
student: 'Student 2',
subject: 'Math',
mark: 96
}, {
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function (value) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});
var win = Ext.create('Ext.window.Window', {
width: 300,
height: 200,
items: [grid]
});
win.show();
Ext.view.Table.constructFeatures calls Ext.create which in turn calls the following.
feature = Ext.create('feature.' + feature.ftype, feature);
It doesn't look like the feature configuration has any typos, so Ext.create will eventually call the class manager passing the resolved class for the feature.
cls = Manager.get(name);
...
return Manager.getInstantiator(args.length)(cls, args);
From the exception, "c" is "cls" - the feature class. Therefore, I think the class manager is not finding the feature class. Make sure you've added Ext.grid.feature.GroupingSummary to the requires declaration so that the class is loaded and available.
I have a Jqgrid, In my MVC view, there is no problem in displaying the data in the grid. But I want to apply the custom paging in the grid, so i have created the method in my controller which takes two parameters (pageNumber and rowSize) and returns the data based on the these two parameters.
Now my question is that how can i send these two property of grid to the controller and get the changes reflected on the grid.
Note: i also tried to send the value of rowSize using ajax on the button click but after executing the code in the server there is no changes in the grid(as i expected).
View:
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: 'ID', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
loadonce: false,
rowList: [5, 10, 20, 50],
pager: "#jQGridDemoPager",
height: "100%",
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
url: '/Home/Records'
});
$(".ui-pg-input").click(function () {
alert(this.value);
$.ajax({
type: 'POST',
url: window.location + "Home/Records",
data: {
pageNumber: this.value
},
success: function (data) {
alert("ajax call completed");
},
error: function () {
alert("Something went Wrong");
}
});
})
</script>
Controller
public JsonResult Records(int pageNumber=3, int rowSize = 5)
{
// code for custom paging
return json;
}
JSON Returned from Server:
[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary":"1000000 ","Address":"South Africa","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":"Duck","LastSSN":"345","Department":"Actor","Age":"98 ","Salary":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN":"111","Department":"Batsman","Age":"28 ","Salary":"1000000 ","Address":"India","MaritalStatus":"Unknown ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName":"MS","LastName":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4}],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40 ","Salary":"90000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary":false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","Salary":"8000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6}],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer","LastName":"Khan","LastSSN":"115","Department":"Bowler","Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":10}],"IsTemporary":false}}]
I think there are misunderstanding how jqGrid works. If you don't use loadonce: true option jqGrid send automatically request to url with additional parameters which specify the page size and the requested page. So you don't need to many any $.ajax and you don't need to bind $(".ui-pg-input").click. Default names of 1-based "page number" parameter is page and the name of "row size" parameter is rows. So you need just rename parameters of Records actions.
Alternatively you can use prmNames option of jqGrid (see the documentation) to inform jqGrid to use other parameter names as default page and rows. For example you can add the option
prmNames: {page: "pageNumber", rows: "rowSize"}
to solve your problem.
I have to obtain the date value from the database which is given in the format
YYYY-MM-DD and display in the jqxgrid in the same format,,,
I have used the following code:
text : ‘Start Date’, id: ‘startDatePopUp’,datafield : ‘startDate’, columntype: ‘datetimeinput’, cellsformat: ‘YYYY-MM-DD’, align : ‘center’, width : 150, cellsalign : ‘center’,
but it is being displayed in the grid as YYYY-MM-DD 00:00:00.0
how will I display the date value in the format YYYY-MM-DD in the jqxgrid??
Thanks & Regards,
ssp
In the source try adding the following attributes.
{ name: 'LastLoginDate', type: 'date', format: 'd' },
Then in the Cell definition.
{ text: 'Last Activity', datafield: 'LastLoginDate', cellsformat: 'yyyyy-MM-dd' },
Try adding the 'format' in the source like
var source={
datafield:[
{ name: 'startDate',type:'date',format:'yyyy/MM/dd' }
]
}
here's a working sample for you .....
https://jsfiddle.net/Vinod1/by6duep4/10/
and this is the specific part of the sample code.
{
text: 'Date',
datafield: 'date',
filtertype: 'date',
cellsalign: 'right',
width: '100',
cellsformat: 'yyyy/MM/dd' }
I have problem while rendering expanded column text while using jQuery jqgrid's treegrid type. Here's my treegrid definition and the response from server, I'll be happy if someone can help me?
Thanks in advance.
Javascript
menuGrid.jqGrid({
url:'kullanici/loadMenu.ajax',
//enable TreeGrid
treeGrid: true,
//set TreeGrid model
treeGridModel: 'adjacency', //'nested', //'adjacency',
//set expand column
ExpandColumn: 'Text',
width: 550,
datatype: 'json',
viewrecords: true,
loadonce: true,
colNames: ['ID', 'Text'],
colModel: [
{ name: 'id', index: 'id', width: 20, align: 'left', editable: false, key: true, sorttype:'int', hidden: false },
{ name: 'Text', index: 'menuName', width: 120, sortable: true, align: 'left' }
],
jsonReader: {
repeatitems : false,
id: 'id'
},
sortname: 'id',
sortorder: 'asc',
height: 200,
sortable: true,
enabletooltips: true,
caption: 'Menü Ağacı'
});
menuGrid.jqGrid('navGrid','#paddtree');
The JSON response from server
{"rows":[{"expanded":true,"id":1,"isLeaf":false,"level":0,"loaded":true,"text":"Kullanici Islemleri"},{"expanded":false,"id":2,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Ekle"},{"expanded":false,"id":3,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Duzenle"},{"expanded":false,"id":4,"isLeaf":true,"level":1,"loaded":true,"parent":1,"text":"Kullanici Sil"},{"expanded":true,"id":5,"isLeaf":false,"level":0,"loaded":true,"text":"Fatura ??lemleri"},{"expanded":false,"id":6,"isLeaf":true,"level":1,"loaded":true,"parent":5,"text":"Fatura Goruntule"}],"records":6,"success":true}
Your Json response must be as follows :
{"rows":[
{
"id":1,
"text":"Kullanici Islemleri"
"level":0,
"isLeaf":false,
"parent" : "null" //If the row is at 0-lvl
"expanded":true,
"loaded":true,
},
],"records":6,"success":true}
You have to respect the order of the grid cols.
First, your data cols, then, level,isLeaf, parent,expanded. I'm not sure about the loaded field, try with and without.
OK,I have found the solution, colNames, colModel and ExpandColumn configs should match(case-sensitive). As I said above the order of config isn't important.
I have an asp.net MVC3 app with various bits of form data and a jqGrid.
When I edit a row in the jqGrid I need to post the grid data as well as some of the form pieces to the editUrl controller.
I can post the jqGrid edited data to my controller through the editUrl just fine.
Is there a way to do this?
Im not sure how to send the other form elements and how to receive them in my controller.
Any help will be greatly appreciated.
Below is my jqGrid:
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function () { return $("#ProgramID option:selected").val(); },
buildID: function () { return $('#Builds option:selected').val(); }
},
// Specify the column names
colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{ name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
{ name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("_Assemblies")',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + "</select>";
}
}
},
{ name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' },
{ name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
{ name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],
// Grid total width and height and formatting
//width: 650,
//height: 220,
altrows: true,
// Paging
//toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template",
// grid command functionality
editurl: '#Url.Action("_AjaxUpdate")',
onSelectRow: function (AssemblyID) {
if (AssemblyID && AssemblyID !== lastsel) {
$('#jqTable').jqGrid('restoreRow', lastsel);
$("#jqTable").jqGrid('editRow', AssemblyID, true);
lastsel = AssemblyID;
}
}
}).navGrid("#jqTablePager",
{ refresh: false, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
You can customize what is being sent to the server using onclickSubmit option:
.navGrid("#jqTablePager",
{ refresh: false, add: false, edit: false, del: false },
{ // settings for edit
onclickSubmit: function(params, postdata)
{
postdata.extraParam = 'value'
}
},
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
The controller will receive a JSON object containing all edited properties + extraParam. It is up to you how you handle this on the server side.
I see you use already programID and buildID properties defined as functions. The functions will be called during every request to get the data for the grid. In the same way you can use inlineData or extraparam parameter of the editRow which you call explicitly inside of your onSelectRow callback.
Try to call the demo which has the following jqGrid options:
inlineData: {
myParam: function () {
alert("inlineData is calling!!!");
return "OK";
}
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
$(this).jqGrid('restoreRow', lastSel);
$(this).jqGrid('editRow', id, true, null, null, null, {
myNextParam: function () {
alert("extraparam of 'editRow' is calling!!!");
return "Fine";
}
});
lastSel = id;
}
}
You will see two alerts if you would save the data of the editing row. In my demo I used editurl: 'myDummyUrl' which has no code on the server side and you will see an error at the end, but if you examine the HTTP traffic (with respect of Fiddler or Firebug) you will see that the following additional parameters will be send to the editurl:
myParam=OK&myNextParam=Fine
I think it is what you need.
inlineData:{}
is working fine for getting work before goes to controller while editing.
But in case of delete how to get event like before to pass control to controller to make json , after click on delete.