Develop Reference

How to show label value in cell dropdown instead of stored value?

I'm using Tabulator.js to create an interactive table. I have a dropdown cell (editor type: select) and have found out how to show different labels when selecting from the list (instructions can be found here, the third way).
When I select something, the stored value is shown, but not the label (which is shown when you click on the list). I'd like the stored value to be the ID from the database, and I don't want the user to see it at all, just the label text.
Here is some example code:
var table = new Tabulator("#example-table", {
data:tabledata, //load row data from array
layout:"fitColumns", //fit columns to width of table
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"top", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:7, //allow 7 rows per page of data
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
initialSort:[ //set the initial sort order of the data
{column:"name", dir:"asc"},
],
columns:[ //define the table columns
{title:"Name", field:"name", editor:"select", editorParams:{
values:{
"steve":"Steve Boberson",
"bob":"Bob Jimmerson",
"jim":"Jim Stevenson",
}
}},
],
});

In similar situation like you, but I used a custom select or native dropdown.
Here are the code to explain all: (uses formatters, keeping the real value...)
Tabulator 4.6.3 DataList and DisplayList Demo for select editor
var userData = [{
"FullName": "",
"LoginName": "none"
}, {
"FullName": "Steve Boberson",
"LoginName": "steve"
}, {
"FullName": "Bob Jimmerson",
"LoginName": "bob"
}, {
"FullName": "Jim Stevenson",
"LoginName": "jim"
}];
var customNativeSelect = function(cell, onRendered, success, cancel) {
var cellRealValue = cell.getElement().dataset.loginName;
cellRealValue = (typeof cellRealValue === "undefined") ? "none" : cellRealValue;
//Create and append select list
var selectList = document.createElement("select");
selectList.style.width = "100%";
selectList.style.boxSizing = "border-box";
onRendered(function() {
selectList.focus();
selectList.style.height = "100%";
});
function onChange() {
if (selectList.selectedOptions[0].value != cellRealValue) {
success(selectList.selectedOptions[0].value);
// Store value to cell dataset; will be done by formatter
/* cell.getElement().dataset.loginName = selectList.selectedOptions[0].value */
alert("Here is what the actual looks like: " + JSON.stringify(cell.getTable().getData()))
} else { // No change
cancel();
}
}
//submit new value on blur or change
selectList.addEventListener("blur", onChange);
//submit new value on enter
selectList.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
onChange();
}
if (e.keyCode == 27) {
cancel();
}
});
//Create and append the options
for (var i = 0; i < userData.length; i++) {
var option = document.createElement("option");
option.value = userData[i].LoginName;
option.text = userData[i].FullName;
if (userData[i].LoginName === cellRealValue) {
option.selected = "selected";
}
selectList.appendChild(option);
}
return selectList;
};
var filterState = false;
var tabledata = [{
itemId: '3423'
},
{
name: 'steve'
},
{
lastDate: '34/56/0000'
},
{
completed: 'yes'
}
];
var table = new Tabulator("#html-table", {
data: tabledata, //assign data to table
layout: "fitColumns",
tooltips: true,
tooltipsHeader: true,
placeholder: "No Data Available", //display message to user on empty table
height: "300px",
columns: [{
title: "ID",
field: "itemId",
headerFilter: false
}, {
title: "Name",
field: "name",
headerFilter: false,
editor: customNativeSelect,
formatter: function(cell) {
var value = cell.getValue();
for (var i = 0; i < userData.length; i++) {
if (userData[i].LoginName === value) {
// Store value to cell dataset
cell.getElement().dataset.loginName = value;
value = userData[i].FullName;
break;
}
}
return value;
}
}, {
title: "Last Date",
field: "lastDate",
headerFilter: false
}, {
title: "Completed",
field: "completed",
headerFilter: false
}, ]
});
function showHideFilters() {
if (filterState == false) {
table.updateColumnDefinition("itemId", {
headerFilter: true
});
table.updateColumnDefinition("name", {
headerFilter: true
});
table.updateColumnDefinition("lastDate", {
headerFilter: true
});
table.updateColumnDefinition("completed", {
headerFilter: true
});
filterState = true;
} else {
table.updateColumnDefinition("itemId", {
headerFilter: false
});
table.updateColumnDefinition("name", {
headerFilter: false
});
table.updateColumnDefinition("lastDate", {
headerFilter: false
});
table.updateColumnDefinition("completed", {
headerFilter: false
});
filterState = false;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<button onClick="showHideFilters()">
Show/Hide Filters
</button>
<div id="html-table">
</div>
</body>
</html>

Just swap the values then
const tabledata = [{
name: 'Steve Stevenson'
},
{
name: 'Bob Boberson'
},
{
name: 'Tim Timmersonn'
},
{
name: 'Steve Boberson'
}
];
const table = new Tabulator("#example-table", {
data: tabledata, //load row data from array
layout: "fitColumns", //fit columns to width of table
responsiveLayout: "hide", //hide columns that dont fit on the table
tooltips: true, //show tool tips on cells
addRowPos: "top", //when adding a new row, add it to the top of the table
history: true, //allow undo and redo actions on the table
pagination: "local", //paginate the data
paginationSize: 7, //allow 7 rows per page of data
movableColumns: true, //allow column order to be changed
resizableRows: true, //allow row order to be changed
initialSort: [ //set the initial sort order of the data
{
column: "name",
dir: "asc"
},
],
columns: [ //define the table columns
{
title: "Name",
field: "name",
editor: "select",
editorParams: {
values: {
"Steve Boberson": "steve",
"Bob Jimmerson": "bob",
"Jim Stevenson": "jim"
}
}
},
],
});
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>

I encountered the same issue and I found simpler walkaround than creating custom select control. You can create a Map collection or Record which will map select keys on select values and then set up formatter function on a specific select column definition in which you can override the default display value.
composeSelectFormatter(dictionary) {
return (cell) => {
const value = cell.getValue();
if (!value) return value;
return dictionary[value];
}
}
And then in your column definition:
columns: [ //define the table columns
{
title: "Name",
field: "name",
editor: "select",
formatter: composeSelectFormatter(YOUR_DICTIONARY_RECORD_GOES_HERE),
values: [ ... ]
}

I just found myself in the same scenario.
I used a formatter function and tracked down the values in the list created in the column definition with the editorParams: {values:{1: "xxxx", 2:"xxxx"}},.
formatter: function(cell) {
let cgv = cell.getValue();
let values = cell?._cell?.column?.definition?.editorParams?.values;
console.dir(values);
if (cgv && values && values[cgv]) { return values[cgv]; }
//If you are using the combo {label: "", value: ""} you need to loop through the object
/*if (cgv && values && values.length) {
for (const v of values) {
if (v?.value == cgv && v?.label) { return v.label;}
}
}*/
return '';
}

How can I use the column check box and row selection function together?

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;
}

Slick Grid - formatters.delete not showing in the grid when adding values by input type text

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

Kendo Grid - Dont allow certain records for editing

I have the below command button column in my Kendo grid..
How to disable the "Edit" button in the rows with empty "ItemValue".
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup"
});

