HTML Elements Forums Grid Help With Using One Grid for Different Data Sets

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Dimitar 1 month, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100636
    Avatar
    ctstrist
    Participant

    Hey there, I am trying to use a single grid for different data sets. This means that I am altering the data source and columns. I am having issues getting it to work properly.

     

    What is the proper procedure for updating columns, dataSource.dataSource and dataSource.dataFields?

     

    Currently, when I change the columns and data info, the template column I have does not render and the data does not load.

     

    this is my update code which is called after the grid has already been initialized with data.

    const grid = document.querySelector(“#formGrid”);
    grid.beginUpdate();
    grid.columns = [
    { label: ‘Project’, dataField: ‘projectName’ },
    { label: ‘Created By’, dataField: ‘createdUser’ },
    { label: ‘Created Time’, dataField: ‘createdDate’ },
    { label: ‘Last Updated Time’, dataField: ‘updatedDate’ },
    { label: ‘Status’, dataField: ‘status’ },
    {
    label: ‘Actions’, width: 90, allowResize: ‘false’, template: function (formatObject) {
    const editImg = document.createElement(‘img’);
    const deleteImg = document.createElement(‘img’);
    editImg.src = “UI/edit_icon.svg”;
    editImg.style = “width:24px; height:24px; float:left;margin-left:5px;margin-top:3px”;
    deleteImg.src = “UI/delete_icon.svg”;
    deleteImg.style = “width:24px; height:24px;float:right;margin-right:5px;margin-top:3px;”;

    editImg.row = formatObject.row;
    deleteImg.row = formatObject.row;
    const template = document.createElement(‘div’);
    template.appendChild(editImg);
    template.appendChild(deleteImg);
    formatObject.template = template;
    }
    }
    ];
    grid.behavior = { columnResizeMode: ‘growAndShrink’ };

    if (ObjectIsUndefined(grid.dataSource)) {
    grid.dataSource = new Smart.DataAdapter(
    {
    dataSource: [
    {
    projectName: ‘Dummy Form’,
    createdUser: ‘Smart Guy’,
    createdDate: ‘Smarter Person’,
    updatedDate: ‘2020-01-28’,
    status: ‘2’
    }],
    dataFields:
    [
    ‘projectName: string’,
    ‘createdUser: string’,
    ‘createdDate: string’,
    ‘updatedDate: string’,
    ‘status: number’,
    ]
    });
    } else {
    grid.dataSource.dataSource = [
    {
    projectName: ‘Dummy Form’,
    createdUser: ‘Smart Guy’,
    createdDate: ‘Smarter Person’,
    updatedDate: ‘2020-01-28’,
    status: ‘2’
    }
    ];
    grid.dataSource.dataFields = [
    ‘projectName: string’,
    ‘createdUser: string’,
    ‘createdDate: string’,
    ‘updatedDate: string’,
    ‘status: number’,
    ];

    }
    grid.refresh();
    grid.endUpdate();

     

    #100643
    Avatar
    Dimitar
    Participant

    Hi ctstrist,

    Please refer to the following example that demonstrates how to switch the Grid’s dataSource and columns dynamically: https://codepen.io/dimitar_jqwidgets/pen/eYNOPWE.

    Best regards,
    Dimitar

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.