cant get DetailRowTemplate to work

[HansMeiser234]

Blazorise.DataGrid 1.7.0
Hello,

as a casual programmer iam currently struggling with the DetailRowTemplate feature of datagrids.
I try to adopt this example to my usecase. https://blazorise.com/docs/extensions/datagrid/templates/detail-row

I have a observable list which delivers data to my datagrid which works fine. In my list there is an additional field which ist not visible in datagrid. It contains a long line with raw-text which should be used as the Detail Row, after clicking a row.
Unfortunately iam failing in understanding the needed datatypes i think.
I get this error:
error CS1503: Argument "1": Konvertierung von "string" in "System.Collections.Generic.IEnumerable<Blazor.Pages.MyImport.MyColl>" nicht möglich.
Which means no conversion possible from string to collection. The line which throws the error is this (I use the names from the example)s:

Data="salaries"

So it happens directly on creation of detailrow-datagrid. salaries is filled by this line above:

var salaries = ( context as Employee ).Salaries;

So salaries is created as string, which is not usable for datagrid. In my case Employee is the collection and Salaries is the column of the collection which i want to use as detailrow. But in fact this throws the error because Salaries must be something different. But i dont know what and where to get it.
Please give me a hint.

Thanks,
Hans

[stsrki]

Do you have a full example that we can inspect? It's hard to know what you did by a little code snippets?

[HansMeiser234]

Hello Mladen,

thanks for your help. Currently i dont have a succinct example to show. I will create a minimal one to show just significat data. I also have to hide company data.

Thanks,
Hans

[HansMeiser234]

Hello,
i think i have something usable.
This is definition of my collection.

 public class SqlLogErg{
            public string SqlLogErgDatum { get; set; } = String.Empty;
            public string SqlLogErgUser { get; set; } = String.Empty;
            public string SqlLogErgLineRaw { get; set;} = String.Empty;
        }
        ObservableCollection<SqlLogErg> sqllogergdata = new ObservableCollection<SqlLogErg>();
        public DataGrid<SqlLogErg> dataGridRef;
        List<SqlLogErg> sqllogergrefdata;// = dataGridRef.FilteredData;

Data come from SQL and this works in my datagrid:

<DataGrid TItem="SqlLogErg"
          Data="@sqllogergdata"
          Filterable
          FilterMethod="DataGridFilterMethod.Contains"
          Responsive
          Virtualize
          VirtualizeOptions="@(new() { DataGridHeight = "550px"})"
          Resizable
          ResizeMode="TableResizeMode.Columns"
          @ref="@dataGridRef"
          Striped
          Narrow>
          <DataGridColumns>
            <DataGridColumn Field="@nameof( SqlLogErg.SqlLogErgDatum )" Caption="Datum" Editable="false"></DataGridColumn>
            <DataGridColumn Field="@nameof( SqlLogErg.SqlLogErgUser )" Caption="User" Editable="false"></DataGridColumn>
        </DataGridColumns>
</DataGrid>

Now i add the code of detailrow:

<DataGrid TItem="SqlLogErg"
          Data="@sqllogergdata"
          Filterable
          FilterMethod="DataGridFilterMethod.Contains"
          Responsive
          Virtualize
          VirtualizeOptions="@(new() { DataGridHeight = "550px"})"
          Resizable
          ResizeMode="TableResizeMode.Columns"
          @ref="@dataGridRef"
          Striped
          Narrow>
          <DataGridColumns>
            <DataGridColumn Field="@nameof( SqlLogErg.SqlLogErgDatum )" Caption="Datum" Editable="false"></DataGridColumn>
            <DataGridColumn Field="@nameof( SqlLogErg.SqlLogErgUser )" Caption="User" Editable="false"></DataGridColumn>
        </DataGridColumns>
        
        <DetailRowTemplate>
        @{
            //var sqllogergdetail = ( context as SqlLogErg );
            var mydetailrow = ( context as SqlLogErg ).SqlLogErgLineRaw;
            <DataGrid TItem="SqlLogErg"
                      Data="@mydetailrow"
                      Sortable="false"
                      ShowCaptions="false">
                <DataGridCommandColumn />
                <DataGridDateColumn Field="@nameof( SqlLogErg.SqlLogErgZeileRaw )" Caption="Date" />
            </DataGrid>
        }
    </DetailRowTemplate>
    
</DataGrid>

Now the error happens:
error CS1503: Argument "1": Konvertierung von "string" in "System.Collections.Generic.IEnumerable<Blazor2022.Pages.MyImport.SqlLogErg>"
This is the line:
Data="@mydetailrow"
So i think this should be not string but collection. And also i dont know what to use as TItem in the inner data grid.
Do you think this is enough to have an idea?

Thank you,
Hans

[stsrki]

In your detail DataGrid, you have the TItem="SqlLogErg" and then you're trying to bind the SqlLogErgLineRaw, which is a string. That will not work, as DataGrid works with "complex" types.

If possible I advise to convert string SqlLogErgLineRaw into class object. Like:

public class SqlLogErgLineRaw
{
  public string Message {get;set;}
}

Then

public class SqlLogErg
{
  public string SqlLogErgDatum { get; set; } = String.Empty;
  public string SqlLogErgUser { get; set; } = String.Empty;
  public List<SqlLogErgLine> SqlLogErgLines { get; set;}
}

And then bind that

<DataGrid TItem="SqlLogErgLine"
                      Data="@( context as SqlLogErg ).SqlLogErgLines "
                      Sortable="false"
                      ShowCaptions="false">
                <DataGridCommandColumn />
                <DataGridDateColumn Field="Message" Caption="Date" />
            </DataGrid>

[stsrki]

Or as an alternative don't use DataGrid for the detail table. Instead build it from scratch with the Table component https://blazorise.com/docs/components/table