Blazor data grid not showing data

[aconley]

I have what I think is probably the simplest 2-column grid:

@using Smart.Blazor
<div>
    <Grid DataSource="data">
        <Columns>
            <Column Field="RowId" Label="Row Id" />
            <Column Field="RowType" Label="Row Type" />
        </Columns>
    </Grid>
</div>
@code {
    private List data;
    protected override void OnInitialized()
    {
        base.OnInitialized();
        data = new List {
            new Thing {RowId = 1, RowType = "Test 1"},
            new Thing {RowId = 2, RowType = "Test 2"},
        };
        Console.WriteLine(data.First().RowType);
    }
    public class Thing
    {
        public int RowId { get; set; }
        public string RowType { get; set; }
    }
}

The Console.WriteLine command writes “Test 1” to the console as expected, and the grid displays 2 rows with 2 columns, but all of the cells are empty. I’m just trying to see if this Blazor grid is worth using, but the documentation is pretty slim on how to properly bind the data, so I’m hoping someone can help me. I couldn’t find a Search function in the forum (which is kind of crazy), so hopefully I’m just missing something simple.
Thanks!

[YavorDashev]

Hi aconley,
With the definition of the Grid component is normal to have empty cells, because instead of ‘Field’ property you have to use the ‘DataField’ in order to bind the column with the corresponding data.
I have modified your code example in order to showcase you how to set up your Grid properly.

@using Smart.Blazor
<div>
    <Grid DataSource="data">
        <Columns>
            <Column DataField="RowId" Label="Row Id" />
            <Column DataField="RowType" Label="Row Type" />
        </Columns>
    </Grid>
</div>
@code {
    private  List<object> data;
    public class Thing
    {
        public int RowId { get; set; }
        public string RowType { get; set; }
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        data=new List<object> ()
        {
            new Thing {RowId = 1, RowType = "Test 1"},
            new Thing {RowId = 2, RowType = "Test 2"}
        };
        Console.WriteLine(data.First());
    }
}

Also we are aware that the documentation can be a little hard to comprehend sometimes, but we try to improve it constantly!
Link to one of the demos:https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=basic
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[aconley]

Yavor,
I appreciate the quick reply, and that you did not explicitly just come out and call me an idiot. That small change made everything work, so I’m on my way now.
I’m glad it was something simple.
Thanks again!

[xyzzy]

Hi,
I’m having a similar issue and probably doing something stupid but whatever I do the grid always shows “No rows” and doesn’t issue any errors.  My code follows the pattern above – I’ve tried using my own “Thing” object and a generic object but with no difference.  My grid is initial empty on start up, and gets populated as the output of user initiated process.
<Grid @ref=”cdfGrid1″ DataSource=”dsColourDifference” Appearance=@appearance>
<Columns>
<Column DataField=”illuminant” Label=”Illuminant”></Column>
…
<Column Visible=@HunterLab DataField=”HunterLab” Label=”HunterLab”></Column>
<Column DataField=”Status” Label=”Status”></Column>
</Columns>
</Grid>
private List<object> dsColourDifference = new List<object>();
private Grid cdfGrid1;
dsColourDifference = new List<object>() {
new {
illuminant = cdf.illuminant,
…
status =cdf.status,
HunterLab = cdf.HunterLab
}
};
}
cdfGrid1.StateHasChanged();
Just to re-iterate: I also tried using an object (say “Thing”) with the listed properties, get and set, and using “new Thing {” instead of “new {” without any difference.
 

[aconley]

We moved to using Angular instead of Blazor, but maybe call .Refresh() instead of .StateHasChanged()?

[xyzzy]

Thanks aconley for the suggestion.  It didn’t work but it did make me look at the method list more closely (I tried Refresh(), RefreshState() and RefreshView() along the way) and there is an AddRow() method there that worked a treat.
Looks like the DataSource only does the initial population and any changes to the underlying LIST<> has no subsequent effect after initialisation – tried new-ing the list and adding to it with no effect on the grid rows.  Seems counter-intuitive but the LIST<> appears to be a once only bound.
cdfGrid1.AddRow(new
{
illuminant = cdf.illuminant,
…
status = cdf.status,
HunterLab = cdf.HunterLab
});
 

[Author]

Posts