you may hide edit button by on dataBound function as below
dataBound: function (e) {
var grid = $("#list485").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
var currentUid = gridData[i].uid;
if (gridData[i].ItemValue == "") {
var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
var editButton = $(currenRow).find(".k-grid-edit");
editButton.hide();
}
}
}
i hope this will help you

Not sure if this can fulfill your need but it works fine for inline editing.
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup",
edit: function(e) {
if(e.model.ItemValue == 100)//your condition
{
$("#grid").data("kendoGrid").refresh();
}
}
});
Anyway this is what I could able to find till now.
There must be some better solution for this.

Selecting rows from one grid & passing them to another grid

I'm trying to allow rows to be selected via checkboxes and for those selected rows and their IDs to be sent to another grid when a 'Submit' button is clicked. In other words, acting as some sort of filter.
I've contacted Telerik's support team and was advised to take the following steps in order to get it working:
Get the selected rows with the Select() method of the Grid
Loop through them & get the underlying item with the dataItem method
Save them into an array
Destroy the grid
Initialize a new grid by setting the data data
Here's a sample on JSBin that shows what I have in mind.
I'm not sure where to start honestly. I would really appreciate it if someone could point me in the right direction to any resources or guides that would be helpful. Thanks!

Assuming you are using RadGrid, make sure you have client side selection turned on, you would see something like this:
<ClientSettings>
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowSelected="RowSelected" />
</ClientSettings>
On the input button, make sure to call your JS method as follows :
<input onclick="GetSelected();" .... >
Your JS code might look something like this :
function GetSelected() {
var grid = $find("<%=Your Grid's ClientID Here%>");
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems(); // 1. Get the selected rows. The selected item can be accessed by calling the get_selectedItems() method of the GridTableView client-side object.
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
// This is where you would have to insert it in a collection so that you can bind it to another grid... You will need to call .Rebind() once you assign the new datasource to the other grid.
}
Hopefully this will give you some idea.. I can see if I can find any examples on inserting rows into other grid if you get stuck.

check this code
html
<div id="grid1"></div>
<input type="button" value="Submit" onclick="Move()" />
<div id="grid2" ></div>
script
<script>
$(document).ready(function() {
var data1 = [
{ id: 1, rating: 3, year: 1997, title: "Rock" }
, { id: 2, rating: 5, year: 1999, title: "X-Man" }
, { id: 3, rating: 4, year: 2011, title: "World War Z" }
];
var grid1=$("#grid1").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ template: "<input type='checkbox' class='checkbox' />", width: "40px" }
,{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data1
}
}).data("kendoGrid");
grid1.table.on("click", ".checkbox", selectRow);
var data2 = [
{ id: 101, rating: 6, year: 2012, title: "The Impossible" }
, { id: 102, rating: 8, year: 2013, title: "Escape" }
, { id: 103, rating: 7, year: 2013, title: "Gravity" }
];
$("#grid2").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data2
}
});
});
function Move() {
var grid1 = $("#grid1").data("kendoGrid");
var rows = grid1.select();
rows.each(function(index, row) {
var selectedRow = grid1.dataItem(row);
//-move to grid2
var grid2 = $("#grid2").data("kendoGrid");
var ins = { id: selectedRow.id, rating: selectedRow.rating, year: selectedRow.year, title: selectedRow.title }; //id=1,rating=9.2,year=1995,title="The Godfather"
grid2.dataSource.insert(ins);
});
rows.each(function() {
grid1.removeRow($(this).closest('tr'));
});
}
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr");
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
</script>
this will help you :)