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.
Related
I use free-jqGrid v4.14.0. I have a table, when I click on a row in this table, I execute a stored procedure and in another table I enter the result.
The problem is that when you first click on a row in the table, the data does not load into the second table, and when the second button is clicked, the data appears, and this problem occurs only once, the following clicks immediately load the data into the second table.
When you first click in the browser console, you can see that the url stored procedure is loading: '# Url.Action ("GetAccident")',
$(document).ready(function () {
$("#jqg").jqGrid({
url: '#Url.Action("GetAccident")',
datatype: "json",
colNames: ['id_Accident', .......],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, sortable: false },
.....................
.....................
],
guiStyle: "bootstrap",
iconSet: "fontAwesome",
pager: "#pager",
rowList: [10, 20, 30],
rowNum: 10,
loadonce: false,
onSelectRow:
function (idRow) {
celValue = $('#jqg').jqGrid('getCell', idRow, 'id_Accident');
jQuery("#jqg1").jqGrid('setGridParam', { url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + celValue, page: 1 }).trigger('reloadGrid');
}
});
jQuery("#jqg1").jqGrid({
url: '#Url.Action("GetOrganizationCulpritByIdAccident")?celValue=' + 0,
datatype: "json",
colNames: ['id_Accident', 'Name Organization'],
colModel: [
{ name: 'id_Accident', index: 'id_Accident', autowidth: true, stype: 'text', sortable: true },
{ name: 'Name', index: 'Name', autowidth: true, sortable: true }
],
guiStyle: "bootstrap",
pager: "#pager1",
rowList: [10, 20, 30],
rowNum: 10,
});
I can't reproduce the problem. You can examine Network traffic of the demo https://jsfiddle.net/OlegKi/ed0yLkce/1/. I uses
datatype: "local"
in the second grid as initial option to prevent unneeded Ajax requests. I use additionally idPrefix with different values in both grids to be sure that one will have no conflicts with duplicates of ids. You will see in Network tab of Developer Tools that the request to for example https://fiddle.jshell.net/echo/json?celValue=test2 will be send it the second row is selected.
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'm trying to create a dependent dropdown box. 'element' is dependent on 'grouping'.
My ajaxSelectOptions function seems to work, as 'temp' is passed, but then it isn't used by 'populate_element'. How can I use the 'temp' as my parameter :id?
My grid:
jQuery(document).ready(function(){
var lastsel;
var grid = jQuery("#list").jqGrid({
url:'codes/get_data.xml',
datatype: 'xml',
mtype: 'GET',
colNames:['ID', 'Version', 'Grouping', 'Element', 'Name'],
colModel:[
{name: 'id', index: 'id', hidden: true, editable: false },
{name: 'version', index: 'version',editable: true, editrules:{number:true}, cellEdit: true, search:true },
{name: 'grouping', index: 'grouping', editable: true, edittype: 'select', editoptions: {dataUrl: 'codes/populate_grouping.html'} },
{name: 'element', index: 'element', editable: true, edittype: 'select' }
],
pager: '#pager',
rowNum:200,
rowList:[50,100,200],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: 500,
scrollrows: true,
rownumbers: false,
caption: 'GL Codes',
editurl: 'codes/post_data.xml',
onSelectRow: function(id){
$("#list").setColProp('element', {editoptions: { dataUrl: 'codes/populate_element.html' }});
if(id && id!==lastsel){
$('#list').restoreRow(lastsel);
lastsel=id;
}
$('#list').editRow(id,true);
},
ajaxSelectOptions: {
data: {
temp: function(temp){
return grid.jqGrid('getGridParam', 'selrow')
}
}
}
});
Here is my error message:
Started GET "/codes/populate_element.html?temp=4" for 127.0.0.1 at 2012-09-27 17:18:33 +1200
Processing by CodesController#populate_element as HTML
Parameters: {"temp"=>"4"}
Completed 500 Internal Server Error in 1ms
ActiveRecord::RecordNotFound (Couldn't find Code without an ID):
app/controllers/codes_controller.rb:73:in `populate_element'
Update
I established that it was actually just a ruby syntax error in calling the param, rather than a jqGrid problem. For reference, I ended up calling it like so ... #code = Code.where(["id = ?",params[:temp]]).first
I think the problem is that you use wrong ids for the rows of grid. The error exist during filling of the grid. The most easy way to fix the problem will be to add key: true property to the definition of the 'id' column in colModel. In the case the value from the column id will be used as the rowid: the value of id attribute of rows (<tr>) of the grid.
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.
I have a jqGrid in MVC setup as:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['id', 'note', 'tax', 'PaymentType', 'CreatedByUsername', 'Actions'],
colModel: [
{ name: 'id', index: 'id', hidden: true, key: true, editable: true, editrules:{ required:false } },
{ name: 'note', index: 'note', width: 40,align:'center', editable: true, editrules: { required : true } },
{ name: 'tax', index: 'tax', width: 400, align: 'center', editable: true, editrules: { required : true } },
{ name: 'PaymentTypeId', index: 'PaymentTypeId', width: 400, align: 'center', editable: true, edittype:"select",
editoptions: { dataUrl: '/Home/PaymentTypes/' }},
{ name: 'CreatedByUsername', index: 'CreatedByUsername', hidden: true, editable: true, editrules:{ required:false } },
{ name: 'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
formatoptions:{
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
beforeSubmit:function(postdata, formid) {
alert("Hi");
jQuery("#ValidationSummary").show('slow');
},
},}
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'My first grid',
editurl: '/Home/Save/'
});
jQuery("#list").navGrid('#pager', { edit: false, search: false, add: true });
});
</script>
When creating on submit it goes to the save method on the controller.
As you can see CreatedByUsername and id are hidden for normal view and edit.
When I add new data though I find that ModelState.IsValid = false.
I've managed to make it so that CreatedByUsername does not added an error to the ModelState even though no data is added for it on insert through editrules:{ required:false }.
The problem is this same piece of code doesn't work for the id and is adding an Error to the ModelState of "The id field is required."
Can anyone please tell me how to prevent this from happening for the id field?
The problem is that your id field has the key attribute and besides your validation rule this field is required. A workaround is to define a custom function for validation an always return true
Can you set the id field in your viewmodel to nullable? Like this:
public int? Id { get; set; }
If the id is not nullable, mvc will automatically create a validation error. If you're not using a viewmodel, but just using parameters on your save action, you can set the id parameter to nullable.