We Keep Coding

How can you format a Tabulator SELECT based header filters options?

We are using Tabulator (4.8.3) and have a SELECT based header filter on one column. It all works great except we are trying to add some formatting to some of the select options. They display in the select dropdown with the formatting as expected. However once a selection is made, the selected text displays with the raw html (not formatted).
A JS fiddle here shows what we mean. Make a selection and see the formatting displayed in the selection text (e.g. the bold tags and non-breaking spaces).
We looked for a headerFilterFormatter or something along those lines in Tabulator but could not find anything. We also saw this post:
How do I create a multi-select header filter in tabulator?, but it seems like overkill to write all this just to sanitize option texts display.
We don't care id the selected text is formatted or not, we just don't want the html displaying in the value. We could possibly sanitize it externally every time a selection is made, but that does not seem like a great idea because it will tightly couple everything.
Does anyone know if there is a quick, easy way to address this in Tabulator?
var table = new Tabulator("#table", {
layout: "fitDataFill",
columns: [{
title: "ID",
field: "id"
},
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {values: paramLookup}
},
],
});
var tableData = [{
id: 1001,
topic: "1.0",
},
{
id: 1002,
topic: "1.1",
},
{
id: 1003,
topic: "2.0",
},
{
id: 1004,
topic: "3.0",
},
];
function paramLookup(cell){
return {
"1.0":"<b>1.0</b>",
"1.1":" 1.1",
"2.0":"<b>2.0</b>",
"3.0":"<b>3.0</b>",
};
}
table.setData(tableData);

The problem you are facing is you are trying to style the labels for the select list values in the values array. The select editor uses an input element to show the selected value, therefor when you are selecting a value it is showing the label as text.
The correct approach is to include the actual value in the label and then use the listItemFormatter to format the list as wanted, that way you store a plain text value against the label and display it as html:
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {
values: [1.0, 1.1, 1.2],
listItemFormatter:function(value, title){
return "<b>" + title + "</b>";
},
}
},

Flexmonster showing abrupt case-sensitive for columns

If two columns have same values but with different casing i.e first with lowercase and second with uppercase, then flex monster is showing first casing for both of the values.
I have two country data with descriptions having same value but different casing. What flexmonster does, it takes casing of first column and populate in other columns. In this case DESCRIPTION with uppercase on all the description fields.
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
dataSourceType: "json",
data: [
{Country:'USA',description:'discription'}, // description in small
{Country:'India',description:'DISCRIPTION'}, // description in capital
{Country:'BLA',description:'dIsCrIPtiOn'}, // description mixed
]
},
options: {
grid: {
type: "flat"
},
configuratorActive: false
},
slice: {
columns: [{
uniqueName: "Country"
},
{
uniqueName: "description"
}
]
}
},
width: "100%",
height: 370
});
My question is why does flexmonster.js does so?
And need solution how can I keep fields case insensitive ?
https://jsfiddle.net/9w76thxf/2/

Since the 2.7.7 version (https://www.flexmonster.com/release-notes/version-2-7-7/), Flexmonster has a property in the options object for distinguishing members with different cases: caseSensitiveMembers
The caseSensitiveMembers property needs to be specified in the options object the following way (please see https://www.flexmonster.com/question/string-auto-formatting-seems-to-be-applied-to-all-items-in-a-single-column/ for reference):
options: {
caseSensitiveMembers: true
}
Here is a modified version of the JSFiddle example for illustration: https://jsfiddle.net/flexmonster/0ut6rxLe/
Hope this helps :)

Kendo UI Grid. DropDown does not show the pre-selected value as default

First of all i'd like to apologize for my humble english.
I am currently experimenting with Kendo UI, more specifically the grid.
I have the colums "id", "event", "database", "address" and "eventtype" (simplified).
columns: [
{field: "id", hidden: true},
{field: "event", hidden: false, title: "Event"},
{field: "database", hidden: false, title: "Database", width: 100},
{field: "address", hidden: false, title: "Address", width: 100},
{field: "eventtype", hidden: false, title: "Event Type", editor: eventtypeDropDownEditor},
{command: ["destroy", "edit"], hidden: false, width: 200}],
All these are common text-inputs and buttons, except the eventtype. The Event Types are stored in a separate table (id and eventtype(string)).
The eventtypeDropDownEditor is as following
function eventtypeDropDownEditor(container, options) {
$('<input data-text-field="eventtype" data-value-field:"id" data-bind="value:' + options.field+ '"/>')
.appendTo(container)
.kendoDropDownList ({
autoBind: false,
dataTextField: "eventtype",
dataValueField:"id",
dataSource: {
transport: {
read: "https://some.url/default/ajax/geteventtype",
dataType: "json"
}
},
});
};
The called dataSource URL delivers a JSON like
[{"id":"0","eventtype":"placeholder0"},{"id":"1","eventtype":"placeholder1"},{"id":"2","eventtype":"placeholder2"},{"id":"6","eventtype":"placeholder3"}]
So far, so good. Editing, deleting, creating is working perfectly.
My only problem (for 6 hours now) is to display the corresponding Event Type in my column eventtype after enabling the edit.
In other words: if i click the "edit" button, the displayed text under eventtype "placeholder1" changes to a drop down. But instead of pre-selecting "placeholder1" the dropdown is empty. I have to manually click the dropdown and choose one of the options. Even if i only want to change the database for example, i always have to select an Event Type to have a valid value for my query.
While testing different solutions i stumbled upon the index option. Strangely enough, this one isnt working either. Nor does changing the data-bind value.
I guess its some sort of "greater" error preventing any kind of option to work as intended for that context. But i simply cant find a solution or "direction" to investigate any further.
I would really appreciate a solution or "hint" for that matter!
Greetings
Marcel

I guess the problem is the equal sign in data-bind="value=' + options.field+ '".
Try changing to data-bind="value:' + options.field+ '".

I found the solution.
Instead of calling the function eventtypeDropDownEditor in the fields definition, i had to define the editor directly in there.
{field: "eventtype", title: "Event Type",
editor: function(container) {
var input = $('<select id="eventtype" name="eventtype">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "eventtype",
dataValueField: "eventtype",
dataSource: {
transport: {
read: "https://some.url/default/ajax/geteventtype",
dataType: "json"
}
}
}).appendTo(container);
}
},

