Clicking on the checkbox selects Row.
How do I separate check box column selection from Row selection?..
Select all rows in the HeaderCheckbox table.
How do I select only the current page Row?
Please help me...
// colDefs
{
id: 'checkbox',
checkboxSelection: true,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
suppressMenu: true,
filter: false,
floatingFilter: false,
suppressFilter: true,
floatingFilterComponentParams: { suppressFilterButton: true },
width: 55,
editable: false,
}
//gridOptions
{
...,
rowSelection: 'multiple',
}
EDIT:
The library used is: https://www.ag-grid.com/
For your first part, you can use cellRenderer to add a checkbox to a column and then have your own logic implemented when user selects checkbox.
var defaultCols = [{
field: "Select",
cellRenderer: chkCellRenderFunc
},
{
field: "ColumnA",
minWidth: 80
},
{
field: "ColumnB",
width: 150
},
{
field: "ColumnC",
minWidth: 80
}
]
function chkCellRenderFunc(params) {
var chk = document.createElement('input');
chk.type = "checkbox";
chk.checked = params.data.Select;
chk.addEventListener('change', function () {
//Add your logic for checkbox change event
}
params.api.getFilterInstance('Select').resetFilterValues();
});
return chk;
}
Related
$(function () {
var grid = $("#grid").kendoGrid({
dataSource: { data: items, pageSize: 20 },
sortable: true,
pageable: true,
columns: [
{
title: "Select All",
template: '<input type="checkbox" class="chkbx" />',
{ field: "Test1", title: "A" },
{ field: "Test2", title: "B" },
{ field: "Test3", title: "C" },
}).data("kendoGrid");
For exemple when I select checkbox at Test1 I want to select all line who have same data in field test 3.
You can have a function on checkbox click:
$(document).on("click", ".chkbx", function() {
});
Check if the class is the same.
Then you can do your logic inside the function
if ($(this).is(':checked')) {
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
console.log(selectedItem); // selected row object;
// loop elements, compare your values and and select lines/checkboxes
} else {
}
How to select a particular row problematically
var row = grid.element.find("... whatever your criteria will be");
grid.select(row);
Using Tabulator 4.4.3
When filtering the checkbox normally, everything works
If I set a filtered checkbox to true on a column, it works:
headerFilterEmptyCheck: function (value) {
return !value;
},
However, with using persistentFilter: true and I reload the page, that checkbox filter will only display true=true, never false or null when unchecked (just return 0 rows)
My Column Definition
{
title: "do it?",
field: "hasToDoIt",
responsive: 0,
formatter: "tickCross",
formatterParams: {
allowEmpty: true,
allowTruthy: false,
tickElement: "<i class='fa fa-check'></i>",
crossElement: ""
},
headerFilter: "tickCross",
headerFilterEmptyCheck: function (value) {
return !value; //only filter when the value is true
},
sorter: "string",
headerSortTristate: true,
width: 80,
align: 'center'
},
Table Definition
new Tabulator("#" + config.Key, {
index: "_id",
reactiveData: true,
persistenceMode: true,
persistenceID: "accountsummary",
persistentSort: true,
persistentFilter: true,
autoResize: true,
layout: "fitColumns",
responsiveLayout: true,
virtualDomBuffer: 100,
headerSortTristate: true, //enable tristate header sort for all columns
data: this.state.Data,
columns: this.state.Columns,
groupBy: "Geo",
groupToggleElement: "header",
groupStartOpen: true,
sortOrderReverse: true,
initialSort: [{ column: "Geo", dir: "asc" }, { column: "Account", dir: "asc" }],
rowClick: (e, row) => {
});
}
After selecting the checkbox, reloading the page, the checkbox should show the filtered results and unchecking the box show return to show all rows
This is because persistent filters functionality only persists filters set through the setFilter function, not header filters.
I have a grid with two columns: name and delete. When the user enters to an input text a value and clicks the button, that value is added to the grid. The problem is that the column "Delete" doesn't work,the column "Delete" doesn't display anything. See the code below:
grid = new Slick.Grid("#mygrid", gridData.Selections, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
$("#btnAddValue").click(function () {
var newItem = { "SelectionName": $("#Name").val() };
$('#pickListName').val('');
var item = newItem;
data = grid.getData();
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
var columns = [
{ id: "SelectionName", name: "Name", field: "SelectionName", width: 420, cssClass: "cell-title", validator: requiredFieldValidator },
{ id: "Id", name: "Delete", field: "Id", width: 80, resizable: false, formatter: Slick.Formatters.Delete }];
var options = {
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true};
How should solve this?
Thank you
I have a grid populated with data and
i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide.
when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.
Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.
function PopulateGrid() {
$("#recentNews").kendoGrid({
columns: [
{ field: 'Date', title: 'Date', width: 80,
template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
},
{ field: 'TradeTime', title: 'Time', width: 60,
template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
},
{ field: 'Title', title: 'Description', width: 200 },
{ field: 'Country', title: 'Country', width: 40 },
{ field: 'Economy', title: 'Economoy', width: 40 }
],
dataSource: {
transport: {
read: {
url: 'Home/GetNews',
dataType: "json",
type: "POST"
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
}
},
pageSize: 100
},
// change: onChange,
// dataBound: onDataBound,
dataBound: HoverOnGrid,
pageable: true,
sortable: true,
scrollable: true,
height: 565,
width: 2000
});
}
There are two separate questions about what you are trying to implement:
Bind hover to the Grid rows (easy).
Generate a popup / tooltip that shows the rest of the columns (easy but requires some amount of coding).
Since it seems that you have already defined a function called HoverOnGrid lets write it as:
function HoverOnGrid() {
$("tr", "#recentNews").on("mouseover", function (ev) {
// Invoke display tooltip / edit row
var rowData = grid.dataItem(this);
if (rowData) {
showTooltip(rowData);
}
});
}
where grid is:
var grid = $("#recentNews").kendoGrid({
...
}).data("kendoGrid";
Now, the tricky question, how to show a tooltip / popup... There is no predefined way of doing it, you should do it by yourself. The closes that you can get is defining HoverOnGrid as:
function HoverOnGrid() {
$("tr", "#recentNews").on("click", function (ev) {
grid.editRow(this);
})
}
and the Grid initialization say:
editable: "popup",
But this opens a popup but with fields on edit mode (something that you can hack defining in the dataSource.schema.model that all fields are not editable:
model: {
fields: {
Date: { editable: false },
TradeTime: { editable: false },
Title: { editable: false },
Country: { editable: false },
Economy: { editable: false }
}
}
But it still shows update and cancel buttons in the popup.
So, my recommendation is writing a piece of code that creates that tooltip.
EDIT: For hiding the tooltip you should first intercept the mouseout event:
$("tr", "#recentNews").on("mouseout", function (ev) {
// Hide Tooltip
hideTooltip();
});
where hideTooltip might be something as simple as:
var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()
assuming that you are always using the same id for the tooltip (in this example, tooltip_window_id).
I have a cell-editable jqgrid with a column that has an edittype of 'button'. When the cell is clicked, the button appears. when the button is clicked, a modal dialog appears allowing the user to select a value from a grid. This is all working fine.
When the user clicks the 'OK' button on the modal dialog after picking a value from the grid, I'd like to set the cell value with the value selected by the user and save the cell.
Instead of setting and saving the cell value, the cell is blanked out. Not sure why.
Here is the relevant jqGrid / modal dialog code:
// global variables
base.selectedCode = null;
base.liaGridSelectedId = null;
base.liaGridSelectedICol = null;
base.liaGridSelectedIRow = null;
$("#liaGrid").jqGrid({
datatype: "local",
data: base.liaGridData,
cellEdit: true,
cellsubmit: 'clientArray',
height: 140,
colNames: ['ID', 'Class Code', 'State', 'Location Type'],
colModel: [
{ name: 'id', index: 'id', width: 90, sorttype: "int", editable: false, hidden: true },
{ name: 'ClassCode', index: 'ClassCode', width: 90, sortable: false, editable: true, edittype: "button",
editoptions: {
dataEvents: [{
type: 'click',
fn: function (e) {
e.preventDefault();
var rowid = $('#liaGrid').jqGrid('getGridParam', 'selrow');
base.liaGridSelectedId = parseInt(rowid);
$('#class-dialog').dialog('option', { width: 100, height: 200, position: 'center', title: 'Pick a Class' });
$('#class-dialog').dialog('open');
return true;
}
}]
}
},
{ name: 'LocationType', index: 'LocationType', width: 90, sortable: false, editable: true, edittype: "select", editoptions: { value: "0:;1:Rural;2:Suburban;3:Urban"} }
],
caption: "Liability Model",
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
base.liaGridSelectedICol = iCol;
base.liaGridSelectedIRow = iRow;
}
});
var infoDialog = $('#class-dialog').dialog({
autoOpen: false,
modal: true,
show: 'fade',
hide: 'fade',
resizable: true,
buttons: {
"Ok": function () {
if (base.selectedCode != null) {
$("#liaGrid").jqGrid('setCell', base.liaGridSelectedId, 'ClassCode', base.selectedCode);
$("#liaGrid").jqGrid('saveCell', base.liaGridSelectedIRow, base.liaGridSelectedICol);
$(this).dialog("close");
}
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
As seen above, I'm attempting to use jqGrid('setCell') and jqGrid('saveCell') to update and save the contents of the cell. Not sure why this fails to succeed.
I got this to work in case anyone encounters a similar issue. I had to add the afterSaveCell handler to the grid:
afterSaveCell: function (rowid, name, val, iRow, iCol) {
if (base.liaGridSelectedICol == 1) {
$("#liaGrid").jqGrid('setRowData', rowid, { ClassCode: base.selectedCode });
}
}
FYI - base.selectedCode is set in the modal.
Odd thing, this only worked after calling the setCell and saveCell methods. Without these unsuccessful calls to set and save at the cell level, the above handler was not called.
If someone has a more appropriate approach to solving this problem I'd like to hear it.
Thanks