Ignite UI Blazor DataGrid: Button in TemplateColumn

Hello,

Is it possible to put a button in a cell?

<DataGrid DataSource="@exceptions" AutoGenerateColumns="false" Height="100%" Width="100%">
      <TextColumn Field="ApplicationName" />
      <TextColumn Field="Id" />
      <TextColumn Field="ApplicationUser" />
      <TextColumn Field="MachineName" HeaderText="Server" />
      <TextColumn Field="ExceptionMessage" />
      <TextColumn Field="EnvironmentName" />
      <TextColumn Field="Severity" />
      <TemplateColumn> <button @onclick="@(() => OpenException(Id))">Detail</button></TemplateColumn>
  </DataGrid>
This does not seem to work. Also how do I access a property (Id)?

Hello Michael,

I have been investigating into the behavior you are looking to achieve, and there are actually two ways that you can go about doing this.

The first is to use a RenderTemplate in the TemplateColumn. There is a code-snippet at the following online documentation article that shows how to do this: https://es.infragistics.com/products/ignite-ui-blazor/blazor/components/sparkline.html#sparkline-in-data-grid. Using this documentation article, you can see the binding of the Sparkline’s context.RowItem.OrderHistory property. I would recommend doing something similar to get to the row’s ID property.

The other way to do this is to use an external JS file with the CellUpdatingScript property of the TemplateColumn. This is demonstrated here: https://es.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid-column-types.html#code-snippet.

I hope this helps. Please let me know if you have any other questions or concerns on this matter.

Hello Andrew,

<TemplateColumn Field="OrderHistory" Width="@("*>180")" HeaderText="Order History" > <Template> <RenderFragment> <div style="width: 100%; height: 70px; background: transparent"> <Sparkline Height="100%" Width="100%" DataSource="@((context.RowItem as Product).OrderHistory)" DisplayType="SparklineDisplayType.Line" ValueMemberPath="Sold" LabelMemberPath="Week" Brush="rgb(21, 190, 6)"> </Sparkline> </div> </RenderFragment> </Template> </TemplateColumn>

What is the <RenderFragment>? If I leave this out I still don't see my button. If I want to use it I get an error that it does not know this component.

Hello Michael,

<RenderFragment> is an element that is exposed by Blazor – it is not an Infragistics element. On my end, I am also seeing an error with <RenderFragment>, but the application is still building and running successfully. It appears there is something wrong with the Intellisense / error handling in Blazor when it comes to recognition of <RenderFragment>. You should still be able to continue with the code-snippet that I have given you, though.

Please let me know if you have any other questions or concerns on this matter.

Andrew,

Using the following code I am still unable to see a button in my grid.

<DataGrid DataSource="@exceptions" AutoGenerateColumns="false" Height="100%" Width="100%">
    <TextColumn Field="ApplicationName" />
    <TextColumn Field="ApplicationUser" />
    <TextColumn Field="MachineName" HeaderText="Server" />
    <TextColumn Field="ExceptionMessage" />
    <TextColumn Field="EnvironmentName" />
    <TextColumn Field="Severity" />
    <TemplateColumn Field="Id" HeaderText="Order History">
        <Template>
            <RenderFragment>
                <div style="width: 100%; height: 70px; background: transparent">
                    <button type="button">Click Me!</button>
                </div>
            </RenderFragment>
        </Template>
    </TemplateColumn>
</DataGrid>

Have you been able to get a button in a grid, if so can you send me the code snippet so I can determine what I am doing wrong.

Hello Michael,

Thank you for your update on this matter. I have been looking into this behavior, and I am also unable to get the <button> to show up within the Template and the RenderFragment. This is strange as the sample at the documentation article I linked above is using this to display our Sparkline control within the grid.

With that said, I was able to get this to work using the JavaScript route that I had also linked, and I am attaching a sample project to show this. This sample is also using a method to speak from the JavaScript function to a static method at the Blazor level. I am linking some documentation to show how this can be done, here.

I am attaching a sample that demonstrates the JavaScript route of doing this. I hope this helps.

Please let me know if you have any other questions or concerns on this matter.

 

Attachments:

1. TemplateColTestServer.zip

Andrew,

We are disappointed that we have to resort to Javascript to get a simple button in the grid. One of the main reasons why we decided to use Blazor was to limit the use of Javascript.

Are you planning to add this feature in the future, or will we be forced to use Javascript for template columns?

Hello Michael,

It appears that there was something I overlooked, as I have spoken with our development teams on this, and there exists an issue with the DataGridModule that needs to be registered, in that it is missing something internally to work with templates, but you can merge this by merging one of our other control’s modules.

I am attaching a modified version of the sample project I sent you previously that now uses the <Template> object that I had mentioned originally. Note that I have merged the SparklineModule as well as the DataGrid though. This behavior is fixed internally and should be available in the next public release of Blazor, so it shouldn’t be necessary to merge other modules going forward.

Please let me know if you have any other questions or concerns on this matter.

 

Attachments:

1. 2474.TemplateColTest.zip

Andrew,

The button is only added in the first row. By the way I'm using Blazor server side.

I can't find any problem.

<DataGrid DataSource="@exceptions" AutoGenerateColumns="false"  SelectionMode="@GridSelectionMode.None" CellSelectionAnimationMode="@CellSelectionAnimationMode.None"  EditMode="@EditModeType.None" >
     <TextColumn Field="ApplicationName" />
     <TextColumn Field="ApplicationUser" />
     <TextColumn Field="MachineName" HeaderText="Server" />
     <TextColumn Field="ExceptionMessage" />
     <TextColumn Field="EnvironmentName" />
     <TemplateColumn Field="Id" HeaderText="Order History">
         <Template>
             <div>
                 <button @onclick="() => OpenException((ProblemReportGridViewModel)context.RowItem)">Detail</button>
             </div>
         </Template>
     </TemplateColumn>
 </DataGrid>

Hello Michael,

I have modified the sample project I had originally sent you to be a Blazor Server project instead, and originally I was seeing some inconsistent behavior with the <button> element rendering within the TemplateColumn.

After speaking with our development teams, it appears that the issue had something to with the connection and communication to the server, and to resolve this, we added a piece to the ConfigureServices method in the Startup.cs of the project:

services.AddSignalR(e => {       e.MaximumReceiveMessageSize = 102400000; });

I am attaching the Blazor Server project that I used to test this. I hope it helps you.

Please let me know if you have any other questions or concerns on this matter.

 

Attachments:

1. TemplateColTest.zip