Develop Reference

Tabulator: groupToggleElement breaking layout

Currently making a Table in Tabulator works fine, however when I add "groupToggleElement: "header" " it breaks the layout option of the Tabulator.
I'm unsure if I'm doing something wrong or if it's a bug.
table = new Tabulator("#myTable", {
pagination: "local",
paginationSize: 30,
movableColumns: true,
resizableRows: true,
initialSort: [
{ column: "FullName", dir: "asc" },
],
groupBy: "FullName",
groupStartOpen: false,
groupToggleElement: "header",
layout: "fitDataFill",
layoutColumnsOnNewData: true,
columns: [
{ title: "Name", field: "FullName", sorter: "string", align: "center" },
{ title: "Activation Key", field: "ActivationKey", sorter: "string", align: "center" },
{
title: "Expiry Date", field: "SubscriptionExpiryDate", sorter: "string", align: "center", formatter: "datetime", formatterParams: {
inputFormat: "YYYY-MM-DDT hh:mm:ss",
outputFormat: "DD/MMM/YYYY",
invalidPlaceholder: "No Expiry Date",
}
},
{ title: "Device Points", field: "Seats", sorter: "number", align: "center" }
]
});
$.ajax({
url: "../API/Analytics/GetCustomerData",
type: "get",
async: true,
success: function (data) {
table.setData(data.dataObject);
},
error: function () {
// error thing here
},
timeout: 10000
});

Call
table.redraw(true) to redraw the table on changes
http://tabulator.info/docs/4.3/layout#redraw

how to make a popover or select having different options by clicking on column cell in react bootstrap table 2?

I have a react-bootstrap-table-next where I have multiple columns. I want that when I click on edit button in column cell it open up a popover or select with 3 options:
Delete
Set as Default
Edit
here is the image attached.
Could someone please provide me a proper way to do it.
3 dots clicked and a list is opened for choices
Here is my code. In the Edit column there is event and onclick listener where I have to render the component.
export const Columns = (callback) => {
return ([{
dataField: "code",
text: "Code",
sort: true,
headerStyle: { width: "8%" }
},
{
dataField: "description",
text: "Description",
sort: true,
headerStyle: { width: "40%" }
},
{
dataField: "shortName",
text: "ShortName",
sort: true,
headerStyle: { width: "10%" }
},
{
dataField: "currencyCode",
text: "Currency",
sort: true,
headerStyle: { width: "10%" }
},
{
dataField: "isActive",
text: "Active/Inactive",
sort: false,
formatter: StatusSwitchRenderer,
headerStyle: { width: "12%" },
align: 'center',
attrs: { class: "cdmStatus" }
},
{
dataField: "dateAndTime",
text: "Last Modified Date",
sort: true,
formatter: Helper.completeDateFormat,
headerStyle: { width: "12%" }
},{
dataField: "isDefault",
text:"",
sort:false,
formatter: setDefault,
headerStyle: { width: "10%" },
style: (cell, row, rowIndex, colIndex) => {
if (row.isDefault) {
return {
backgroundColor: '#faede7'
};
}
return {
backgroundColor: '#e5f3fe'
};
}
},
{
dataField: "edit",
text: "Edit",
sort: false,
formatter: rankFormatter,
headerAttrs: { width: 50 },
attrs: { width: 50, class: "EditRow" },
events: {
onClick: (e, column, columnIndex, row, rowIndex) => {
console.log("Aya tou sahi")
}
}
}])
}

Modifying Group Header to include children count Kendo UI Grid

I have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron

How do I add qtip to kendo grid for ellipsed words?

Below is how I structured my kendo grid:
CreateListGrid: function () {
$("#PlanListGrid").kendoGrid({
dataSource: {
transport: {
read:{
url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
type: "POST",
data: {
searchVal: $('#category').val(),
status: $('#ListFilterType').val(),
},
},
dataType: "json",
},
pageSize: 10,
schema: {
data: "Data",
total: "Total",
model: {
fields: {
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false },
Id: { editable: false }
}
},
errors: "Errors"
},
},
toolbar: kendo.template($("#template").html()),
selectable: "row",
//groupable: true,
sortable: true,
//scrollable:true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: 160,
template: "#= SearchItems_Highlight(FirstName)#"
}, {
field: "LastName",
title: "Last Name",
width: 160,
template: "#= SearchItems_Highlight(LastName)#"
},
{
field: "Title",
title: "Plan Title",
width: 180,
template: "#= SearchItems_Highlight(Title)#"
},
{
field: "Id",
title: "Id",
width: 0
},
]
});
var grid = $("#PlanListGrid").data("kendoGrid");
grid.hideColumn("Id");
$("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });
}
I have the text fields in my kendo grid ellipsed if they are too long for the column width. Now I am having trouble adding a qtip to the ellipsed words in my kendo grid.
EDIT:
Because I'm lazy, I found a similar example online using kendo grid. I added the style for .k-grid td which is similar to what I have now that ellipses the text if it's too long. My question now is how do I add a jquery qtip to the ellipsed text? Rather where in the code should I add the qtip?
Here's the fiddle

