Post non editable values in jqGrid? - jqgrid

I'm using jqGrid, and I would like to post non editable values to the server. I'm editing row by row (not form). Is that possible?
The column is visible, and I'm using inline editing. The data is posted using "editurl" property of the grid.
** Solution **
I solved it in a completely different way, by not using jqGrids setCell, but instead setting the textbox value using document.getElementById(selr + "_Verksamhetskod").value = data.
Not exactly what I had in mind initially, but it works...

Just add that to your cell configuration:
editable: true, editoptions: {disabled: true}

Well if I'm understanding correctly you are trying to make a cell become read-only once it has a value but still be in a format where you can post to the server correctly.
You could use Jquery to place a read-only attribute on each input field
$("#PrimaryKey".columnName").attr("disabled", true)
and either fire this code if there is a value in the input field or after an input has been entered.

Related

Pass RowData to Custom_func in Jqgrid

I have a jqgrid with certain columns. I am trying to call a custom_function to validate the cell value.
I am also getting a regular expression from the database into rowData, which I want to use to validate the cell value.
var ret = jQuery("#settingsListGrid").jqGrid('getRowData', id);
cm.editrules = {
required: true,
custom: true,
custom_func: ValidateData,
custom_value:ret.RegX
};
So I need to pass rowData to a custom function.
ValidateData = function (value, colname, customValue) {
return customValue.test(value) ?
[true] :
[false, "Invalid Data"];
}
I want to pass the rowData using customValue
Please help?
The answer depend on the fork of jqGrid, which you use. I understand the problem which you wrote, but one have to change the code of jqGrid (the implementation of custom validation) to implement the requirement.
I develop free jqGrid fork of jqGrid after Tony Tomov changed the license agreement of jqGrid, renamed his product in version 4.7.1 to Guriddo jqGrid JS (see the post) and made it commercial (see the prices here). After starting the development based on the last free 4.7 version I made a lot of changes and improvements in the code and have implemented many new features. The feature which you need is implemented starting with version 4.12.1 (see here). Thus you can easy solve your problem after updating to the current free jqGrid 4.13.2.
The new feature works as following:
editrules: {
required: true,
custom: ValidateData,
custom_value: ret.RegX
}
It's important that one should specify the custom validation function as the value of custom property instead of usage custom_func. It allows free jqGrid to hold compatibility to old versions (via custom: true and custom_func), but providing new parameters of the validation callback via function as the value of custom property.
The new style ValidateData will look like
var ValidateData = function (options) {
return customValue.test(options.newValue) ?
[true] :
[false, "Invalid Data"];
}
with only one options parameter, which have many properties which you could use. Such style allows to provide many helpful information without the requirement to have a lot of unneeded parameters. Moreover the style of callback options allows to extend the options object in the future versions without breaking compatibility to previous versions.
The options parameter have the following properties
newValue - the current (modified) value which need be validated
oldValue - the previous value (the old value) of the cell before the modification
cmName - the column name. It could be practical if you use one callback function in many columns and you want to implement a little different behavior for different columns. It could be additionally helpful for producing readable error message in case of validation error.
iCol - the index in the current colModel which corresponds the column (the column cmName)
cm - the element of colModel, which represent the currently validating column.
rowid - the rowid of the current editing row. One can use getLocalRow for example to get the content of other columns before editing. It's important to remark that getLocalRow works only in case of usage datatype: "local" or loadonce: true. The method getRowData or getCell can be safe used to get data in form editing mode or to access the data, which are not currently editing (in cell or inline editing mode).
iRow - numeric index of the current editing row from the top of the grid (from the top of HTML <table>)
oldRowData - will be set only in case of usage inline editing or cell editing. It's not defined in form editing mode. It represent the values
mode - shows which editing mode is used now. It can be "addForm", "editForm" (in case of usage form editing), "cell" (cell editing), "add" or "edit" (inline editing). In some other callback function the property could have two other values: "filter" (field from the filter toolbar) or "search" (for validation of the field of the searching dialog)
tr and td - the DOM elements of the row and cell of the grid which will be edited using form editing mode. The properties will be set only in case of form editing.
I hope that the large set of properties of options parameter allows you easy implement your requirements on any custom validation.

JQGrid-Trirand. How to Edit Fields?

I have one page where i have bind data by using JqGrid, but My requirement is In editing one row of a grid, the editable fields must NOT BE builtin fields( builtin textboxs) i want to bind that to other textboxes, check boxes which are outside grid. The data which i want to edit must be supplied to other input controls other than jqgrid builtin input controls, Finally IS THIS POSSIBLE???
Hope iam clear with my question.
Please do help me in reply saying either YES or NO or How, and why.
edited
I am not sure that I understand correctly what you mean, but it seems that you should just use form editing mode. To activate it on the client side you should just add editable: true property to all columns which are editable or use the option cmTemplate: {editable: true} which makes default value of editable for all columns as true. After it you can for example use navGrid to add Add, Edit and Delete buttons in the pager. The functionality on the client side will be ready after that. Now you have to implement editing part in the server code only. If you use commercial version of jqGrid like jqSuite you should address to the documentation or demos for more details.
try this
http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx
or
Try this
<ClientSideEvents BeforeEditDialogShown="beforeEdit"/>
<script type="text/javascript">
function beforeEdit(rowID) {
var grid = jQuery("#<%= JQGrid1.ClientID %>");
lastSelectedRow = grid.getGridParam("selrow");
};
</script>

need to get filters and sorting behavior from jqgrid for a different hidden field

I have a form on my page that is submitting independently of the jqgrid. I need to get any filters and the sorting behavior of the grid as it is currently loaded on the client and include that in my post data that I'm sending up to the server so that it can perform what it needs to perform using the same searching criteria.
I tried this to no avail:
$("#settings").val($("#list").getGridParam("postData"));
where settings is the id of a hidden field in my form. It does indeed pass in the gridsettings object to back end, but it's not including any of my filters and sorting behavior.
any suggestions?
EDIT: when I do console.log($("#settings").val()); in firefox it's showing the correct filters and searching criteria. I'm using the same object on the back end that I do for the actual grid and it's just not working. Do I need to change that object somehow since I'm posting this through a regular http post and not an ajax postback?
EDIT 2: if you read the comments under Oleg's post, you'll see how I resolved this. I had to pass each property separately that is held within the object created by getGridParam(). I am marking his answer as the correct answer as his comments lead me down the right path.
I suppose that you could solve the problem by adding
searchoptions: {searchhidden: true}
for hidden columns in colModel which can be used during searching. If you want to set the settings for all columns you can use cmTemplate option of jqGrid:
cmTemplate: {searchoptions: {searchhidden: true}}
See the answer for more details about cmTemplate.

jqGrid editurl value for local editing?

I have a jqGrid set up with local data. I'm not sending any data to the server until the entire form is filled out. My problem is, when a user adds/edits a row, jqGrid attempts to post the results to the server right then.
I tried leaving out the "editurl" attribute from the jqGrid invocation, but this results in a "No URL is set" error when the user clicks the "submit" button on the popup form for adding/editing records.
I tried putting in a single hash "#" for the editurl value, but this also fails.
Any thoughts?
editurl must be 'clientArray' in your case.
Set editurl:'url', cellsubmit:'clientArray', cellEdit: true
or
here
See this for a complete example of jqgrid local data.
local edit on jqgrid
Change your initial data and your columnmodel, and you will be almost done.
It's not a oneline solution, but, seems this is the way to cope local editing.

jqGrid onselectrow

I'm using a jqGrid, and it gets populated fine. From the UI perspective, one of the columns in the jqGrid is editable. How can I make one of the columns as editable (say like a text box)?
The reason is, in my case when the grid successfully loads, the UI is going to show one of the column's values as editable.
If you're looking to edit the column values directly in the grid, similarly to how you might in Excel, look into the inline editing API:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing&s[]=inline
In colmodel, you have to specify editable: true.Provide edit action link in editURL:... option of jqgrid.
you have to get the "id" of that column and then remove 'disabled' attribute on that.
for example -
$('#idofthatcolumn').removeAttr('disabled');
OR
$('#idofthatcolumn').removeAttr('readonly');
In your colmodel you should specify editable as true i.e, editable:true and specify the editUrl:'localhost:8080/yourApp'
Also if you want to store it in the client side, then specify it as editUrl:'clientArray'

Resources