JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Blazor data grid not showing data
Tagged: blazor grid
- This topic has 5 replies, 3 voices, and was last updated 2 years, 11 months ago by
xyzzy.
-
AuthorPosts
-
September 2, 2021 at 2:41 pm #102184
aconley
MemberI 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!September 2, 2021 at 3:42 pm #102185YavorDashev
MemberHi 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/September 2, 2021 at 4:11 pm #102186aconley
MemberYavor,
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!September 17, 2021 at 2:38 pm #102221xyzzy
MemberHi,
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.
September 17, 2021 at 2:54 pm #102222aconley
MemberWe moved to using Angular instead of Blazor, but maybe call .Refresh() instead of .StateHasChanged()?
September 17, 2021 at 3:17 pm #102223xyzzy
MemberThanks 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
});
-
AuthorPosts
- You must be logged in to reply to this topic.