Sorting a column display hidden rows in jqGrid

I have some rows I hide like that:
$("#"+rowid).hide();
My problem is that when the user clicks to sort a colmun, the hidden rows reappeared. There is a way to avoid this?
EDIT
I will try to explain a little bit more what I did with code example.
I start to create my grid with this params (and without datas).
var params = {
datatype: "local",
data: [],
caption: "Grid",
colNames:[ "Column A", "Column B" ],
colModel:[
{ name:"colA", key: true },
{ name:"colB" }
]
};
For some reasons, I reload next the grid with datas, like this:
$("#myGrid").jqGrid("clearGridData")
.jqGrid("setGridParam", { data: myDatas })
.trigger("reloadGrid");
And I have checkboxes with listeners, like this one:
$("#checkbox1").on("change", onCheckbox1Changed);
function onCheckbox1Changed() {
var rowid = ...;
var datas = $("#myGrid").jqGrid("getRowData");
for(var key in datas) {
if(datas[keys].colB === "" && $("#checkbox1").val() === true) {
$("#"+rowid).show();
} else if(datas[keys].colB === "" && $("#checkbox1").val() === false) {
$("#"+rowid).hide();
}
}
}
This code works like I want. Rows are hidden/shown depending on checkboxes. The problem is when I clik on a column to sort it, the hidden columns reappeared.
EDIT 2
I could force the grid to hide the rows after a sort. But I didn't find where I can find an event like "afterSort". There is "onSortCol" but it is called before the sort.
A solution will be to force that using "loadComplete". Like this:
var params = {
// ...
loadComplete: onLoadComplete
}
function onLoadComplete() {
onCheckbox1Changed();
}
I tried it and it works. But I am not very "fan" with this solution.

I find hiding some rows after displaying the page of data not the best choice. The main disadvantage is the number of rows which will be displayed. You can safe use $("#"+rowid).hide(); method inside of loadComplete only if you need to display one page of the data. Even in the case one can see some incorrect information. For example, one can use viewrecords: true option, which place the text like "View 1 - 10 of 12" on right part of the pager.
I personally would recommend you to filter the data. You need to add search: true option to the grid and specify postData.filters, which excludes some rows from displaying:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ field: "colA", op: "ne", data: "rowid1" },
{ field: "colA", op: "ne", data: "rowid2" }
]
}
}
If you would upgrade from old jqGrid 4.6 to the current version (4.13.6) of free jqGrid, then you can use "ni" (NOT IN) operation:
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "ni", field: "id", data: "rowid1,rowid2" }
]
}
}
In both cases jqGrid will first filter the local data based on the filter rules and then it will display the current page of data. As the result you will have the perfect results.
Sorting of such grid will not not change the filter.

Don't hide columns after the creation of the table, hide them directly when you create the grid using the option hidden, like this:
colNames: ['Id', ...],
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id' },
....
]
If you want to hide columns on particular events after the creation of the grid, look at this article.
Hope it was you were looking for.

Javascript library for table rendering

I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.
Is there a JS library that could do this, so I dont have to write this from scratch?
Please see the attached image with the JSON object.
When the user clicks on Ana, additional row is inserted.

I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like
after the user clicks on the "+" icon in the second line.
The corresponding code you can find below
var mydata = [
{ id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
{ id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
];
$("#grid").jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Name" },
{ name: "lname", label: "Last name" },
{ name: "age", label: "Age", template: "integer", align: "center" }
],
cmTemplate: { align: "center", width: 150 },
sortname: "age",
iconSet: "fontAwesome",
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "location", label: "Localtion" },
{ name: "city", label: "City" },
{ name: "country", label: "Country" }
],
cmTemplate: { align: "center" },
iconSet: "fontAwesome",
autowidth: true
});
}
});
Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.
The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.
If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following
subGridRowExpanded: function (subgridDivId) {
$("#" + subgridDivId).html("<em>simple subgrid data</em>");
}
to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and
then convert the table to the subgrid.
To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.
You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.

I use datatables.net for all my "more complex than lists"-tables. I It's a very well kept library with loads of features and great flexibility.
In the "con" column I would say that it's so complex that it probably has quite a steep learning curve. Although the documentation is great so there is always hope for most problems.