How to place button inside DataGrid

[Lukasz Pesik]

Hello!

Is it possible to place button component under last row of DataGrid, but above the scrollbar? If it is, I would also like to make button witdh equal to gird width. So for example, if you scroll right, button always fills full width of parents div.

Thanks in advance

[Rajapandiyan Settu]

Hi Lukasz, 

Greetings from Syncfusion support. 

Query: Is it possible to place button component under last row of DataGrid, but above the scrollbar? If it is, I would also like to make button witdh equal to gird width.  

Yes, you can achieve your requirement by using following code example in the dataBound event of Grid. 

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

    function dataBound(args) { 

        if (this.element.querySelector(".e-gridcontent .e-content .gridcontentbtn") == null) { 

            // get the Grid content 

            var gridcontent = this.element.querySelector(".e-gridcontent .e-content"); 

            // get the Grid content table 

            var contenttable = gridcontent.querySelector(".e-gridcontent .e-content table"); 

            // create the button 

            var button = document.createElement("button"); 

            button.innerText = "BUTTON"; 

            // bind the content table width to the button 

            button.style.width = contenttable.getBoundingClientRect().width; 

            button.classList.add("gridcontentbtn"); 

            gridcontent.appendChild(button);  // append the button below to the grid content table 

        } 

    } 

Screenshot: 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_btn_content104911024.zip  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S