Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102184
    aconley
    Member
    Up
    0
    Down

    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!

    #102185
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102186
    aconley
    Member
    Up
    0
    Down

    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!

    #102221
    xyzzy
    Member
    Up
    0
    Down

    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.
     

    #102222
    aconley
    Member
    Up
    0
    Down

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

    #102223
    xyzzy
    Member
    Up
    0
    Down

    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
    });
     

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.