How to place button inside Grid

[Lukasz Pesik]

Hello,

Is it possible to place button component inside Grid component in the exact same way as in this thread: https://www.syncfusion.com/forums/161733/how-to-place-button-inside-datagrid. Unfortunatey I'm unable to implement solution presented in mentioned thread in blazor. 

Thanks in advance.

[Vignesh Natarajan]

Hi Lukasz,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is it possible to place button component inside Grid component in the exact same way as in this thread” 

 

We have analyzed your query and we do not have direct support to render a button component inside the Grid control. But we have achieved your requirement using DataBound event and JSInterop to render the JavaScript button.  On button click, we have called C# method BtnClick to perform action in Server side.  

 

Refer the below code example.  

 

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders"> 

    <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

  

    [JSInvokable("BtnClick")] 

    public async Task BtnClick() 

    { 

  

    }  

    public void DataBoundHandler(object args) 

    { 

        var dotNetReference = DotNetObjectReference.Create(this); 

        Runtime.InvokeVoidAsync("BtnRender", dotNetReference, Grid.ID); 

    } 

[renderbtn.js] 

var dotnetreffunction BtnRender(ref, Gridid) {    dotnetref = ref;    var element = document.getElementById(Gridid);    setTimeout(function () {         if (element.querySelector(".e-gridcontent .e-content .gridcontentbtn") == null) {            // get the Grid content             var gridcontent = 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.addEventListener("click", Click);            button.innerText = "BUTTON";            // bind the content table width to the button             button.style.width = contenttable.getBoundingClientRect().width.toString() + "px";            button.classList.add("gridcontentbtn");            gridcontent.appendChild(button);  // append the button below to the grid content table         }     }, 0)}function Click(args) {        dotnetref.invokeMethodAsync('BtnClick'); // call C# method from javascript function}

 

kindly download the sample which we have prepared using above solution from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/162594/ze/Grid-1234703417  

 

Refer our UG documentation from below  

  

https://blazor.syncfusion.com/documentation/datagrid/events/#databound   

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Lukasz Pesik]

Hello,
Thanks for your reply. Is implementation presented by you, same on the blazor webassembly app? I cannot adapt it into my client-side app.
Thanks in advance 

[Lukasz Pesik]

Hi again Vignesh

I handled with problem from my previous question. I have added "<script src="/renderbtn.js"></script>" into index.html file, and now everything works fine. Thanks for your help!

[Vignesh Natarajan]

Hi Lukasz,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan