We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Search does not work properly after open Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

142752 Feb 18,2019 10:04 AM UTC Feb 27,2019 08:53 AM UTC JavaScript - EJ 2 7
loading
Tags: Grid
thibault fouillat
Asked On February 18, 2019 10:04 AM UTC

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 [Syncfusion]
Replied On February 19, 2019 05:46 AM UTC

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?
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


thibault fouillat
Replied On February 19, 2019 08:56 AM UTC

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 [Syncfusion]
Replied On February 20, 2019 12:32 PM UTC

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?
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


thibault fouillat
Replied On February 20, 2019 03:52 PM UTC

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 [Syncfusion]
Replied On February 21, 2019 12:23 PM UTC

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
Replied On February 27, 2019 07:57 AM UTC

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 [Syncfusion]
Replied On February 27, 2019 08:53 AM UTC

Hi thibault,  

Thanks for your update.  

Regards,  
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;