If column text contains characters like \<a only first character, \ is displayed in grid. Remaining characters are not visible.
In edit mode this data is displayed wrongly as
\<a< td=""></a<>
If \<a is entered to cell using inline editing and saved, only \ is visible in screen.
jqGrid setting autoencode: true is used.
Data is read from ASP .NET 2 MVC controller from server in json format like
{"total":337,"page":3,"records":10094,"rows":[
{"id":"i88","cell":["\\\u003ca"] }
]
}
How to show and edit text like \<a in jqGrid 4.1.1 ?
If I remember properly, it worked in earlier jqGrid versions. Maybe jqID function changes proposed by Oleg caused this regression.
I suppose, that you just forgot to use the jqGrid option autoencode: true . If I use it I could reproduce the problem which you describe: see the demo and this one.
UPDATED: Your current test case can be reduced to the following demo which has formatter:null in the colModel. If you remove the property the autoencode: true will work for the column.
Related
I'm trying to get a jqGrid table to keep its current page on a reload. I've found some samples, but they don't seem to work for me. Here's what I'm trying:
grid.setGridParam({datatype:'json'}).trigger('reloadGrid',[{page:currentPage}]);
It refreshes but always redisplays the first page.
To retain the page on a redraw simply use this:
grid.trigger("reloadGrid",[{current:true}]);
As a matter of interest, you can also get the current page using:
var currentPageVar = grid.getGridParam('page');
Addition:
'grid' is defined thus:
var grid = jQuery("#grid");
Which refers to the ID of the grid table in the HTML.
you can use simply this code:
jQuery("#your_id").trigger("reloadGrid");
You can use
grid.trigger("reloadGrid", {page: currentPage, fromServer: true});
or
grid.trigger("reloadGrid", {current: true, fromServer: true});
in case of usage free jqGrid fork. It's important to use forceClientSorting: true together with loadonce: true.
The reason of the problem, which you describe, is the following: jqGrid can display the second page only if it would make local paging. If you use only loadonce: true then jqGrid display always the first page. More then that, the server have to sort the data returned from the server. The option forceClientSorting: true inform free jqGrid to do filtering, sorting and paging locally after loading the data from the server and before displaying the first (or another) page. The option forceClientSorting: true allows to load relatively large set of data from foreign source (which data one can't control), filter the data locally (to display only required subset of data), sort the result and to display the page of resulting data.
You must be looking for this code
$("#jsGrid").jsGrid("loadData");
I am wanting to customise the edit form in jqGrid so that instead of using the table structured layout provided I would like to use my own custom css structured layout for the form elements. How should I go about modifying the edit form to allow me to use my own custom look?
You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form
<div id="dialog-div">
<input type="text">
</div>
2 on jquery dialog open the dialog on your jqgrid editbutton click
$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});
by default it will close as-
$("#dialog-div").dialog({
autoOpen: false,
});
Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.
I would recommend you first of all to read (or at least look thorough) the code of form editing module which implement the part which you want to replace. You will see that it consist from more as 2000 lines of code. If you write "I would like to ..." you should understand the amount of work for implementing what you ask. If you are able to understand the code and if you are able to write your modification of the code even using libraries like jQuery UI then you can decide whether it's worth to invest your time to do the work. The main advantage of using existing solutions is saving of the time. What you get in the way is not perfect, but using existing products you could create your own solutions quickly and with acceptable quality. The way to study existing products which you can use for free seems me more effective as large investments in reinventing the wheel.
http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing
Using templates in form editing
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add/or add options of navigator. This can be done in navigator or in the editing method editGridRow :
$("#grid").jqGrid("navGrid",
{add:true, edit:true,...},
{template: "template string for edit",...}
{template: "template string for add",...},
...
);
and in editGridRow method:
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",...}
);
To place the CustomerID field in the template the following code string should be inserted in the template string
{CustomerID}
With other words this is the name from colModel put in { }
The usual problem with table layouts is when you have columns with different widths, especially with those very wide.
I solved my problem adding the attr colspan to wide columns in the beforeShowForm event.
for example
"beforeShowForm":function() {
$('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}
It's not fancy but it worked for me. Perhaps there is a more elegant way to do the same.
I could arrange the fields in several columns without having to make the form extrawide.
When user click on edit button the page navigate to another page, based on Id get the details of a row and you can display the values..
Previous answer of Creating a link in JQGrid solves your problem.
I have found a comment by zbacsi on jqgrids site under inline editing.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#how_is_the_data_organized
"zbacsi, 2010/08/02 20:23
There is an escaping bug with special characters. Try insert alert('hello') into a field. It should be displayed as common text, but its executed..."
I was able to reproduce this issue, on my own grid setup, using the below versions of jqGrid and jQuery.
jqGrid version - > 4.4.4, jQuery version - > 1.7.1.
This can also be reproduced on the inline editing demo pages for jqGrid, located at:
http://www.trirand.com/blog/jqgrid/jqgrid.html
Once there navigate to:
Functionality -> Formatter Actions and begin editing a row.
Inside of the column labeled 'Notes' insert the value: <script>alert('hi')</script>
Hit enter or click the 'Save' icon.
The alert('hi') gets executed rather than 'Notes' containing <script>alert('hi')</script>
Any additional information would be much appreciated, thank you.
It's not a bug. You can fix the problem by usage option
autoencode: true
which I personally strictly recommend you to use the option in all grids.
jqGrid have many options. I personally find default values of some options (see values in "Default" column on the page documentation) not optimal. One from such options is autoencode which default value is false. It means that all data used to fill the grid cells will be interpreted as HTML code fragments. Scripts are the only problem which one have, but inserting the text like a>b, </tr> or <-- could really break the page.
jqGrid allow to overwrite the default by extending $.jgrid.defaults. So I include on every HTML page JS file with my own default preferences. In the file there are lines like
$.extend($.jgrid.defaults, {
autoencode: true,
gridview: true,
height: "auto"
datatype: "json",
loadui: 'block',
...
});
I have successfully increased the zIndex for edit,add,del and search options but alertmod is still at z-index 950 making it always behind parent modal.
alertmod is the warning message when click edit or delete without selecting any row. Is there a way to change the zIndex for alertmod?
new code but still not working... did I place it in wrong order
$("#list-employees-grid").jqGrid('navGrid',"#list-employees-pager",{alertzIndex:3234},
{edit:true,add:false,del:true,search:true,},
{zIndex:1234}, //option for edit
{zIndex:2234}, // for add
{zIndex:3234}, // del
{zIndex:4234, multipleSearch:true, multipleGroup:true} // search
);
There are some cases where the "alertmod" can be created. For example if you mean alerts from the navGrid you can use alertzIndex option which is currently just not documented in the list of navGrid parameters. Nevertheless you can use for example the following options used by alert dialogs: alertcap, alerttop, alertleft,alertwidth,alertheight,closeOnEscape, alertzIndex. See the line of code for details.
For example you can set default value for alertzIndex by
$.extend($.jgrid.nav, {alertzIndex: 1005});
UPDATED: I posted the feature request which could solve the problem with the options of alert dialog in the common case.
UPDATED 2: The feature request is already implemented in the jqGrid code on github (see here). So in the next version (the next after 4.4.0) one will be able to use
$.extend($.jgrid.jqModal, {zIndex: 1005});
to set default z-Index for all alert messages shown by jqGrid.
Yes, there is an alertzIndex option that can be used to specify a custom zIndex. For example:
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).jqGrid('navGrid', '#gridpager', {alertzIndex: customZIndex, ...});
This option is missing from the jqGrid Navigator documentation and should probably have an entry in the Parameters section. You can see all of the possible options in the source code if you look at grid.formedit.js and browse to the navGrid function definition at line 1702.
Does that help?
In Jqgrid for some columns I have set as link.
And also for those columns I have set footer (MAX).
But the issue is, configured link is also getting added to the footer value, which is not expected.
Any help is appreciated.
Thanks in advance.
I think the problem is how you add the footer information. If you use footerData you can use false as the last parameter (the format parameter) of footerData. In the case the footer data will not be formatted by the standard formatter of the corresponding column. As the example see the demo.
If you add the data from the server using userdata and use userDataOnFooter jqGrid option the formatter parameter will be alway used as true (see the source code of jqGrid here and here). As a workaround you can remove userDataOnFooter:true setting and add the footer information manually with respect of footerData inside your localComplete event handle:
var myGrid = $("#list"); // your grid
// ...
// inside of localComplete you can add the data
var userData = myGrid.jqGrid("getGridParam","userData");
myGrid.jqGrid("footerData","set",userData,false);