JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Help With Using One Grid for Different Data Sets

This topic contains 3 replies, has 4 voices, and was last updated by Avatar Yavor Dashev 6 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 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

    #101593
    Avatar
    Ronak
    Participant

    Hello,

     
    I’m facing one issue with this grid. I want to display the summary row in both data sources. So it will display the summary the first time but when I change Datasource it won’t display the summary row for 2nd Datasource¬†and when I shift back to the first then it shows the summary row.

    I set the below code for the grid and I’m using the angular.
    grid.summaryRow = {
    visible: true,
    };

    one strange behaviour I found sometimes summary row get visible if i resize the browser windows.  so it might be issues with render so i put the grid.refresh and refreshview too. but it wont display summary for the 2nd grid.

    Please suggest something to achieve the same.

    Note :

    I try below url with the mention issues i got the same result in this codpen example too.

    https://codepen.io/dimitar_jqwidgets/pen/eYNOPWE.

    Thank You

     

    #101596
    Avatar
    Yavor Dashev
    Participant

    Hi Ronak,

    I used the codepen example you shared but unfortunately when I tried to reproduce your issue it didn’t occur as it happens to you.
    Even when you have set the grid summaryRow property you still need to set the summary property of the column you want the summaryRow to be displayed.
    For example :
    ` columns = [
    {
    label: ‘First Name’, dataField: ‘firstName’
    },
    { label: ‘Last Name’, dataField: ‘lastName’ },
    { label: ‘Product’, dataField: ‘productName’ },
    { label: ‘Quantity’,summary: [‘sum’], dataField: ‘quantity’ }];`

    If this is not the case I recommend to share a code example in order to be able to find a solution for you.

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    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.