Thank you for your response. I would like to revisit the issue with the filter bar functionality that I've previously mentioned.
I hope this clarifies the situation for you. Please let me know if you need any further information or if there are other aspects we should discuss.
gridConfig: {
cls: "grid-container",
tbar: {
items: [
{
type: "Combo",
label: "Item Per Page",
items: itemSize,
value: itemSize[1],
editable: false,
style: {
float: "right",
position: "absolute",
top: 10,
right: 10,
width: "200px",
},
onChange: ({ value }) => {
this.$refs.childGrid.instance.value.store.pageSize = value;
},
},
],
},
bbar: {
type: "pagingtoolbar",
},
columns: [
{
field: "IssueType",
text: "Issue Type",
width: 150,
order: 1,
default: true,
htmlEncode: false,
renderer({ record, value, cellElement, row }) {
const content = value;
// Check if the URL is present
if (record.url != null) {
return `<a href="${record.url}${record.params}" target="_blank" title="View Note" rel="noopener">${content}</a>`;
}
// Return the content as is if URL is not present
return content;
},
},
{
field: "DaysSinceUpdated",
text: "Issue Age (days)",
width: 140,
order: 8,
default: true,
},
{
field: "TransactionDes",
text: "Issue Des",
width: 140,
order: 8,
default: true,
type: "template",
template: ({ record }) => `
<div style="max-height: 150px; text-wrap: wrap;">
${record.TransactionDes == null ? "" : record.TransactionDes}
</div>`,
},
{
field: "IsResolved",
text: "Tran. Status",
width: 130,
order: 8,
default: true,
},
{
field: "McaId",
text: "McaId",
width: 100,
order: 2,
default: true,
},
{
field: "Ctrl",
text: "Ctrl",
width: 120,
order: 3,
default: true,
},
{
field: "Xref",
text: "Xref",
width: 140,
order: 4,
default: true,
},
{
field: "EmpName",
text: "Emp Name",
width: 150,
order: 5,
default: true,
},
{
field: "Des",
text: "Des",
width: 250,
order: 6,
default: true,
type: "template",
template: ({ record }) => `
<div style="max-height: 150px; text-wrap: wrap;">
${record.Des}
</div>`,
},
],
features: {
cellMenu: false,
cellEdit: false,
quickFind: true,
regionResize: true,
filterBar: true,
rowExpander: {
column: {
width: 120,
align: "center",
readOnly: true,
},
widget: {
type: "container",
cls: "action-panel",
items: [
{
type: "textfield",
ref: "txtnotes",
flex: 2,
placeholder: "Notes",
value: "",
width: 20,
},
{
type: "combo",
flex: 2,
ref: "cmbgroup",
items: this.selectedOption,
placeholder: "Notes Group",
editable: false,
onSelect: ({ source: combo, record }) => {
const selectedValue = combo?.value;
// Avoid executing the logic if the value is null
if (selectedValue === null || selectedValue === undefined) {
return;
}
if (selectedValue) {
this.bindUsers(combo, selectedValue, record.parentIndex);
}
},
},
{
type: "combo",
ref: "cmbuser",
flex: 2,
valueField: "id",
textField: "text",
placeholder: "Assigned To",
editable: false,
},
{
type: "button",
text: "Submit",
flex: 1,
ref: "btn1",
cls: "b-raised b-blue",
onClick: ({ source }) => {
let vm = this;
const { rowExpander } = source.up("grid").features,
record = rowExpander.getExpandedRecord(source.owner);
const notesData = source.closest("container").widgetMap;
vm.onNoteSubmit(record, 0, notesData);
},
},
{
type: "button",
ref: "btn2",
flex: 1,
text: "Submit & Notify",
cls: "b-raised b-green",
onClick: ({ source }) => {
let vm = this;
const { rowExpander } = source.up("grid").features,
record = rowExpander.getExpandedRecord(source.owner);
const notesData = source.closest("container").widgetMap;
vm.onNoteSubmit(record, 1, notesData);
},
},
{
type: "grid",
ref: "notesgrid",
cls: "col-md-12 custom-notes-grid",
height: 200,
features: {
headerMenu: false,
cellEdit: false,
cellMenu: false,
},
columns: [
{ text: "Assigned To", field: "NameAssign", width: 150 },
{ text: "Note", field: "Des", flex: 1 },
{ text: "Added By", field: "Name", width: 150 },
{
text: "Date",
field: "DateUpdate",
width: 150,
renderer: ({ record, value, cellElement }) => {
const d = new Date(value);
const year = d.getFullYear();
let month = (d.getMonth() + 1).toString();
let day = d.getDate().toString();
let hours = d.getHours();
let minutes = d.getMinutes();
const ampm = hours >= 12 ? "pm" : "am";
// Convert hours to 12-hour format
hours = hours % 12;
hours = hours ? hours : 12; // If hours is 0, set it to 12
// Add leading zero if needed
if (month.length === 1) month = "0" + month;
if (day.length === 1) day = "0" + day;
if (minutes < 10) minutes = "0" + minutes;
const formattedDate = `${month}-${day}-${year} ${hours}:${minutes} ${ampm}`;
record.set("Date", formattedDate); // Set the formatted date to the record if needed
return formattedDate;
},
},
],
store: {
data: [],
},
},
],
},
listeners: {
expand: async (source) => {
try {
const { record } = source;
const cmbGroup = source.widget.items.find(
(item) => item.ref === "cmbgroup"
);
cmbGroup.items = this.selectedOption;
const notesgrid = source.widget.items.find(
(item) => item.ref === "notesgrid"
);
const response = await this.getNotes(record);
notesgrid.store.data = response.data.content;
} catch (error) {
console.error("Error expanding row:", error);
}
},
},
},
},
store: {
readUrl: "/pagedMockUrl",
pageParamName: "page",
sortParamName: "sort",
filterParamName: "filter",
pageSize: itemSize[1],
autoLoad: false,
},
},
