Search does not work properly after open Dialog

[thibault fouillat]

Hello,

I found a bad behavior in Javascript Grid component.

I have a grid with a lot of records, not filtered and not sorted.

1/ I make a search, I can write my entire word. That's ok.

2/ On my records, click on one of them and open in Edit with a Dialog component.

3/ Quit the Dialog, and clear the search. Try to write another word in search but I can write only one letter before the grid gets focus and prevent writing. 

I need to click again in the search bar for every letter I need to write.

I'm using Syncfusion 16.4.0.53. This issue does not happen when I don't select any row between the different searches.

If you need, I can send a gif to show you the behavior.

Regards,

[Pavithra Subramaniyam]

Hi Thibault, 

 

Greetings from Syncfusion. 

 

Query : Quit the Dialog, and clear the search. Try to write another word in search but I can write only one letter before the grid gets focus and prevent writing 

 

We have analyzed your query but we are unable to reproduce the reported issue at our end. Please provide the below information for us to analyze this issue further and provide a better solution as soon as possible, 

 

1. Are you performing any action using keydown event in the grid?
2. Please share the full grid code sample?
3. Share the video demo of the issue reproducing in your sample?
4. Please try to reproduce the reported issue in the below provided sample?

 

Sample: https://stackblitz.com/edit/cytymk-hphbgc?file=package.json  

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[thibault fouillat]

Hello,

1/ I don't perform any action using keydown event during the issue but we have a function attached to the event:

document.getElementById("FlatGrid").addEventListener('keydown', function (e) {

     if (e.keyCode == 13 && document.activeElement.id != "FlatGrid_searchbar") {

          onGridClickDetails();

     }

});

2-3/ Can't send you an attached file, dialog tell me it's ok but nothing is sent. You can get my zip file here: https://fzip.li/OZFr

4/ Can't reproduce the issue on your sample. We don't use TypeScript and our columns are created dynamically.

Regards

[Pavithra Subramaniyam]

Hi Thibault, 

 

Greetings from Syncfusion. 

 

Query : I don't perform any action using keydown event during the issue but we have a function attached to the event 

 

We have analyzed your query but we are unable to reproduce the reported issue at our end. Please provide the below information for us to analyze this issue further and provide a better solution as soon as possible, 

 

1. How do you perform the search operation on grid while key press? Share the code sample?
2. Share the full grid code sample even for creating dialog component?
3. Share the event(e) details when a key is pressed and focus is lost in the function used to perform search operation in grid?
4. Please try to reproduce the reported issue in the below provided sample?

 

Sample: https://stackblitz.com/edit/8svqgl-sdwcjp?file=index.js  

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S. 

[thibault fouillat]

Hello,

1/ As shown in the last message. The search is performed on the "input" event (look in gridOperations.js -> function changeSearchLoader(nameGrid))
Below the searchInGrid(nameGrid) method :

function searchInGrid(nameGrid) {

    var value = document.getElementById(nameGrid + '_searchbar').value;

    var grid = document.getElementById(nameGrid).ej2_instances[0];

    grid.search(value);

    grid.clearSelection();

}

2/ Below the grid toolbar button method to edit a row element:

function onGridClickDetails(sender, gridName, tableOrFamillyId, nameFamilleLien, isTable) {

    //POUR IE

    if (gridName === undefined)

        gridName = "FlatGrid";

    //else {

    //    offsetX += 20;

    //    offsetY += 40;

    //}

    var loader = false;

    if (tableOrFamillyId === undefined) {

        tableOrFamillyId = $('.titleFamilly').attr('data-tableorfamillyid');

        loader = true;

    }

    var secondForm = false;

    if (nameFamilleLien === undefined)

        nameFamilleLien = null;

    else

        secondForm = true;

    if (isTable === undefined)

        isTable = $('.titleFamilly').attr('data-istable');

    

    var destModal = "destinationModalVisuUpadte" + tableOrFamillyId;

    tabIdElement.push(destModal);

    //Permet de destroy et de vider le html de la modal si elle existe déjà

    if (document.getElementById("destinationModalVisuUpadte" + tableOrFamillyId) != null) {

        var dialog = document.getElementById("destinationModalVisuUpadte" + tableOrFamillyId).ej2_instances[0];

        dialog.destroy();

        $("#destinationModalVisuUpadte" + tableOrFamillyId).remove();

    }

    

    // récupération de l'objet de la grille

    var gridObject = $.extend(true, {}, document.getElementById(gridName).ej2_instances[0]);

    if (gridObject.getSelectedRecords().length === 1) {

        var data = gridObject.getSelectedRecords()[0];

        var idElem = data.IDEL;

        // Récupère l'index de la ligne sélectionnée

        rowSelected = gridObject.getSelectedRowIndexes()[0];

        //Afficher le loader

        //tester si on est sur une grille des liens ou principale

        if (loader === false)

        {       

            $("#destinationModalLink" + $("#updateTableOrFamillyId").val()).prepend('<div id="loaderUpdateLink" style="margin:30%" class="loader-download loader-centerd-screen text-center"></div>');

        } else {

            $("#loaderElement").removeClass("hidden");

        }

        getModalInformations(tableOrFamillyId, isTable, gridObject, gridName, data, idElem, secondForm);

    }

}

3/  I don't understand what you want.

4/ Can't reproduce the issue on your sample (again). 

Regards

[Pavithra Subramaniyam]

Hi thibault, 

 

Thanks for your update. 

 

We have created a new incident #228689 under your account regarding the query related to Grid searching. Please follow that incident for more updates. 

 

Regards, 

Pavithra S. 

[thibault fouillat]

Hi,

For those who may have a similar issue, I solve it by modifying my databound method.

Below my solution :

function dataBound(nameGrid, rowSelectedGridModal) {

    var search = document.getElementById(nameGrid + "_searchbar");

    if (document.activeElement !== search) {

        if (rowSelectedGridModal === undefined)

            rowSelectedGridModal = rowSelected;

        if (rowSelectedGridModal !== -1) {

            document.getElementById(nameGrid).ej2_instances[0].selectionModule.selectRow(rowSelectedGridModal);

        }

    }

    changeSearchLoader(nameGrid);

}

Regards

[Pavithra Subramaniyam]

Hi thibault,  

Thanks for your update.  

Regards,  

Pavithra S.