ChildGrid Refresh

[Fernando]

Hello,

I have a grid with two childgrid levels. And at the last level (GridEvidencias) I have a template command that fires this DeleteClick event (#btnExcluir). And this event will delete a row. How do I update only this childgrid? Because the way I did it in the example below is not working.

Thanks

Fernando

@{
    var EvidenciaChildGrid = new Syncfusion.EJ2.Grids.Grid()
            {
                Id = "GridEvidencias",
                QueryString = "LojaUnidadeId",
                Width = "900px",
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="UsuarioUpload", HeaderText="Usuário", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DataUpload", Format="dd/MM/yyyy", HeaderText="Data Upload", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Descricao", HeaderText="Descrição", Width="300" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="NomeArquivo", HeaderText="Arquivo", Width="200" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Template="#btnExcluir", TextAlign=TextAlign.Center, Width="50" },
                }
            };
}


@{
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
            {
                ChildGrid = EvidenciaChildGrid,
                DetailDataBound = "detailDataBoundEvidencia",
                AllowSelection = false,
                Height = "150px",
                Width = "100%",
                Locale = "pt",
                QueryString = "VistoriaId",
                AllowFiltering = true,
                FilterSettings = new GridFilterSettings { Type = FilterType.Excel },
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="NomeLoja", HeaderText="Galeria", Width="190" }       
        }
            };
}

<ejs-grid id="GridGalerias" detailDataBound="detailDataBound" allowSelection="false" allowTextWrap="true" childGrid="ChildGrid" locale="pt" toolbarClick="toolbarClick" gridLines="Both" locale="pt" allowfiltering="true" height="300" allowPaging="true" toolbar="@(new List<string>() { "Search" })">
    <e-data-manager url="@Url.Action("GridGalerias_Read","Galerias")"
                    adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>
    <e-grid-columns>
        <e-grid-column field="Nome" headerText="Bandeira" type="string" width="100"></e-grid-column>     
    </e-grid-columns>
</ejs-grid>


<script type="text/x-template" id="btnExcluir">
    <img src="https://www.gestorbsv.com.br/basesav/images/delete.png" style="cursor: pointer;" onclick="ExcluirClick(${Id})" alt="Detalhes">
</script>

<script>
    function ExcluirClick(id) {
        if (confirm("Tem certeza que deseja excluir este item?")) {
            $.ajax({
                url: "@Url.Action("ExcluirEvidencia", "Galerias")/" + id,
                type: "POST",
                success: function (data) {
                    var subGrid = $("#GridEvidencias").ej2_instances[0];
                    subGrid.refresh();
                },
            });
        }
    }
</script>

[Aishwarya Rameshbabu]

Hi Fernando,

Greetings from Syncfusion support.

Upon reviewing your query and the provided code example, we observed that you are utilizing a two-level hierarchy in the Syncfusion Grid. You wanted to delete a row by clicking the template cell of the row, but you are encountering an issue with this process.

Please ensure that you are obtaining the correct instance of the childGrid to call the refresh method after deleting the data and verify that one of the columns is designated as the primary key column.

Refer to the code example below, as well as the attached sample and video demonstration, which illustrate how to delete a record in the childGrid of the Syncfusion Grid via a button click event rendered as a template in the Grid column.

Index.cshtml

    function ExcluirClick(event) {

        // Getting the childGrid Instance using the event.target

        var subchildIns = ej.base.closest(event.target, '.e-grid').ej2_instances[0];

        // Getting the rowObject

        var rowObj = subchildIns.getRowObjectFromUID(ej.base.closest(event.target, '.e-row').getAttribute('data-uid'));

        // Getting the Key to delete

        var key = rowObj.data.ContactName;

        subchildIns.dataSource = subchildIns.dataSource.filter(obj => obj.ContactName !== key);

        setTimeout(function () {

            subchildIns.refresh();

        }, 100);

    }

 

Sample and Vide demonstration: please find in the attachment.

