JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › problem with addRow at the beginning of the grid

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 2, 2022 at 8:04 am #102726
    Giovanni Zomer
    Participant

    I’m loading data dynamically from the server to the grid. Then I click a button “add new data”, do the data input in a new mask and get back to the grid. I want to display the inserted data. If I do it at the end of the grid, everything is correct. The problem is I have to scroll down to that new record again to see it. So I thought, I add the new row at the beginning of the grid, but that doesn’t seem to work. The new data is visible, but also the columns of the first row – already existing before the new data was inserted – is overwritten. So I’m now seeing the new data doubled. I don’t unserstand where I failed, so I prepared a simplified version of the logic. Step 1 load the data “from the server”, Step 2 works correctly inserting a new record at the button (but this is not what I would like to do) and Step 3 is the problematic one: inserting data at the beginning overwrites also the existing first row. What is the problem?

    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <script type=”text/javascript” src=”smart.elements.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”smart.default.css” />
    </head>
    <body>

    <div id=”content”></div>
    step 1: load data<br>
    step 2: new row at the end<br>
    step 3: new row at the beginning (wrong result)<br>

    <script language=javascript>

    var _tx='<smart-grid id=”testgrid”></smart-grid>’;
    document.getElementById(“content”).innerHTML=_tx;
    var objGrid=document.getElementById(“testgrid”);

    var objColumns=[];
    objColumns.push({ label:’id’, dataField:’ID’, width:50, visible:true, dataType:’int’});
    objColumns.push({ label:”column-1″, dataField:”fld_1″, width:200, dataType:”string” });
    objColumns.push({ label:”column-2″, dataField:”fld_2″, width:300, dataType:”string” });
    objColumns.push({ label:”column-3″, dataField:”fld_3″, width:400, dataType:”string” });

    var objDataFields=[];
    objDataFields.push({ name:’ID’, dataType:’int’ });
    objDataFields.push({ name:’fld_1′, dataType:’string’ });
    objDataFields.push({ name:’fld_2′, dataType:’string’ });
    objDataFields.push({ name:’fld_3′, dataType:’string’ });

    var objGridDataSource=new window.Smart.DataAdapter
    ({
    dataSource: “”,
    dataFields: objDataFields,
    dataSourceType: “csv”
    });

    window.Smart(‘#testgrid’, class {
    get properties()
    {
    return {
    appearance:
    {
    alternationStart: 0,
    alternationCount: 2
    },
    selection:
    {
    enabled: true
    },
    filtering:
    {
    enabled: true
    },
    sorting:
    {
    enabled: true
    },
    dataSource: objGridDataSource,
    columns: objColumns
    };
    }
    });

    function loadData()
    {
    var _data=
    “1,alfa1,beta1,gamma1″+’\r\n’
    +”2,alfa2,beta2,gamma2″+’\r\n’
    +”3,alfa3,beta3,gamma3″+’\r\n’
    +”4,alfa4,beta4,gamma4″
    objGrid.dataSource.dataSource=_data;
    }

    function newRow()
    {
    var objRow;
    var _data=”5,new5,newnew5,newnewnew5”;
    var arrData=_data.split(“,”);
    objGrid.addRow(1,true,function(objNewRow)
    {
    objRow=objNewRow;
    objRow.cells[0].value=arrData[0];
    });
    for (x=1;x<arrData.length;x++)
    {
    if (arrData[x].length>0)
    objRow.cells[x].value=arrData[x];
    }
    }

    function newRowWrong()
    {
    var objRow;
    var _data=”6,new6,newnew6,newnewnew6″;
    var arrData=_data.split(“,”);
    objGrid.addRow(1,false,function(objNewRow)
    {
    objRow=objNewRow;
    objRow.cells[0].value=arrData[0];
    });
    for (x=1;x<arrData.length;x++)
    {
    if (arrData[x].length>0)
    objRow.cells[x].value=arrData[x];
    }
    }

    </script>

    </body>
    </html>

    January 2, 2022 at 9:46 am #102727
    admin
    Keymaster

    Hi,

    There are several things wrong in the provided code:

    objRow.cells[0].value=arrData[0]; within the addRow callback function.
    objGrid.dataSource.dataSource=_data; – dataSource.dataSource is incorrect way to update a data adapter.

    For adding & updating rows we have an online example: https://www.htmlelements.com/demos/grid/dynamic-rows/.

    To add a row to the first position, simply modify it to use splice instead of push:

    rows.splice(0,0,createRow());

    or addRow method like that:

    document.querySelector('smart-grid').addRow(createRow(), false);. The second parameter instructs the datagrid to add the new row to the top.

    Best regards,
    Peter Stoev

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

    January 3, 2022 at 7:50 am #102729
    Giovanni Zomer
    Participant

    thanks! I will for it!

    January 3, 2022 at 8:09 am #102730
    Giovanni Zomer
    Participant

    is there also a way to “bulk update” the data adapter, as I tried to do the wrong way here?
    because the actual logic is to build up the structure and then to get data from the server, so hundreds of rows with a few columns; I can do this while initializing and call data from csv or json and so on; but can I also do it after the grid has been created (with no rows at the beginning);
    or do I have to insert row by row if I want to do this?
    thanks!

    January 5, 2022 at 9:16 am #102745
    ivanpeevski
    Participant

    Hello Giovanni,

    You do not need to insert the data row by row. I suggest you to have a look at some of our examples regarding this such as Bind to JSON or Server-side CRUD

    It is also possible to initialize the Grid without any dataSource and set it later, when you receive the data.

    Best regards,
    Ivan Peevski
    Smart UI Team
    https://www.htmlelements.com/

    January 5, 2022 at 3:53 pm #102750
    Giovanni Zomer
    Participant

    thanks, I will follow your tips!

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