JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Virtual Data Source Refreshing Until click with Column Filter

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #111118
    jomack
    Participant

    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:

    Refresh issue

    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 1 week, 5 days ago by jomack. Reason: formatting
    #111120
    Markov
    Keymaster

    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/

    #111121
    jomack
    Participant

    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 1 week, 5 days ago by jomack.
    #111123
    Markov
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.