I have a table with data, which is taken from the server. The table shows only two column. But to edit the data I will have other columns. In other words, I need to change colmodel on edit modal window? How can I do that?
I use free jqGrid last version. I found example navGrid.
Simple
How get from server (AJAX) other columns for edit?
You can specify
editrules: { edithidden: true }
additionally to hidden: true in the columns which you want to allow to edit.
For example the demo have hidden column tax which can be editing using form editing. You can start editing in the demo in three ways: double-click on the row, click on the edit button in the row and selection of the row and then click on the edit button in the navigator bar of the pager.
Related
I've used the information on this link to add a button to my grid and it works great. But I don't want that button to be displayed if the user opens that row in the view dialog. How can I hide this item in the view dialog?
I know that I can hide a column in the grid and then display it in the view dialog by using this syntax in the column definition:
, hidden: true, editrules: { edithidden: true },
But I see no way of reversing these options. I've played with different combinations of the above options, and the hidedlg option, but have had no luck.
To clarify, we are using the free version of jqGrid.
You wrote about "the view dialog" in the title of your question. Do you really mean View dialog or Edit dialog? View Dialog will be shown if you click on "View" button of navigator bar, but the button exists only if view: true option is used in navGrid. In the case you can use viewable: false property in the column.
If you want to hide the column in Edit dialog, then you can use editable: "hidden" property in the column (see the wiki article). The demo https://jsfiddle.net/OlegKi/ho803dvq/ uses properties
viewable: false, editable: "hidden"
in the last note column. The column will be shown in the grid, but the column is not visible in either View or Edit dialog.
If you use Guriddo jqGrid you can use the option viewable in colModel. Set this option to false in order to show the field in grid, but not in view form.
See the documentation for this here
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 think i found a strange bug in jqGrid.
If you click on this link you can see a jqGrid with a pager. If you click on the '+' button you get the add form in which the 2 datepickers work as expected.
If you now click on this link you can see the very same table, and the very same add button. Anyway if you try to set the second date using tha datepicker you will notice that the focus moves back to the first input, opening the first datepicker.
The example does not work because it has the first field (Id) hidden, so the real first field is a datepicker. Moreover, the edit form is modal.
Last, if you click in this link the behaviour is correct even if the first field is a datepicker. The only thing i changed is the modal property (to false, before it was true).
However, i NEED to hide the Id field AND have a modal window, so i have to to get rid of this problem...
Can someone suggest a solution or an hint?
Thanks
PS: notice that if you set modal: false, you still get the black/transparent overlay like if the window is modal BUT it is not! If you click outisde the edit form it will be closed. This is not acceptable for my requirements.
try to set jqModal parameter into false
var editParams = {
modal: true,
jqModal:false,
... //other options you need
}
grid.editGridRow(row_id, editParams);
for more information see answer Oleg's analisys
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.
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'