I'm trying to implement multi selection of rows via keyboard (Shift+Up arrow/Shift+Down arrow). Honestly, I've no idea to implement this. Please help.
What You can do in Kendo Grid is providing a multi-selection mecanisme using ctrl button. So the user presses ctrl and then clicks on the rows that he wants to select (ctrl + left mouse click).
If this is what you look for, here is a code sample:
$("#rowSelection").kendoGrid({
dataSource: {
data: orders,
},
selectable: "multiple",
.
.
.
});
The key syntax is: selectable: "multiple".
Related
In many websites, when we scroll down a button would appear. It says 'Top'. when we click it, then it will take us to the top of the page.
My question is:
I want to have similar functionality in a table but horizontally.
Let me explain, I have a table in my application which has 100+ columns. So if I want to go to the last column, then I have to scroll horizontally till i reach last column. I am using Jqgrid. Is there any implementation in jqgrid which will take us to the last column just by clicking a button or something? Anyone tried?
Here is a possible solution: https://jsfiddle.net/99x50s2s/38/
Add a custom button to your jqgrid as shown in the fiddler, get the width of the 'ui-jqgrid-bdiv' class and scoll to right on the button click event,
.jqGrid('navButtonAdd', '#sg1' + "_toppager", {
caption: "See last column",
title: "Last Column",
onClickButton: function () {
$('.ui-jqgrid-bdiv').animate({
scrollLeft: $(this).width()
}, 'slow');
}
});
I have a in-line delete button, I want to append more data to the delete message pop-up like this:
"Delete selected row with code = 7 ?"
I'm using the following in the delOptions:
beforeShowForm: function ($form) {
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Delete record with <b>code=" + $("#list").jqGrid('getCell', sel_id, 'cd') + "</b>?");}
The problem is If I click on the delete button without first clicking on any part of the row, the selrow is either null or it gets the previously selected row not the currently selected!
How do I make the row selected when clicking on the trash bin icon?
Any help is appreciated
I suppose that you use the example which I posted in the old answer. It was written in case of usage of the Delete button (the part of form editing) from navigator bar.
There are one hidden row in the Delete dialog which could help you. Try this one
beforeShowForm: function ($form) {
// get comma separated list of ids of rows which will be delete
// in case of multiselect:true grid or just id of the row.
// In the code below we suppose that single row selection are used
var idOfDeletedRow = $("#DelData>td:nth-child(1)").text();
$form.find("td.delmsg").eq(0)
.html("Delete record with <b>code=" +
$(this).jqGrid('getCell', idOfDeletedRow, 'cd') + "</b>?");
// REMARK: in old versions of jqGrid you can't use $(this) and
// will have to use something like $("#list")
}
I have a grid with a subgrid: Only the first row of the Main grid need to have a subgrid.
The solutions I found by Google and http://www.trirand.com/....i:subgrid&s[]=hidecol
doesn't work.
Is there a quick and dirty (hard coded) solution?
Hiding the 'subgrid' column with jQuery("#grid_id").hideCol('subgrid'); remove full column which can be used to expand or collapse the subgrid, so you can not use the way in your case.
I suggest you to clear contain of the 'subgrid' column and unbind the 'click' event for the cells inside of loadComplete event handle:
loadComplete: function() {
$("td.sgcollapsed:not(:first)","#list").unbind('click').html('');
}
you will have the following results:
(You can see the corresponding example live here). It's important to understand, that the loadComplete event will be called on any page, so on the second page you will have subrgid also only on the first row.
If you need to implement more complex logic in choosing of the rows which need have subgrids you can use following code
loadComplete: function() {
var grid = $("#list");
var subGridCells = $("td.sgcollapsed",grid[0]);
$.each(subGridCells,function(i,value){
if (i!==0) {
$(value).unbind('click').html('');
}
});
}
The code above do the same as the statement $("td.sgcollapsed:not(:first)","#list").unbind('click').html(''), but you can easy modify the last version of the code to implement more complex behavior.
UPDATED: If you need detractive subgrid only for some row identified by the rowid you can use
$("#"+rowid+" td.sgcollapsed",grid[0]).unbind('click').html('');
(see live here) inside of the loadComplete. If you need deactivate subgrid for all rows which id is not equal to rowid you can make something like following
$('td.sgcollapsed:not("#'+rowid+' td.sgcollapsed")',grid[0]).unbind('click').html('');
(see live here)
UPDATED: free jqGrid now have new feature described in the answer: hasSubgrid callback which can be specified in subGridOptions. It allows to inform jqGrid which rows should don't have subgrids.
In the jqgrid filter toolbar textbox search is working perfectly.. i want to include the checkboxes instead of textbox for search.
how to create? plz explain me..
thanks in advance..
In the filter toolbar you should better use select element with three values: "checked" , "unchecked" and "no filter" (see How can I add a "Select All" option to a jqGrid select toolbar filter?). Of cause you should choose the texts which better corresponds the contain or the name of the column. If you will have only two values like the checkbox has, that you will always have filtering on the column with the checkbox.
Jqgrid Search toolbar
There is no option for adding check box in Search toolbar , but we can add a column with values as check box in grid rows
Alternative way :
It contains the following options for common searching
search,stype,searchoptions,searchrules
stype :
It determines the search type of the field. (text and select)
text: create the text element in search toolbar
select: create the select(drop down) element in search toolbar
Example:
I have a grid with the column name system_defined , I want to show the checkbox in each grid row and search toolbar will be shown as a drop down values with multiselect option.
{name:'system_defined',index:'system_defined', edittype:'checkbox', search: true, formatter: "checkbox", editoptions: { value: "1:Yes;0:No"},editable:true, searchoptions: { sopt: ['eq'], value: ":All;1:Yes;0:No" }, stype: 'select'}
I am working on a DataTable where allow user to add new/modify and delete data. BUt save the final data to database only at the end of the page.
Can i know when i click on a cell, how do that enable all textboxes in the entire row to be in editable mode? And when i mouse out of that row or press on tab at the last column of that row, how do it disable the editing mode of that row?
The online example only allow edit by column - https://editor.datatables.net/examples/inline-editing/simple.
I tried to modify the .Edit in Content\assets\pages\scripts\table-datatables-editable.js to below. I can see the row is in editable, but it dont allow me to edit and how do it enable the mouse in and mouse out?
table.on('click', '.edit', function (e) {
Become
table.on('click', 'tbody > tr > td', function (e) {
To disable the editing mode after mouse out and tab out from the last column, below is what I try:
$(this).childern().first().blur(function() {
saveRow(oTable,nRow);
});