I'm using jqGrid JS - v5.3.0. The main grid is using styleUI:'bootstrap'. The subgrid is created by implementing subGridRowExpanded(). Everything is fine in subgrid except there are no border lines between cells(subgrid labels and content/TDs). Couldn't find a configuration by reading thru docs. Is there an "option" for cell bordering? Thx.
(not able to provide code snippet right now. the configurations used in subgrid are height:100%, colnames: [...], colmodel: [...], datatype: 'local' and data: mylocalvariable. not able to test disabling bootstrap)
It turns out the styleUI should only be applied (as shown in above Tony's demo) at the jqgrid level as $.jgrid.defaults.styleUI = 'Bootstrap'; not as one option on the (main) grid's configuration list as I did. This way, the subgrid should have cell border lines. (Or apply styleUI at both the main grid and subgrig. not tested.) Hope it helps others.
Related
My page layout is exactly as you see in Jqgrid demo page http://trirand.com/blog/jqgrid/jqgrid.html
When a user selects from the menu grid on the left pane, a tab is dynamically created on the right pane with a Subgrid. The grids are all identical accross the tabs. The id value is overriden with key set to true in colModel. But the problem is when an update is made on any tab, other tabs also get updated even though the grid name and id not the same. The only thing they have in common is that they all have similar columns definitions
How can I isolate the changes made on one tab so that they do not get into grids in other tabs?
I found the problem. The grid id was assigned to a global variable rather than local.
Before ....
$grid = $("#MainGrid" + recordId);<br/>
$grid.jqGrid({<br/>
regional: 'en',<br/>
datatype: "json",<br/>
url: encodeURI('#.........<br/>
After ......
$("#MainGrid" + recordId).jqGrid({<br/>
regional: 'en',<br/>
datatype: "json",<br/>
url: encodeURI('#Ur........<br/>
Changed to local (as in **After** above) and problem now resolved
I've a kendo grid with Navigatable option, and the grid navigation is working fine when I press Tab. But when I make some columns in grid as locked (frozen columns), the grid navigation is not working as expected. The navigation is working for only frozen columns and then for unfrozen columns.
#(Html.Kendo().Grid<ProcessModel>()
...
.Navigatable())
dojo.telerik.com/#joeTopazz/ODEbA
Thanks in Advance.
When the Grid has its keyboard navigation enabled, tabbing inside the widget is managed only when incell editing is used. In your example with inline editing, tabbing is managed by the browser and the observed behavior is expected due to the separate tables used for the locked and unlocked columns.
To achieve the desired tabbing order, use incell editing, or set a tabindex for all buttons and inputs from the edit row in the Grid's edit event:
http://dojo.telerik.com/EVuNe
$("#grid").kendoGrid({
navigatable: true,
editable: "inline",
edit: function(e){
e.sender.wrapper
.find(".k-grid-edit-row input,.k-grid-edit-row a")
.attr("tabindex", 1);
}
});
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>
jqgrid doc in here contains:
method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true.
I have sortable: true but columns cannot reordered by dragging headers by mouse. How to re-order columns by dragging columns headers or other way without using column chooser ?
To implement sortable columns is really easy. You should just follow the documentation. You should just
include jquery-ui.min.js additionally to jquery-ui.css which are always required. The most people have the file already included because of usage jQuery UI Widgets like Datepicker, Autocomplete, Tabs and so on.
add sortable: true option to the grid.
Now you can already (see the demo) drag the column header and drop it on another position.
Pls have a look at http://jsfiddle.net/chugh97/YWVA8/56/
I have frozen the Inv No column. What I want to achieve is freeze the checkbox column only so when some one scrolls the checkbox column is not hidden from user's view.
Recently I answered here on the same question. Nevertheless I find the question very good and I think that the sharing of the solution could be interesting for many users of jqGrid. So I repeat the answer here shortly.
The demo which I created based on the demo from the answer allows not only make the column with the checkboxes be frozen, but additionally allows to implement inline editing together with the frozen columns:
I hope that Tony make the corresponding changes in the main code of jqGrid and the inline editing will be removed from the list of limitations of frozen columns.
The most important part of the code which do the trick is below
$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});
$grid.jqGrid('setColProp', 'cb', {frozen: true});
$grid.jqGrid('setGridParam', {multiselect: false});
$grid.jqGrid('setFrozenColumns');
$grid.jqGrid('setGridParam', {multiselect: true});
if($.isFunction($grid[0].p._complete)) {$grid[0].p._complete.call($grid[0]);}
fixPositionsOfFrozenDivs.call($grid[0]);
The implementation of the function fixPositionsOfFrozenDivs you can find either in the code of the demo or in the text of already referenced old answer.