HTML Elements Forums Data Grid How to get selected row data in Blazor

This topic contains 3 replies, has 2 voices, and was last updated by Avatar Yavor Dashev 2 weeks, 1 day ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #101685
    Avatar
    Riyaz Qureshi
    Participant

    Hi

    I really like your components and was trying with blazor. But I am unable to figure out how to get the currently selected row data

    #101686
    Avatar
    Yavor Dashev
    Participant

    Hi Riyaz Qureshi,

    Thank you for your interest in our components.

    Below you will find a code snippet on how to achieve this using the ‘change’ event and from it you can get the ‘row’ data .

    
    @page "/grid-selection-mode-events"
    
    @using Smart.Blazor.Demos.Data
    @inject RandomDataService dataService
    
    <style>
        body,
        html,
        app {
            height: 100%;
        }
        
        app {
            overflow: auto;
        }
        
        .content {
            height: calc(100% - 70px);
        }
        
        /* This is the CSS used in the demo */
        @@media only screen and (max-width: 400px) {
            smart-grid {
                width: 100%;
            }
        }
        smart-grid {
            width: 60%;
        }
    </style>
    <Example Name="Grid">
        <p>
            This demo demonstrates the Grid's "change" event. The "change" event occurs when the user selects cells, rows or columns. The "change" event has two boolean arguments: "started" and "finished". When the selection starts,
            the "started" boolean argument value is "true". When the selection ends, the "finished" boolean argument value is "true". If the selection is with dragging, the values of "started" and "finished" is false.
        </p>
    
        @if (dataRecords == null)
        {
            <p><em>Loading...</em></p>
        }
        else
        {       
            <Grid DataSource="dataRecords" Appearance="@appearance" Selection="@selection" OnChange="OnGridChanged">
                <Columns>
                    <Column DataField="FirstName" Label="First Name"></Column>
                    <Column DataField="LastName" Label="Last Name"></Column>
                    <Column DataField="ProductName" Label="Product"></Column>
                    <Column DataField="Quantity" Label="Quantity" DataType="number"
                            Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right">
                    </Column>
                    <Column DataField="Price" Label="Unit Price" DataType="number"
                            Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2">
                    </Column>
                    <Column DataField="Total" Label="Total" DataType="number"
                            Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2">
                    </Column>
                </Columns>
            </Grid>
    
            <div class="options">
                <div class="caption">Event</div>
                <div class="option" id="eventsLog">
                    @((MarkupString)eventLog)
                </div>
            </div>
        }
    </Example>
    
    @code {
        private string eventLog = "";
    
        GridAppearance appearance = new GridAppearance() { ShowRowHeader = true };
    
        GridSelection selection = new GridSelection()
        {
            Enabled = true,
            Mode = GridSelectionMode.Extended,
            AllowCellSelection = true
        };
    
        private List<DataRecord> dataRecords;
    
        protected override void OnInitialized()
        {
            base.OnInitialized();
            dataRecords = dataService.GenerateData(3000);
        }
    
        private void OnGridChanged(Event eventObj)
        {
            GridChangeEventDetail detail = eventObj["Detail"];
    
            if (detail.Started)
            {
                eventLog = "";
            }
    
            eventLog += "changed - started: " + detail.Started + ", finished: " + detail.Finished + "<br/>";
        }
    }

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

    #101687
    Avatar
    Riyaz Qureshi
    Participant

    Hi Yavor,

    Thank you for your reply. But lets say from your code I want to get the “FirstName” from the selected row, how to¬†achieve that?

    #101688
    Avatar
    Yavor Dashev
    Participant

    Hi Riyaz Qureshi,

    Here is another approach with which you can get the “First Name” for example using the same example as my first reply but with some
    changes that you can see in the code snippet below

    <Grid DataSource="dataRecords" Appearance="@appearance" Selection="@selection" OnRowClick="GridRowClicked">

    @code {
       //rest of the code 
    
        private void GridRowClicked(Event eventObj)
    	{
    		GridRowClickEventDetail detail = eventObj["Detail"];
    		
    
    		eventLog += "Row clicked Column " + detail.Row.data.FirstName + " ";
    		
    	}
    
    }

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.