If the issue persists, please provide detailed information about the problem you are facing, along with a video demonstration. Additionally, if possible, share a simple sample that replicates the issue or attempt to replicate it in the attached sample.

Regards

Aishwarya R

Attachment: 194732SampleAndVideo_ce18dc14.zip

[Fernando]

Hi,

Thank you, it worked. I just made a small adjustment because there was an error with dataSource.filter. This way, it worked perfectly.

<script>
        function ExcluirClick(event) {
            if (confirm("Tem certeza que deseja excluir este item?")) {
                 // Obtendo a instância do childGrid usando o event.target
        var subchildIns = ej.base.closest(event.target, '.e-grid').ej2_instances[0];


        // Obtendo o objeto da linha
        var rowObj = subchildIns.getRowObjectFromUID(ej.base.closest(event.target, '.e-row').getAttribute('data-uid'));

        // Obtendo a chave para exclusão
        var key = rowObj.data.Id;
        console.log(key);

        // Realizando a requisição AJAX para excluir o item
        $.ajax({
            url: "@Url.Action("ExcluirEvidencia", "Galerias")/" + key,
            type: "POST",
            success: function (data) {
                // Após sucesso, atualizando o dataSource do grid
                subchildIns.dataSource.executeQuery(new ej.data.Query()).then(function (result) {
                    // Filtrando os dados para remover o item excluído
                    var filteredData = result.result.filter(obj => obj.Id !== key);


                    // Atualizando o dataSource com os dados filtrados
                    subchildIns.dataSource = new ej.data.DataManager(filteredData);


                    // Atualizando o grid
                    setTimeout(function () {
                        subchildIns.refresh();
                    }, 100);
                }).catch(function (error) {
                    console.error("Erro ao carregar os dados do DataManager:", error);
                });
            },
            error: function (xhr, status, error) {
                console.error("Erro ao excluir o item:", error);
            }
        });
    }
            }
</script>

[Rajapandi Ravi]

Fernando,

We are happy to hear that the issue has been resolved. Please get back to us if you need any other assistance.

[Fernando]

Hi Rajapandi,

In this third-level grid, I included an ActionComplete event to trigger on the update command and refresh only this subgrid. However, when I update the "Recebido" field, the "DataRecebimento" field gets populated with the correct information, but it doesn't become visible immediately after the update—only after a full refresh.

How can I improve this script?

Thanks!

@{
    var EvidenciaChildGrid = new Syncfusion.EJ2.Grids.Grid()
            {
                Id = "GridEvidencias",
                QueryString = "LojaUnidadeId",
                Width = "100%",
                Locale = "pt",
                ActionComplete="onCrudAction",
                EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowEditing = true },
                Toolbar = new List<string>() { "Add", "Edit", "Cancel", "Update" },
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="UsuarioUpload", AllowEditing=false, HeaderText="Usuário", Width="150" },           
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "Recebido", HeaderText = "Recebido", DisplayAsCheckBox = true, EditType = "booleanedit", TextAlign=TextAlign.Center, Width="70" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "DataRecebimento", AllowEditing = false, Format = "dd/MM/yyyy HH:mm", HeaderText = "Data Receb", Width = "150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "UsuarioRecebimento", AllowEditing = false, HeaderText = "Usuário Receb", Width = "150" },
        }
            };
  <script>
   function onCrudAction(e) {
       if (e.requestType === 'save') {
      }
   }
</script>

[Rajapandi Ravi]

Fernando,

Thanks for your update

Based on your query, we could see that you are using actionComplete event to update command when you update the "Recebido" field, the "DataRecebimento" field gets populated with the correct information, but it doesn't become visible immediately after the update. However, the provided information is insufficient for us to understand your requirement on our end. To assist you better, we request the following details for further clarification:

1)     Share the code information about using actionComplete event, how you are updating the "Recebido" field and "DataRecebimento" field.

2)     Share your exact requirement and use case scenario about this requirement with detailed description.

3)     Share the issue scenario in video demonstration format.