In my jqgrid I am expanding a subgrid on click on the row. But multi-select functionality also running on my grid. Whenever I click on any checkbox the grid also expand and collapse but I want to expand/collapse subgrid on the click on a row only.
Is there any way by which I can differentiate between the click on the row and a click on the CheckBox.
I am currently stopping the subgrid on click on checkbox very first time but not able to stop it from the second click because it makes the showSubGrid function unreachable.
$("#grid tr").on("click", function(event){
selectedRowId = $(this).attr("id");
if($("#jqg_grid_"+selectedRowId).is(":checked"))
$("#grid").jqGrid("collapseSubGridRow", selectedRowId);
else
showSubGrid(selectedRowId, event);
});
Related
I have grid, with inline edit function. When I click to Add Record button, new editable row is displays. When i click on edit button in another row, the add row is cenceled and I must click again on edit button.
So, I must click twice on edit button if I befere clicked to Add Record button. It is possible to edit row in one click maybe in Grid Edit event ?
#(Html.Kendo().Grid<TT.Web.Models.ViewModel.WorkViewModel>()
.Name("gridAdd")
.Events(events => events.Edit("gridEdit").DataBound("databoundinitAdd").Save("gridAddSaveChanges"))
Maybe:
function gridEdit(e){
$(".k-grid-cancel").click(); // remove ADD record ROW (no work)..
Thanks
The only solution that I can think of currently is to define custom buttons with custom "click" event handlers for the "cancel", "update" and "edit" commands. For your convenience I created small example which you can use as baseline to achieve the desired behavior:
http://dojo.telerik.com/EqOmU/3
Hide and show Add and Cancel button programmatically in JQGrid
You can make Add and Cancel button hidden of visible in the same way like any other elements on the HTML page. You can use jQuery.show, jQuery.hide or jQuery.css with "display", "none" or "display", "" parameters. Thus the only thing which you need is to get DOM elements which represent the buttons. You can get the elements by id for example.
jqGrid assigns ids to all standard buttons. The ids of buttons added by inlineNav will be build from grid id as prefix and strings "_iladd" (for Add button), "_iledit" (for Edit button), "_ilsave" (for Save button) and "_ilcancel" (for Cancel button). So if you have the grid with id="mygrid" then $("#mygrid_iladd").hide() can be used to hide the Add button and $("#mygrid_ilcancel").hide() to hide the Cancel button. To hide both buttons you can use $("#mygrid_iladd,#mygrid_ilcancel").hide().
when I doubleclick on the row, it will give edit popup. This edit popup has left and right error key, when I click on that Arrow key , it will select the row in background. so I want to prevent the Auto select row when click of JQGrid Editpopup's Next and previous button.
so when I click on the next button it will select the row in my Grid table.How do I prevent this behavioir? in below image it mention
Please help me. I have tried "onclickPgButtons", but not able to trigger it.
Thanks in Advance.
You can't prevent selection of the new row, but you can just call setSelection with just selected row to unselect it. The code of afterclickPgButtons could be the following
afterclickPgButtons: function (whichButton, $frmgr, justSelectedRowid) {
$(this).jqGrid("setSelection", justSelectedRowid);
}
See the corresponding demo here.
When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
i have a jqgrid editform with three checkboxes. I need the checkboxes to function like typical html Radio buttons that let a user select ONLY ONE of a limited number of choices.
Unfortunately, jqgrid does not offer radio button editypes.
I know that i can setup an event to deselect all other checkboxes in the editform. Is this the only way to do it in jqgrid?
You can bind the click event to any from the checkboxes and in the event handler to uncheck all other chechboxes in the form if the current checkbox will be checked.