I am new with JqGrid and this is my JqGrid code. Now I want to make a website validation on column name "website". If any of you know the answer, kindly reply as soon as possible
{
name: 'website',
index: 'website',
search: false,
editable: true
}
Please formulate your question more clear in the future. It's absolutely unclear what you do exactly an what kind of validation you need to implement. If you need for example client side validation during editing then editrules would be the correct way to implement validation. Probably editrules: {url: true} or editrules: {url: true, required: true} is the property which you need. One uses frequently more common option editrules: {custom: true, custom_func: function (value, label, name) {...}}. One need to implement custom_func callback function which validate the value and returns [true] or [false, "error description"]. See the documentation.
Related
In my JQGrid I have check box column and drop Down drop down is created via edittype: 'select' and check boxes are created via "custom formatter" like this edittype: 'checkbox', formatter: returnCheckBox, I want to write my own "onChange" event.
So for I been able to write my "onchange" event for check box and it works fine but when I click some where else (not on check box) in check box cell and click back on check box it stop firing the "onchange" event. I think row select it causing problem how to stop it.
Here is what i am doing
$("#theGrid").jqGrid({
datatype: 'local',
sortname: 'value1',
sortorder: 'desc',
cellsubmit: 'clientArray',
editurl: 'clientArray',
cellEdit: true,
colNames: ['SName', 'SType', 'DName', 'DType', 'Nullable'],
colModel: [
{ name: 'SName', index: 'SName', width: 100 },
{ name: 'SType', index: 'Type', width: 100 },
{
name: 'DName',
index: 'DName',
width: 100,
editable: true,
edittype: 'select',
editoptions: { value: "1:ID;2:Name" },
},
{
name: 'DType',
index: 'DType',
width: 100,
editable: true,
edittype: 'select',
editoptions: { value: "1:BigInt;2:VarChar(50)" }
},
{
name: 'Nullable',
index: 'Nullable',
width: 100,
editable: true,
edittype: 'checkbox',
//formatter: "checkbox",
formatter: checkedStateChange,
sortable: false,
formatoptions: {disabled : false},
}
]
});
var gridData = [
{ SName: 'ID', SType: 'BigInt', DName: 'ID', DType: 'BigInt' },
{ SName: 'Name', SType: 'VarChar(50)', DName: 'Name', DType: 'VarChar(50)' },
];
for (var i = 0; i < gridData.length; i++) {
$("#theGrid").jqGrid('addRowData', gridData[i].value0, gridData[i]);
}
function checkedStateChange(cellvalue, options, rowObject) {
return '<input type="checkbox" class="gridCheckBox"/>';
}
$('.gridCheckBox').on('change',function(){
alert('I am in checkBoxChange method');
});
The code which you posted have really many small problems.
The problem with change exists because of at least two reasons. The first one: you have to place binding to change event inside of loadComplete callback of jqGrid. The current code bind change event only to existing checkboxs on the page. By sorting the grid for example the grid content will be rebuild and new checkboxs will be created. So all old binding will not work more. The next problem is modifying of checkboxs because of cell editing. If you click in the cell with the checkbox the old content will be destroyed and another checkbox will be created on the same place. The checkbox will have no change binding. After the user clicks on another cell the current cell will be saved. So the editing checkbox will be destroyed and new checkbox will be created in the same place with respect of formatter: "checkbox" or formatter: checkedStateChange. As the result the change event handler will be exist on the checkbox.
I personally don't see any reason why you use formatter: checkedStateChange (or formatter: "checkbox" with formatoptions: {disabled : false}) together with cell editing. It makes only problems. Much more consequent would be to use formatter: "checkbox" without formatoptions: {disabled : false} and just to use afterSaveCell callback of cell editing instead of "onchange" event.
Additional problems in your code:
The usage of name: 'SType', index: 'Type' is wrong because index value have to be the same as name value in case of usage datatype: "local". The current settings will don't make correct sorting or searching in the column SType. I strictly recommend you to remove all index properties from colModel
You use editoptions: { value: "1:BigInt;2:VarChar(50)" } in the DType column which seend be wrong. Correct value should be editoptions: { value: "BigInt:BigInt;VarChar(50):VarChar(50)" }. If you need to use value: "1:BigInt;2:VarChar(50)" then the input data should contains 1 and 2 values in DType column and you should use formatter: "select" additionally.
You can remove colNames option because it contains the same value like the values of name property of colModel.
You should never fill grid with data using addRowData called in the loop. Instead of that you should just move definition of gridData before creating of jqGrid and include data: gridData option in the grid.
The grid have no pager. Nevertheless the local paging still work and the pager site is 20 (it's default value of the option rowNum). Using addRowData you can fill more es 20 rows, but if the user click on a column header before starting of cell editing then the grid will be sorted and only the first 20 rows of result will be displayed. If you want to use local paging you have to include rowNum option with some large enough value, like rowNum: 10000.
It is strictly recommended to use gridview: true option to improve performance of grids and to use autoencode: true option to interpret the input data as pure data and not like HTML fragments. It will protect you from strange errors.
If colModel which you posted is full then the option sortname: 'value1' is wrong because the input data don't contains value1 property.
I have an editable JQGrid(inline editing using events). I want to validate the edited data. I tried the following but none works. It submits the data to the server and returns an error.
Method1:
editRules: { number: true}
Method2
{ name: 'Projection', index: 'Projection', width: 45, editable: true, edittype: 'text', editRules: { custom: true, custom_func: ValidateCell} },
I also tried setting edittype = custom but I don't see why its needed. All I need is to stop the user from entering anything but numbers
Thanks,
Arshya
This s embarrassing!!
I wrote editrules as editRules!!!
all working now!
I'm using jqGrid to display an array of JavaScript objects. One of the values I want to display is a function, not a property, of the object. In the example below, all the values are properties except 'timeliness()' which is a function which calculates the difference between delivery and due dates and returns a timeliness value.
$("#list").jqGrid({
datatype: 'local',
data: assignments,
colNames: ['Project', 'Date Due', 'Date Delivered', "Timeliness"],
colModel: [
{name: 'project.title', index: 'project.title', width: 100},
{name: 'title', index: 'title', width: 250},
{name: 'dueDate',index: 'dueDate', width: 100},
{name: 'deliveryDate', index: 'deliveryDate', width: 100},
{name: 'timeliness()', index: 'timeliness()', width: 100}
],
sortname: 'Project',
rowNum: 10000,
sortorder: 'asc',
viewrecords: true,
loadonce: true,
gridview: true,
height: 'auto',
caption: 'Projects'
});
I've tried it as shown and the function isn't called and no value is returned. I've tried without the parenthesis (e.g. name: timeliness) and as expected it returns the function definition.
Using a formatter works, but it leaves me unable to sort on the column (and this is a column the user would like to sort on). Another way I've thought to work around the problem is simply creating a new property for this object and setting it on all the objects just before I deliver it to the grid to be displayed (once in the grid I don't expect the values to change). Just interested in learning if this is possible in jqGrid and maybe I'm just not handling this field correctly.
Another way I've thought to work around the problem is simply creating a new property for this object and setting it on all the objects just before I deliver it to the grid to be displayed (once in the grid I don't expect the values to change)
This is the easiest solution. Keep in mind that jqGrid is designed to handle many different types of data sources, and most of them involve data from an external source (such as XML or JSON) where a function would not be applicable.
I'm having troubles when showing my json data in jqGrid.
I've searched a lot in this forum and tried various forms to make it work. I apologize if this was already answered but I really need help with this one.
At the server page I was only using JavaScriptSerializer to send the data and the jsonreader function with the default parameters (this worked ok).
I now need to paginate and have changed my server page code to work with the sidx, sord, page, rows parameters.
The resulting string from the server looks like this:
{"total":"344","page":"1","records":"8577","root":[{"Id":"1","SerialNumber":"132","Name":"ServerName"},...]}
Here is my jQuery code:
$("#list").jqGrid({
datatype: "json",
mtype: 'GET',
url:'https://server/handlerpage.ashx',
colNames:['Id','SerialNumber','Name'],
colModel :[
{name:'Id', index:'Id', jsonmap:"Id", width:20},
{name:'Name', index:'Name', jsonmap:"Name", width:120},
{name:'SerialNumber', index:'SerialNumber', jsonmap:"SerialNumber", width:100}],
jsonreader: {repeatitems:false,id:'Id',root:'root'},
pager: '#pager',
rowNum:25,
rowList:[25,50,75,100],
sortname: 'Id',
viewrecords:true,
gridview: true,
height:"400",
width:"700",
caption: 'Select from existing server',
loadtext:'Loading, please wait'
}).navGrid("#pager", { edit: false, add: false, search: true, del: false });
In order to use json data as a response from a query the response has to be formatted correctly. It is difficult to determine what is the correct response and how to get it from the documents. More problems can occur as a result of your server settings generating a warning as part of the response which will cause the grid not to load.
From the documents this is the default json reader, meaning if you format your response correctly you don't need to add anything / a custom json reader.
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
First make sure you have the right response format. {"page":1,"total":1,"records":"2","rows":[{"id":"1","cell":["1","mydata1"]},{"id":"2","cell":["2","mydata2"]}]}
No sample is given on the docs page but the above is correct if you only have two columns in your grid. You need to get your server query / parsing of your server query and values passed to the page that runs your sever side scripts to return this format. The example.php page from the documents gives you all the values you need.
This code will give you the proper header, to avoid error warnings and matches up with the response from above. Also note that in the docs they do not add the apostrophes around the indexes for the associative array index names. That will fail.
header('Content-type: application/json');$responce = new stdClass();$responce->page = $page;$responce->total = $total_pages;$responce->records = $count;$i=0;while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {$responce->rows[$i]['id']=$row['ID'];$responce->rows[$i]['cell']=array($row['ID'],$row['entity_name']); $i++; } echo json_encode($responce);
To rehash what is missing in the docs (it is possible that I just missed them and even if, the documents for jQgrid are epic/a masters work):
1. No mention of the need for a header statement for json (it is clear with the XML examples)
2. No sample of what a working returned string should look like
3. Lack of proper formatting of the associative array indexes.
4. No mention of how to avoid a PHP warning being returned as part of the response
Try the following
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: true,
cell: 'cell',
id: 'id',
userdata: 'userdata'
}
Please make sure that the server side script is returning proper json string with HEADERS
Further check the demo site and JSON example
I have primary key of my row as hidden field in my jQGrid. It is called "UserId"
colNames: ['UserId', "Details" ...],
colModel: [{ name: 'UserId', index: 'UserId', editable: false, hidden: true },
{ name: 'Details', index: 'Details', editable: true, editactioniconscolumn: true },
...]
I get worked create and update cases but i have an issue with delete
Because when delete i am getting an Id of the grid row back on controller and not UserId,
I can keep all UserId's in grid id, that is what i am currently done to make delete work, but i am wondering is there any way to get my hidden UserId getting posted instead of grid row Id.
You can implement your requirements in many ways:
If the value from the UserId column is unique on the page and can be used to identify the row you can add key:true property to the UserId column definition in the colModel.
You can use beforeSubmit or onclickSubmit event to modify the postdata parameter and add additional information which will be send to the server. See here for an example.
Use delData property exactly like editData which I described here.
Use serializeDelData event. See here and this.