Virtual Data Source Refreshing Until click with Column Filter

[jomack]

When filtering columns on my data grid the data constantly triggers a refresh until I click the table. I’m wondering how I prevent this or if I’m missing something in regards to my implementation:

const DataProvider = async (req) => {
const assignments = await Assignment.findAllActiveByUserWeekStart(
userId,
weekStart
);
return assignments.map((a) => {
return {
id: a.id,
projectNumber: a.budget.projectNumber,
projectName: a.budget.projectName,
budgetName: a.budget.name,
hours: a.hours,
committedHours: a.committedHours,
isActive: a.isActive[0],
isActiveReason: a.isActive[1],
virtualStartDate: a.virtualStartDate[0],
virtualEndDate: a.virtualEndDate[0],
enforcedPaycode: a.budget.enforcedPaycode,
};
});
};
new Smart.Grid(“#assignmentGrid”, {
dataSource: new Smart.DataAdapter({
virtualDataSource: async function (callbackFunction, details) {
let that = this,
data = await DataProvider(details);
/**
* 1. Sort
* 2. Filter
* 3. Paginate
*/
// 1. Sort
if (
details.sorting.length > 0 &&
(details.action === “sort” || details.action === “dataBind”)
) {
let sortColumns = [];
let sortOrders = [];
for (let dataField in details.sorting) {
const sortOrder = details.sorting[dataField].sortOrder;
sortColumns.push(dataField);
sortOrders.push(sortOrder);
}</div>
that.sortedData = Smart.DataAdapter.Sort(
data,
sortColumns,
sortOrders
);
} else if (details.sorting.length === 0) that.sortedData = null;
if (that.sortedData) data = that.sortedData;
// 2. Filter.
if (
details.filtering.length > 0 &&
(details.action === “sort” ||
details.action === “filter” ||
details.action === “dataBind”)
) {
let filterColumns = [];
let filters = [];
for (let dataField in details.filtering) {
const filter = details.filtering[dataField];
filterColumns.push(dataField);
filters.push(filter);
}
that.filteredData = Smart.DataAdapter.Filter(
data,
filterColumns,
filters
);
} else if (details.filtering.length === 0)
that.filteredData = null;
if (that.filteredData) data = that.filteredData;
let virtualDataSourceLength = data.length;
// 3. Paginate
data = data.slice(details.first, details.last);
callbackFunction({
dataSource: data,
virtualDataSourceLength,
});
},
dataFields: [
{ name: “id”, dataType: “number” },
{ name: “projectNumber”, dataType: “string” },
{ name: “projectName”, dataType: “string” },
{ name: “budgetName”, dataType: “string” },
{ name: “hours”, dataType: “number” },
{ name: “committedHours”, dataType: “number” },
{ name: “isActive”, dataType: “boolean” },
{ name: “isActiveReason”, dataType: “string” },
{ name: “virtualStartDate”, dataType: “date” },
{ name: “virtualEndDate”, dataType: “date” },
{ name: “enforcedPaycode”, dataType: “number” },
],
}),
paging: {
enabled: true,
pageSize: 10,
},
pager: {
visible: true,
},
layout: {
rowHeight: “auto”,
},
sorting: {
enabled: true,
},
filtering: {
enabled: true,
filterRow: {
visible: true,
},
},
behavior: {
columnResizeMode: “split”,
},
columns: [
{
label: “Action”,
dataField: “id”,
width: “8%”,
align: “center”,
cellsAlign: “center”,
formatFunction(settings) {
settings.template = <u class="addAssignmentToTimecard" data-id="${settings.value}">Select</u>;
},
filterEditor: {
template: “”,
},
},
{
label: “Project Number”,
dataField: “projectNumber”,
width: “15%”,
},
{
label: “Project Title”,
dataField: “projectName”,
filterEditor: {
condition: “CONTAINS”,
},
},
{
label: “Task”,
dataField: “budgetName”,
filterEditor: {
condition: “CONTAINS”,
},
},
{
label: “Hours Remaining”,
dataField: “hours”,
sortOrder: “DESC”,
width: “10%”,
formatFunction(settings) {
settings.template =
settings.row.data.hours – settings.row.data.committedHours;
},
},
{
label: “Start Date”,
dataField: “virtualStartDate”,
sortOrder: “ASC”,
width: “12%”,
cellsFormat: “MMM dd, yyyy”,
},
{
label: “End Date”,
dataField: “virtualEndDate”,
sortOrder: “ASC”,
width: “12%”,
cellsFormat: “MMM dd, yyyy”,
},
],
});

• This topic was modified 4 months, 2 weeks ago by jomack. Reason: formatting

[Markov]

Hi jomack,

I checked the provided code block. As far as i see, here you use custom filtering. Filtering is by default triggered each time you type in a character in a filter input field. If you do not wish this to happen, you can change the behavior to filter through the column popup menu or to filter through the grid’s toolbar. Ex: https://www.htmlelements.com/demos/grid/filtering/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[jomack]

Hi Markov,

Thank you for the reply. I still want the filter to trigger via keystroke, I just don’t want it to refresh over and over. I need it to filter once after the last keystroke. Do you see any issue with the code that would cause this? I tried to attach a gif showcasing the issue but the formatting of the post doesn’t seem to show properly.

The gif can be seen here

The loading symbol only stops after I click the table

• This reply was modified 4 months, 2 weeks ago by jomack.

[Markov]

Hi jomack,

How do we measure the last key stroke? An user may write and stop writing and then start writing again. If you use filter row, the ‘applyMode’ property determines whether the filter is applied automatically while the user types or manually after a click. By default it is applied automatically after 800ms – which is a value controlled by the ‘autoApplyModeDelay’ property. I would suggest you to set the ‘autoApplyModeDelay’ to a higher value or use the ‘click’ applyMode.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts