1. Home
  2. Forum
  3. Blazor
  4. Only show selected data in the data source, Blazor DataGrid

Only show selected data in the data source, Blazor DataGrid

Hi

I have a question regarding to DataGrid Component.
For example, is there a way to show those orders only when Customer Name is "Ariel".
In other words, we do not show all the thing in the dataSource, but only selected. 
I will have a checkbox on the top, so when people click Ariel, only info related to that show up
@page "/datagrid/paging"
@using Syncfusion.Blazor.Grids
@using blazor_samples
@using blazor_griddata
@inherits SampleBaseComponent;
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowPaging="true">
                <GridPageSettings PageCount="5" PageSizes="true"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>                   
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
@code{
    public List<OrdersDetails> GridData { get; set; }
    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
As a result, instead of this 

10001ALFKI5/15/1991$2.30Denmark
10002ANATR4/4/1990$3.30Brazil
10003ANTON11/30/1957$4.30Germany
10004BLONP10/22/1930$5.30Austria
10005AREIL2/18/1953$6.30Switzerland
10006ARIEL5/15/1991$4.60Denmark
10007ARIEL4/4/1990$6.60Brazil
It would be something like this:

10005AREIL2/18/1953$6.30Switzerland
10006ARIEL5/15/1991$4.60Denmark
10007ARIEL4/4/1990$6.60Brazil




39 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team October 1, 2020 11:39 AM UTC

Hi Ariel, 

Greetings from Syncfusion support. 

We suggest you to refer to our below online demo for more details regarding implementing Master Detail Grid. Please refer the demo link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 1, 2020 05:57 PM UTC

  That's not my question about .... would you mind showing me a feasible solution?

JI Jim October 2, 2020 08:26 AM UTC

Do you mean how to change the grid query in the C# code?
I think to do this you can change your grid element to this:
     <SfGrid DataSource="@GridData" AllowPaging="true" Query="@QueryData">

Then in your code section add a field of type Query named QueryData:
     private Query QueryData = new Query().Where(@nameof(OrdersDetails.CustomerID), "equal", "ARIEL");

See here for an example: Dynamic Query

RS Renjith Singh Rajendran Syncfusion Team October 2, 2020 08:28 AM UTC

Hi Areil, 

Thanks for your update. 

We suggest you to use the Query property of Grid. Based on the checkbox state, we suggest you to modify the Query property value based on the checked SfCheckBox Label value in ValueChange event of Checkbox.  

We have prepared a sample based on this scenario. Please download the sample from the link below, 
 
Please refer the codes below, 

 
<SfCheckBox @ref="CheckOne" TChecked="bool" Label="AREIL" ValueChange="ValueChangeOne" ></SfCheckBox> 

<SfGrid DataSource="@GridData" AllowPaging="true" Query="@QueryData">    ...</SfGrid>
SfCheckBox<bool> CheckOne;Query QueryData = new Query();public void ValueChangeOne(ChangeEventArgs<bool> args){    if (args.Checked)    {        QueryData = new Query().Where("CustomerID", "equal", CheckOne.Label);    }    else        QueryData = new Query();}

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 6, 2020 09:43 PM UTC

I can see what you code means here, I have a more complex grid though.

<div class="col-lg-12 control-section">
<div class="content-wrapper">
<div class="row">
@{
foreach (var day in @Digests)
{

<h5 style="padding-top: 25px;">@day.Day.ToString("yyyy-MM-dd")</h5>
<Syncfusion.Blazor.Grids.SfGrid DataSource="@day.Digests" AllowPaging="false" AllowTextWrap="true" Query="@QueryData">

For each day I spawned a data grid.
now I want to filter on them all
private void ValueChangeOne(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)

However when I check the checkbox, every grid started loading for a long time, and then I was unable to unchecked it.
I am note sure why? is that because the query runs on multiple grid at the same time so it does not work? 


AT Ariel Tan October 7, 2020 12:44 AM UTC

 l
getting msg in the console while loading

RS Renjith Singh Rajendran Syncfusion Team October 7, 2020 12:41 PM UTC

Hi Ariel, 

Thanks for your update. 

We tried reproduce the problem by creating a sample based on the shared codes. But we could not face the reported problem. We are attaching the sample for your reference. Please download the sample from the link below, 

If you are still facing difficulties, then the following details would be helpful for us to further proceed on this and provide you a solution as early as possible.  
  1. Share the sample which you have tried from your side. This would be helpful for us to validate the problem based on this scenario.
  2. Share the exact scenario or proper replication procedure to reproduce the problem.
  3. Share the complete Grid rendering codes and Grid model class codes.
  4. Share with us a video demo showing the replication procedure of the problem you are facing.
  5. If possible, reproduce the problem with the attached sample and share with us for further analysis.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
AT Ariel Tan October 7, 2020 07:33 PM UTC

Cool!!! I think I figure out which part is wrong on my end. Thank you so much. I do have another question about this. If I want to create a global search box on this model.  what should I do. Since I have several separate data grid and I want to do search on them all at the same time, like a search box near checkbox where user can type "Ariel" or other thing.

RS Renjith Singh Rajendran Syncfusion Team October 8, 2020 12:43 PM UTC

Hi Ariel, 

We suggest you to modify the Key property of GridSearchSettings dynamically based on the value entered in SfTextbox using the OnInput event handler. Please refer and use as like the code below, 

<SfTextBox Placeholder="Enter Text to Search" OnInput="SearchValueChange" ></SfTextBox>
 
<SfGrid @ref="Grid" DataSource="@day.Digests" AllowPaging="true" Query="@QueryData">    <GridSearchSettings Key="@SearchKey"></GridSearchSettings>    ...</SfGrid>public string SearchKey = "";public async Task SearchValueChange(Microsoft.AspNetCore.Components.ChangeEventArgs args){    SearchKey = args.Value.ToString();}

We have also modified the sample for your convenience. Please download the sample form the link below, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 8, 2020 10:25 PM UTC

In this case, if I search something which is not existed in those grid. It will show several empty grids. Is that possible to show no grid if there is no record, instead of empty grid?

RS Renjith Singh Rajendran Syncfusion Team October 9, 2020 08:54 AM UTC

Hi Ariel, 

We have analyzed your requirement. We suggest you to prevent the Grid rendering codes using a flag variable based on your requirement. You can calculate the availability of the search value in your list and later use the search result from your list to assign value to flag variable.  

We have also modified the sample based on this requirement. Please download the sample form the link below, 
 
Please refer the codes below, 

<div class="row"> 
    @foreach (var day in GridData) 
    { 
        if (!SearchKey.Equals("")) 
        { 
            IEnumerable<OrdersDetails> a = day.Digests.Where(x => x.OrderID.ToString().Contains(SearchKey) || x.CustomerID.ToString().Contains(SearchKey, StringComparison.OrdinalIgnoreCase) || x.OrderDate.ToString("d").Contains(SearchKey) || x.Freight.ToString().Contains(SearchKey)); 
            if (a.Count() == 0) 
            { 
                flag = false; 
            } 
        } 
        if(flag) 
        { 
            <h5 style="padding-top: 25px;">@day.Day.ToString("yyyy-MM-dd")</h5> 
            <SfGrid @ref="Grid" DataSource="@day.Digests" AllowPaging="true" Query="@QueryData"> 
                <GridSearchSettings Key="@SearchKey"></GridSearchSettings> 
                ... 
            </SfGrid> 
        } 
        flag = true; 
    } 
</div> 

public bool flag = true;

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 13, 2020 09:02 PM UTC

I got a follow up questions. but first of all, I want to thank your help along the way!! 

First question is about filters, 
<SfCheckBox @ref="CheckOne" TChecked="bool" Label="AREIL" ValueChange="ValueChangeOne" >SfCheckBox> 
my question is in the data grid I hide this column, but I still want users to be able to filter based on this 
example would be  there is no customer name field, but this order is under "ariel", so if I filter by "ariel" I would see this. 
but sure if I make myself clear 
my approach is something like         
 visible = "false" >
but then I am not able to filter base on "ariel"

100110/12/2020$2.10

RS Renjith Singh Rajendran Syncfusion Team October 14, 2020 09:24 AM UTC

Hi Ariel, 

We are not clear about this scenario. We suspect that you can’t filter a value in CustomerID after setting Visible=false for this column. We tried reproduce this scenario, by setting Visible property for CustomerID field as false. But still we could filter based on the value in CustomerID when click on the checkbox. We are attaching a video for your reference. 
 
If we have misunderstood your query, or if you still need further assistance, then the following details would be helpful for us to proceed further. 
  1. Share the video demo showing your requirement or the problem you are facing.
  2. Share the detailed explanation of your exact requirement or problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

And also, we suggest Width property of GridColumn. You can also hide a column in Grid by setting the Width property of Grid as 0. Please refer the code below, 

 
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="0"></GridColumn> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 14, 2020 08:27 PM UTC

Thank you so much!! It worked!! I have two following questions. 

The first one is with the filter, how can I skip, not show those has no record. just similar to the search box skip those without result.



The second question is that with the detailed grid


The green one means there is warnings.
How can I get rid of that span icon, so user knows there is no info in detailed 


RS Renjith Singh Rajendran Syncfusion Team October 15, 2020 02:06 PM UTC

Hi Ariel, 

Query 1 : The first one is with the filter, how can I skip, not show those has no record. just similar to the search box skip those without result. 
We suggest you to implement the same suggestion as like for search to achieve this requirement. In the below code, we have FilterKey variable, based on this FilterKey value we have updated the flag variable to render the Grid. 

@foreach (var day in GridData) 
            { 
                if (!SearchKey.Equals("")) 
                { 
                    ... 
                } 
                if (!FilterKey.Equals("")) 
                { 
                    IEnumerable<OrdersDetails> b = day.Digests.Where(x => x.CustomerID.Equals(FilterKey)); 
                    if(b.Count() == 0) 
                    { 
                        flag = false; 
                    } 
                } 
                if(flag) 
                { 
                    <h5 style="padding-top: 25px;">@day.Day.ToString("yyyy-MM-dd")</h5> 
                    <SfGrid @ref="Grid" DataSource="@day.Digests" AllowPaging="true" Query="@QueryData"> 
                        ... 
                    </SfGrid> 
                } 
                flag = true; 
            } 

    public string FilterKey = "";
    public void ValueChangeOne(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)    {        if (args.Checked)        {            FilterKey = CheckOne.Label;            QueryData = new Query().Where("CustomerID", "equal", CheckOne.Label);        }        else        {            FilterKey = "";            QueryData = new Query();        }    }

We have also prepared a sample based on this scenario, please download the sample from the link below, 
 
Query 2 : How can I get rid of that span icon, so user knows there is no info in detailed 
To hide the expand/collapse icon for particular detail rows based on parent Grid column(Status) data, we suggest you to bind the RowDataBound event of Grid. On this event handler, we will be adding a “no-detail” class for the rows which you don’t want to render DetailTemplate based on the Status field’s value(for an example we have used Boolean value for this field). Now we will hide this particular row, based on this css selector.  
 
We have prepared a sample based on this requirement. Please download the sample from the link below, 
 
Please use the codes below, 
 
 
    <SfGrid DataSource="@Employees" Height="315px"> 
        <GridEvents RowDataBound="RowDataBound" TValue="EmployeeData"></GridEvents> 
        ... 
    </SfGrid> 
 
 
<style> 
    .e-grid .e-row.no-detail .e-icons.e-dtdiagonalright.e-icon-grightarrow { 
        display: none; 
    } 
 
    .e-grid .e-row.no-detail td.e-detailrowcollapse { 
        pointer-events: none; 
    } 
</style> 
 
@code{ 
    public void RowDataBound(RowDataBoundEventArgs<EmployeeData> args) 
    { 
        if (!args.Data.Status) //for an example we have used bool val for Status, you can use your Status field value to check this condition
        { 
            args.Row.AddClass(new string[] { "no-detail" }); 
        } 
    } 
    ... 
} 
 
 
Documentation :  

Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 16, 2020 03:54 AM UTC

Hi! Is that possible to keep the checkbox selection even if I refresh the page? 
my filter will stay the same.

RS Renjith Singh Rajendran Syncfusion Team October 21, 2020 01:25 PM UTC

Hi Ariel, 

We suspect that you are referring to browser page refresh. On full page refresh the components in the current page will be destroyed and re-rendered based on the initial settings available for the corresponding components. So we suggest you to set the initial settings for the components based on your requirement to achieve this scenario when refreshing your page. 

You can render a SfCheckbox based on your required state as checked/Unchecked by setting the @bind-Checked property value. So based on your scenario, we suggest you to apply the @bind-Checked property value of SfCheckbox and based on @bind-Checked value set the Query property value of Grid to render the Checkbox and Grid as like the same before performing full page refresh. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 26, 2020 11:29 PM UTC

Thank you!! 
I want my grid has a editable property. Now, it is a grid shows all the err and warning from my logs.
but people can claim to fix it by put their name down.

Whenever user click Claim button, it means they can claim to fix this issue, and therefore a pop up shows up 


I would like to be something like this, where shows the info in this column but also "Owner" drop down where they can pick their name


After they pick their name, Owner will change to the name they enter
I also need to catch this into and put into my database

Thank you so much!!
Let me know if you are not clear with my question

RS Renjith Singh Rajendran Syncfusion Team October 27, 2020 10:57 AM UTC

Hi Ariel, 

Query : I also need to catch this into and put into my database 
We suspect that you would like to fetch the edited changes when clicking the save button from edit dialog. If so, then we suggest you to use the Action events of Grid. You can use OnActionComplete event of Grid. You can get the edited data values in the “args.Data” of this event handler by checking for the RequestType as Save. 

Please refer the codes below, 

 
<GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 
 
public void OnActionBegin(ActionEventArgs<Order> args) 
{ 
    if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) 
    { 
        //In args.Data  you will get the edited data
    } 
} 



Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 27, 2020 07:11 PM UTC

I have trouble figuring out how to make a dialog first, by clicking claim button(you can see from my picture), then you have a pop up with a drop down where you can select you name. after that you can either save or cancel. 

then I want to replace the claim button with the name the user selected and store that info


RS Renjith Singh Rajendran Syncfusion Team October 28, 2020 09:35 AM UTC

Hi Ariel, 

We have prepared a sample based on this requirement, please download the sample form the link below, 
 
References : 

We suggest you to use the Dialog Template editing feature of Grid. Based on the button click, you can call StartEdit() method, to open the edit dialog with Dropdown. Now based on the RequestType value in OnActionBegin event handler, we have updated the variables(DropdownValue, ClaimPrimaryValue). These variable will be used in rendering the Template column to display either button or dropdown value text. 

 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Height="315">    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">        <Template>            @{                var Order = (context as Order);                <div>                    <div class="form-row">                        <div class="form-group col-md-6">                            <label class="e-float-text e-label-top">ShipCountry</label>                            <SfDropDownList ID="ShipCountry" @bind-Value="@(Order.ShipCountry)" TItem="Order" TValue="string" DataSource="@Orders">                                <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>                            </SfDropDownList>                        </div>                    </div>                </div>            }        </Template>    </GridEditSettings>    <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>    <GridColumns>        ...        <GridColumn HeaderText="Owner" Width="150" AllowEditing="false">            <Template>                @{                    var a = context as Order;                }                @*Based on the variables render the template column value*@                @if (DropdownValue != "" && a.OrderID.ToString() == ClaimPrimaryValue)                {                    @DropdownValue;                         }                else                {                    <button @onclick="() => OnClick(a.OrderID)">Claim</button>                }            </Template>        </GridColumn>    </GridColumns></SfGrid> @code{    public List<Order> Orders { get; set; }    SfGrid<Order> Grid;    public string DropdownValue = "";    public string ClaimPrimaryValue = "";    public async Task OnClick(int? PrimaryValue)    {        var index = await Grid.GetRowIndexByPrimaryKey(PrimaryValue);  //Get the row index        await Grid.SelectRow(index);   //Select a row        await Grid.StartEdit();        //Open edit dialog    }    public void OnActionBegin(ActionEventArgs<Order> args)    {        //Based on RequestType assign the value for variables        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save))          {            DropdownValue = args.Data.ShipCountry;            ClaimPrimaryValue = args.Data.OrderID.ToString();        }        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Cancel))        {            DropdownValue = "";            ClaimPrimaryValue = "";        }    }    ...}

We suggest you to refer the above sample, codes and use this suggestion based on your requirement. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan October 28, 2020 11:42 PM UTC

Hi! 

It worked as how I wanted for One Data Grid (SFGrid).
However mine is like several datagrid generated by for loop.
foreach (.....)
{

          @ref="Grid" DataSource="@Orders" AllowPaging="true" Height="315">
         
             ....
          }

so I got error as the ref will always changing to refer to the latest one. How should I make it work in my cases? Thanks!

RS Renjith Singh Rajendran Syncfusion Team October 29, 2020 02:07 PM UTC

Hi Ariel, 

When creating components by repeated iteration inside foreach loop, we suggest you to fetch the ref variable in a List. Later, use that particular ref value of that particular Grid component to call the corresponding component’s methods. We have found a general link regarding this, please find the link below, 

Please refer and use as like the code below, 

 
<GridColumn HeaderText="Owner" Width="150" AllowEditing="false"> 
        <Template> 
            @{ 
                var a = context as OrdersDetails; 
            } 
            @*Based on the variables render the template column value*@ 
            @if (DropdownValue != "" && a.OrderID.ToString() == ClaimPrimaryValue) 
            { 
                @DropdownValue; 
            } 
            else 
            { 
                //We have added a new field as GridNumber to place a numbering for the rendered Grid's 
                <button @onclick="() => OnClick(a.OrderID, day.GridNumber)">Claim</button>        
            } 
        </Template> 
    </GridColumn> 
</GridColumns> 

List<SfGrid<OrdersDetails>> ComponentRefs = new List<SfGrid<OrdersDetails>>();SfGrid<OrdersDetails> ComponentRef{    set { ComponentRefs.Add(value); }}
public async Task OnClick(int? PrimaryValue, int GridRef)     //GridRef is the newly added GridNumber field value {    var index = await ComponentRefs[GridRef].GetRowIndexByPrimaryKey(PrimaryValue);  //Get the row index    await ComponentRefs[GridRef].SelectRow(index);   //Select a row    await ComponentRefs[GridRef].StartEdit();        //Open edit dialog}
protected override void OnInitialized(){    GridData = Enumerable.Range(1, 5).Select(x => new Order()    {        Day = DateTime.Now.AddDays(-x),        GridNumber =  x-1,        Digests = (x > 5)? Enumerable.Range(1, 5).Select(x => new OrdersDetails()        {            ...        }).ToList()    }).ToList();}public class Order{    public DateTime Day { get; set; }    public int GridNumber { get; set; }    public List<OrdersDetails> Digests { get; set; }}

Try the above suggestion from your side and please get back to us if you need further assistance. 

Regards, 
Renjith R 


AT Ariel Tan October 29, 2020 09:48 PM UTC

Hi 
It does not work in my cases as if I add filtering the indicies are no longer valid. The Day attribute  can be unique key for each daily digest.
If it can bind with button. I need a better way to refer to the datagrid. Thanks.
Please modify the below example which is a duplicate of my case.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1925593478 

RS Renjith Singh Rajendran Syncfusion Team October 30, 2020 12:10 PM UTC

Hi Ariel, 

We have analyzed the reported scenario. We have modified the shared sample with the suggestions from previous update for your convenience, please download the sample from the link below, 
 
We have applied the suggestion from our previous update in the above attached sample. And also, we have used display:none style to hide the unwanted Grid during searching in SfTextBox instead of previously suggested way. Please refer the codes below and modify your codes for hiding the unwanted Grid after searching, 

 
      <div class="row"> 
            @foreach (var day in GridData) 
            { 
                ... 
                var hidden = ""; 
                if (flag) 
                { 
                    hidden = ""; 
                } 
                else 
                    hidden = "display:none"; 
            <div style=@hidden> 
                <h5 style="padding-top: 25px;">@day.Day.ToString("yyyy-MM-dd")</h5> 
 
                <SfGrid @ref="@ComponentRef" DataSource="@day.Digests" AllowPaging="true" Query="@QueryData"> 
                    ... 
                </SfGrid> 
            </div> 
             flag = true; 
            } 
        </div> 


Please refer the above attached sample and try the suggested solution from your side, and kindly get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan November 3, 2020 04:34 AM UTC

Hi 

I got a very strange error when click on my claim button:

blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
    at e.send (blazor.server.js:1)
    at e.sendMessage (blazor.server.js:1)
    at e.sendWithProtocol (blazor.server.js:1)
    at e.send (blazor.server.js:1)
    at blazor.server.js:8
    at Object.t.dispatchEvent (blazor.server.js:8)
    at blazor.server.js:8
    at e.onEvent (blazor.server.js:8)
    at e.onGlobalEvent (blazor.server.js:8)

First of all, I have 
<Syncfusion.Blazor.Grids.GridColumn Field=@nameof(DigestViewModel.ChangeNumber) IsPrimaryKey="true" HeaderText="Change"  TextAlign="TextAlign.Left" Width="150"> </Syncfusion.Blazor.Grids.GridColumn>

Then <button @onclick="() => OnClick(a.ChangeNumber, day.GridNumber)">Claim</button>

and I did modify this a little as I used string as key

public async Task OnClick(string PrimaryValue, int GridRef)
{
var index = await ComponentRefs[GridRef].GetRowIndexByPrimaryKey(PrimaryValue);  //Get the row index
await ComponentRefs[GridRef].SelectRow(index);   //Select a row
await ComponentRefs[GridRef].StartEdit();        //Open edit dialog
}


Some how I think .GetRowIndexByPrimaryKey(PrimaryValue) does not work in my case 
Here is my data structure

public ImmutableList<DigestViewModel> Digests { get; set; }

DigestViewModel has several fields include ChangeNumber which is a string. 
I don't understand why in my case, I was unable to GetRowIndexByPrimaryKey.


RS Renjith Singh Rajendran Syncfusion Team November 4, 2020 12:13 PM UTC

Hi Ariel, 

We tried to reproduce the reported problem, by using string typed value for primary key column. But we could not face the reported problem with the sample from our side. We are attaching the sample for your reference. Please download the sample form the link below, 
 
We are not clear about the exact scenario you are facing this reported problem. On analyzing the shared error detail, we suspect that this might be occurred because of some other problem with your application. So could you please check this from your side, and if you still face difficulties, then the following details would be helpdul for us to proceed further. 
  1. Share the exact scenario or proper replication procedure.
  2. Share a simple issue reproducing sample. This would be helpful for us to proceed further based on your scenario.
  3. Or if possible, reproduce the problem with the above attached sample and share with us for further analysis.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Note : Also ensure to maintain unique value for your primary key column. 
 
Regards, 
Renjith Singh Rajendran 


AT Ariel Tan November 9, 2020 11:17 PM UTC

Hi,

In my case, the code work fine with IIS Express build, where user can edit the datagrid. 
However if I do publish, any sort of edit seems are disabled. I got error like below.
I wonder how to solve this problem, is it related to certain configuration settings when I do publish?

Failed to reconnect to the server


blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
    at e.send (blazor.server.js:1)
    at e.sendMessage (blazor.server.js:1)
    at e.sendWithProtocol (blazor.server.js:1)
    at e.send (blazor.server.js:1)
    at blazor.server.js:8
    at Object.t.dispatchEvent (blazor.server.js:8)
    at blazor.server.js:8
    at e.onEvent (blazor.server.js:8)
    at e.onGlobalEvent (blazor.server.js:8)


RS Renjith Singh Rajendran Syncfusion Team November 12, 2020 02:56 AM UTC

Hi Ariel, 

We are not clear about the exact scenario you are facing this reported problem. Kindly get back to us with the following details for better assistance. 

  1. Share the details of any other exception you have faced in browser console.
  2. Share a video demo showing the replication of the reported problem.

And also we suggest you to bind the “OnActionFailure” event to Grid. This event will be triggered for every failure in Grid. Please share the details you get in the “args” of this event handler for further analysis.  
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith Singh Rajendran 


AT Ariel Tan January 14, 2021 11:28 PM UTC

Question if I have two grid events, I found that the second one does not work anymore?

<GridEvents OnActionBegin="ActionBegin" TValue="DigestViewModel"></GridEvents>
<GridEvents RowDataBound="RowDataBound" TValue="DigestViewModel"></GridEvents>

What should I do if I need them both?

RS Renjith Singh Rajendran Syncfusion Team January 15, 2021 07:06 AM UTC

Hi Ariel, 

You can bind multiple events to Grid by using a single GridEvents tag as like the below code. Please refer and use the below code to add multiple events to Grid. 

 
<GridEvents OnActionBegin="OnActionBegin" RowDataBound="RowDataBound" TValue="OrdersDetails"></GridEvents> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan January 22, 2021 10:08 PM UTC

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="DialogParams">
<Template>
@{
var Order = (context as DigestViewModel);
<div class="form-row">
<div class="form-group col-md-6">
<SfTextBox ID="ChangeNumber" @bind-Value="@(Order.ChangeNumber)" Enabled="false" FloatLabelType="FloatLabelType.Always" Placeholder="Change Number"></SfTextBox>
</div>
</div>

<div class="form-row">
<div class="form-group col-md-12">
<SfTextBox ID="Status" @bind-Value="@(Order.Status)" Enabled="false" FloatLabelType="FloatLabelType.Always" Placeholder="Current Status"></SfTextBox>
</div>
</div>

<div class="form-row">
<div class="form-group col-md-12">
<SfTextBox ID="Owner" @bind-Value="@(Order.Owner)" FloatLabelType="FloatLabelType.Always" Placeholder="Assign to"></SfTextBox>
</div>
</div>

<div class="form-row">
<div class="form-group col-md-12" style="width: 100%; height: 10%;">
<SfTextBox ID="Comments" @bind-Value="@(Order.Comments)" FloatLabelType="FloatLabelType.Always" Placeholder="Comments"></SfTextBox>
</div>
</div>
}
</Template>
</GridEditSettings>


How can make this part under DataGrid a separate component. 

I tried <Dialog Order = @"Order">  putting the rest under Dialog component, but it shows err under Order.ChangeList

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="DialogParams">
<Template>
@{
var Order = (context as DigestViewModel);
                                 <Dialog Order = @"Order">  </Dialog>
                              }

          public DigestViewModel Order {get; set;}

RS Renjith Singh Rajendran Syncfusion Team January 25, 2021 10:07 AM UTC

Hi Ariel, 

We tried reproducing the reported problem by creating a sample based on the shared scenario. But we could not face any problem with the sample from our side. We are attaching the sample for our reference. 
 
We are not clear about the exact scenario or the problem you are facing. Kindly refer the above sample and if your are still facing difficulties, kindly share with us the following details for better assistance. 

  1. Share with us a video or screenshot showing the problem you are facing.
  2. Share with us a simple issue reproducing sample for us to validate.
  3. Share a detailed description of the problem you are facing.
  4. Share the exact scenario or proper replication procedure.

And also we suggest you to open new tickets for any new queries, for better follow ups. 

Regards, 
Renjith R 


AT Ariel Tan January 25, 2021 11:56 PM UTC

Hi 

How can I create a new page and direct to that page when a data is clicked. 

For example :

when this line 25386 is clicked 

It will directed to this page with all the info associate with this data (and able to commute back and forth)





thanks!!

RS Renjith Singh Rajendran Syncfusion Team January 26, 2021 06:33 AM UTC

Hi Ariel, 

You can achieve this requirement using Column Template feature of Grid. We have already documented this topic. Please refer the below documentation for more details, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AT Ariel Tan February 4, 2021 12:38 AM UTC

I have a buildhealth datagrid which has column {Change, Author, Description}


How can I double click on a row and it will link to the detail page which I already have the function 
but don't know where should the onclick or similar thing goes in data grid.

In other words, when a row got double clicked, then it goes to the new page with detailed info

private void Navigate(BuildHealthRecord bh)
{
UriHelper.NavigateTo($"/builddigests/{bh.Change.ToString()}");
}

VN Vignesh Natarajan Syncfusion Team February 4, 2021 05:36 AM UTC

Hi Ariel,  
 
Query: “How can I double click on a row and it will link to the detail page which I already have the function” 
 
From your query we understand that you want to navigate to another page while double clicking a record. We suggest you to achieve your requirement using OnRecordDoubleClick event of the Grid. In the event argument we can access the clicked record details. We have already documented this topic in our UG documentation.  
 
Kindly refer the below documentation fir your reference 
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


AT Ariel Tan February 4, 2021 11:08 PM UTC

Hi I have a question about grouping 
This is what my datagrid showing, order by date desc



However, after I group 


The group result does not show in my original data grid order

How can I group stuffs but still keep my order?

RS Renjith Singh Rajendran Syncfusion Team February 5, 2021 10:50 AM UTC

Hi Ariel, 

By default, when performing grouping in a column the ascending direction sorting will be applied for that column. We could see that you would like to apply Descending direction sorting for the Date column when perform grouping for that column. 

We suggest you to call the SortColumn method in OnActionComplete event to achieve this requirement. Please refer and use the codes below, 

@using Action = Syncfusion.Blazor.Grids.Action
 
<GridEvents OnActionComplete="OnActionComplete" TValue="Order"></GridEvents> 
<GridColumns>    ...    <GridColumn Field=@nameof(Order.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn></GridColumns>public async Task OnActionComplete(ActionEventArgs<Order> args){    if (args.RequestType.Equals(Action.Grouping) && args.ColumnName == "Title")    {        await grid.SortColumn("Title",SortDirection.Descending);    }}


Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon