Develop Reference

Syncfusion Grid Grouping Sort issue

I have an EJ2 grid that is grouped. Before the grid is rendered, the data from the business class is sorted by sequence number which is the requirement. When the grid renders the data, the grouping is changing the initial sort order to alphabetical. I have not been able to change the order back to by Sequence number. Any help would be greatly appreciated. Below is the grid definition.
var grid = new ej.grids.Grid({
dataSource: gridDS,
allowExcelExport: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport', "Search"],
allowGrouping: true,
dataBound: bound,
allowSorting: true,
allowMultiSorting: true,
groupSettings: { captionTemplate: '#captiontemplate', showDropArea: false, columns: ['DistrictTypeName', 'DistrictName'] },
sortSettings: {
columns:
[{ field: 'DistrictTypeSequence', direction: 'Ascending' },
{ field: 'DistrictSequence', direction: 'Ascending' },
{ field: 'RaceSequence', direction: 'Ascending' }]
},
columns: [
{ field: "DistrictTypeId", visible: false },
{ field: "DistrictId", visible: false},
{ field: "RaceId", visible: false },
{ field: "DistrictTypeName", headerText: "District Type", width: 90},
{ field: "DistrictName", headerText: "District", width: 90},
{ field: "RaceName", headerText: "", width: 90 },
{ field: "DistrictTypeSequence", visible: false },
{ field: "DistrictSequence", visible: false },
{ field: "RaceSequence", visible: false },
{
headerText: "",
template: "#viewTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});

Set width property array dynamically

I have a react table with group fields and resize-able columns.The columns are like below:
export const columns = [
{ title: 'Year Week',
dataIndex: 'year_week',
editable: false,
width: 60,
},
{
title: 'Actual Bank Amount',
dataIndex: 'actual_bank_amount',
width: 60,
editable: true
},
{
title: 'External Incomings',
key: 'external_incomings',
dataIndex: 'external_incomings',
className: "ext-in",
editable: true,
children: [
{ title: 'Rental Income/Leasing Income', width: 60, dataIndex: "ext_in_rental_income", key: "ext_in_rental_income", editable: true },
{ title: "Tax Refund", width: 60, dataIndex: "ext_in_tax_refund", key: "ext_in_tax_refund", editable: true },
{ title: "Dividends Income", width: 60, dataIndex: "ext_in_dividends_income", key: "ext_in_dividends_income", editable: true },
{ title: "Licence Income", width: 60, dataIndex: "ext_in_licence_income", key: "ext_in_licence_income", editable: true },
{ title: "Other Income", width: 60, dataIndex: "ext_in_other_income", key: "ext_in_other_income", editable: true },
]
}]
I am resizing the width in my reducer as below, but I am sure, we can do it in a far better way. Can someone please suggest a better way to do this. Below is my reducer code.
I simple words I want to set the width property dynamically in a function, where I have access to the dynamic "width" and the "dataIndex".
case 'SET_COLUMN_WIDTH':
const newColmuns = state.columns
Object.keys(newColmuns).map((key) => {
if (newColmuns[key].children) {
let Datakey = newColmuns[key].children.findIndex(item => item.dataIndex === action.payload.dataIndex)
if (Datakey > 0) {
newColmuns[key].children[Datakey].width = action.payload.size.width;
return
}
}
})
return {
...state,
columns: newColmuns
}

for(var col of columns)
{
if(col.children)
{
for(var child of col.children)
{
child.width = 123;
}
}
}

Grab row data onclick of a field in material-table

import MaterialTable from "material-table";
import ShipmentContext from "../context/ShipmentContext";
const ItemsTable: React.FC = () => {
const shipmentcontext = useContext(ShipmentContext);
const { filtered } = shipmentcontext.State;
return (
<>
<div style={{ width: "100%", overflowY: "hidden" }}>
<MaterialTable
options={{
search: false,
showTitle: false,
toolbar: false,
paging: false,
padding: "dense",
maxBodyHeight: "400px",
minBodyHeight:"400px",
paginationType: "stepped",
tableLayout: "fixed"
}}
columns={[
{ title: "AWB NUMBER", field: "awbno" ,},
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
data={filtered}
/>
</div>
</>
);
};
export default ItemsTable;
I want to gather the data of the field i clicked on the row.As here the data is dynamic i am unable to make an onClick method to grab the object which is clicked in the row.
My table look like this :
table
I want an onClick method which when i click on any AWB number grabs the data of it

You can use the custom render function for that to add a custom onClick handler like this:
columns={[
{ title: "AWB NUMBER", field: "awbno" , render: row => <div onClick={() => console.log(row.awbno)}>{row.awbno}</div>}, // This will be called if this cell is clicked
{ title: "TRANSPORTER", field: "carrier" },
{ title: "SOURCE", field: "from" },
{ title: "DESTINATION", field: "to" },
{ title: "BRAND", field: "carrier" },
{ title: "START DATE", field: "pickup_date" },
{ title: "ETD", field: "" },
{
title: "STATUS",
field: "current_status",
cellStyle: {
color: "green",
},
},
]}
```

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")
}
}
}])
}

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/