You can apply qtip after grid creation.
function applyTooltip() {
$(".k-grid-content tbody td").each(function (index, element) {
var td = $(element);
td.qtip({
content: td.text(),
//hide: { when: 'unfocus', delay: 100 },
style: {
border: {
width: 1,
radius: 10
},
padding: 2,
textAlign: 'center',
tip: true,
name: 'cream'
},
position: {
adjust: {
screen: true
}
}
});
});
}
updated fiddle: http://jsfiddle.net/Sbb5Z/1610/
You can restrict qTip to columns who have data exceed a certain number of characters (ellipsis)
fiddle: http://jsfiddle.net/Sbb5Z/1611/

Binding a kendogrid, with large datasource (json array), Anything dynamic required

i want to Bind a kendogrid, with large datasource (json array), that includes the display of detail temeplates too in 3-4 tabs. But it doesn't display the grid. (for 1500 rows) Could there be anything dynamic to display page by page? No search criteria required for solution.
Please advise.
Thanks Yogesh

function bindgridsimple()
{
var element = $("#grid").kendoGrid({
dataSource: {
transport: {
read: url
},
pageSize: 25
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: true,
sortable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function () {
},
columns: [
{
field: "FirstName",
width: "8%",
title: "Candidate Name",
template: "<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'> <span>#=FirstName#</span> <span>#=LastName#</span></a>"
},
{
field: "Mobile",
width: "8%",
title: "Mobile"
},
{
field: "ResumeTitle",
width: "10%",
title: "Resume Title"
},
{
field: "CreatedByUser",
width: "10%",
title: "Created by"
},
{
field: "ExpectedSalary",
width: "15%",
title: "Expected Salary",
template: "<span># if(ExpectedSalary == null) { # 0.00 # } else { #<span>#=ExpectedSalary#</span># }#</span> / <span>#=ExpectedSalaryperiod#</span>"
}, {
field: "MarketingRate",
width: "10%",
title: "Mktg Rate",
template: "<span># if(MarketingRate == null) { # 0.00 # } else { #<span>#=MarketingRate#</span># }#</span> / <span>#=MarketingRateperiod#</span>"
},
{
field: "CreatedDate",
width: "15%",
title: "Resume Received Date",
template: '#if(Resume == null || Resume == "") { } else { # <span> #=parseFullDate(CreatedDate)# </span> # } #'
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "Req. Provided"
},
{
field: "ExistMappedCandidate",
width: "10%",
title: "View",
template: "# if(ExistMappedCandidate==true){ #<a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#'>View Requirement</a> #} else {# <a href='Candidates/candidaterequirementmapping.aspx?CandId=#=CandidateId#' class='No-candidates' onclick='return false' title='No requirements are mapped with this candidate.'>View Requirement</a> #}#"
}
],
pageable: {
pageSizes: [25, 50, 75]
}
});
}
function detailInit(e) {
var sharableDataSource = new kendo.data.DataSource({ data: e.data.Experience });
var sharableDataSourceAttachment = new kendo.data.DataSource({ data: e.data.Attachments });
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".prevExperience").kendoGrid({
dataSource: { data: e.data.Experience,
pageSize: 10
},
columnMenu: true,
scrollable: true,
filterable: true,
resizable: false,
sortable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "Company", title: "Company Name", width: "100px" },
{ field: "Designation", title: "Designation", width: "100px" },
{ field: "FromDate", title: "From", width: "100px", template: '#=parsemyDate(FromDate)#' },
{ field: "ToDate", title: "To", width: "100px", template: '#=parsemyDate(ToDate)#' },
{ field: "LastSalary", title: "Last CTC", width: "65px", template: '#=LastSalary# / Yr' }
]
});
detailRow.find(".attachments").kendoGrid({
//dataSource: sharableDataSourceAttachment,
dataSource: { data: e.data.Attachments,
pageSize: 10
},
columnMenu:true,
scrollable: false,
sortable: true,
filterable: true,
pageable: {
pageSizes: [10, 20]
},
columns: [
{ field: "AttachmentName", sortable: true, filterable: true, title: "File Icon", width: "100px", template: '#= AttachmentTitle #'
},
// { field: "AttachmentTitle", title: "Type", width: "100px" },
// { field: "AttachmentName", title: "Subject", width: "100px", template: 'Resume' },
{field: "CreatedbyUser", sortable: true, filterable: true, title: "Attached By", width: "100px" },
{ field: "Createddate", title: "Date", sortable: true, filterable: true, width: "65px", template: '#=parseFullDate(Createddate)#' }
]
});
}