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. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. getSelectedRecords()[0] sometimes returns null while using my grid structure

getSelectedRecords()[0] sometimes returns null while using my grid structure

Greetings. My grid structure is explained in the image included in the 7z file. 

The fact is that every entity contained in the grid structure, as outlined in the image, contains another list (ListaAttributi). This list is shown in a grid contained in a pop-up dialog
when the user press the button on the corresponding row (each row in this grid structure, main, child1, child2, or sub child 2, has a "detail" button). 

As explained below, retriving this "ListaAttributi" from master grid always work. 

PROBLEM1: Retriving this "ListaAttributi" from Child1 and Child2 works sometimes (if more than 1 master row is expanded, sometimes getSelectedRecords()[0] function returns undefined). 

PROBLEM2: I just don't know how to retrieve the currently selected row in the subchild grid of child grid 2.

I included the full .cshtml of the page with the hierarchical grid (MainGrid.cshtml) and the partialview which is rendered inside the ejDialog (_DettaglioAttributi.cshtml).
Just ignore the first tab of the main tabcontrol in MainGrid.cshtml which has nothing to do with this, I'm only concerned with the hierarchical grid defined in the second tab.



@* DIALOG FORPER FASI/WIPS/LAVORAZIONI/MOVIMENTI*@
@{Html.EJ()
    .Dialog("dialogDetailAttributi")
    .Title("Dettaglio Attributi")
    .Height("50%")
    .Width("50%")    
    .ShowOnInit(false)
    .ActionButtons(new List<string>() { "close" })
    .ContentTemplate(@<div>
        @{Html.RenderPartial("_DettaglioAttributi");}
    </div>
    )
    .Render();
}

   //FOR MAIN GRID DETAILS
   function onClickFasiDettaglioAttributi(args) { 
        var obj = $("#GridFasi").ejGrid("instance");

        var currentRowData = obj.getSelectedRecords()[0]; //<---THIS ISTRUCTION, WHICH RETRIVES THE DATASOURCE FOR THE MAIN GRID ALWAYS WORK

        openListaAttributiDialog(currentRowData.ListaAttributi);
    }

    //FOR CHILD 1 GRID DETAILS
    function onClickWipsDettaglioAttributi(args) { 
        var obj = $("#detailGridWips").ejGrid("instance");

        var currentRowData = obj.getSelectedRecords()[0]; //<--- THIS INSTRUCTION DOESN'T ALWAYS WORK, ESPECIALLY IF MORE THAN ONE ROW IN THE MAIN GRID IS EXPANDED, SOMETIMES IT RETURNS UNDEFINED

        openListaAttributiDialog(currentRowData.ListaAttributi);
    }

    //FOR CHILD 2 GRID DETAILS
    function onClickLavorazioniDettaglioAttributi(args) { 
        var obj = $("#detailGridLavorazioni").ejGrid("instance");

        var currentRowData = obj.getSelectedRecords()[0]; //<--- THIS INSTRUCTION DOESN'T ALWAYS WORK, ESPECIALLY IF MORE THAN ONE ROW IN THE MAIN GRID IS EXPANDED, SOMETIMES IT RETURNS UNDEFINED

        openListaAttributiDialog(currentRowData.ListaAttributi);
    }

    //FOR SUBCHILD GRID OF CHILD 2 DETAILS
    function onClickMovimentiDettaglioAttributi(args) { 
        var obj = $("#detailGridLavorazioni").ejGrid("instance").childGrid;

        //HERE I JUST DON'T KNOW HOW TO RETRIEVE THE LIST CONTAINED IN EACH ENTITY OF THE SUBCHILD GRID OF CHILD GRID 2
        
        //openListaAttributiDialog(currentRowData.ListaAttributi);
    }

    function openListaAttributiDialog(dataSource) {
        var gridObj = $("#GridDettaglioAttributi").ejGrid("instance");

        gridObj.dataSource(dataSource);

        $("#dialogDetailAttributi").ejDialog("open");
    }

Attachment: HierarchyGrid2ChildsAndDetailInDialog_bf15b2ba.7z

3 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 4, 2016 10:04 AM UTC

Hi Carlo, 

In the click event of the Unbound coumn’s button, you have created an instance of the respective child Grid based on their ID which is the cause of the problem. In your sample multiple child Grids would render after expanding several records from the Main record and each would have same ID. If each child Grid has same ID, jQuery ID selector will fetch the first element and provide the result and so you may not get the selected records for the current Target or child Grid. 

To avoid this, I suggest to use the following code example and create an instance based on the target element (args.e.target) while clicking the button Unbound column’s button.  

<script> 
    function onClickFasiDettaglioAttributi(args) { 
        var obj = $("#GridFasi").ejGrid("instance"); 
 
        var currentRowData = obj.getSelectedRecords()[0]; 
    } 
 
    function onClickWipsDettaglioAttributi(args) { 
        var obj = $(args.e.target).closest(".e-grid").ejGrid("instance") 
 
        var currentRowData = obj.getSelectedRecords()[0]; 
    } 
 
    function onClickLavorazioniDettaglioAttributi(args) { 
        var obj = $(args.e.target).closest(".e-grid").ejGrid("instance") 
 
        var currentRowData = obj.getSelectedRecords()[0]; 
    } 
</script> 

Also, it is recommended to use unique ID for the detail template Grid rendering. Refer to the following code example. 

<script id="gridFasiTemplate" type="text/x-jsrender"> 
    <div class="tabcontrol" id="Test"> 
          . . . . 
        <div id="gridTabWips{{:Id}}"> 
            <div id="detailGridWips{{:Id}}"> 
            </div> 
        </div> 
        <div id="gridTabLavorazioni{{:Id1}}"> 
            <div id="detailGridLavorazioni{{:Id1}}"> 
            </div> 
        </div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    var data = @Html.Raw(Json.Encode(ViewBag.OrdData)); 
    function expandChildrenGridFasi(e) { 
        var filteredData = e.data["Id"]; 
          . . ..  
        e.detailsElement.find("#detailGridWips" + filteredData).ejGrid({ 
            dataSource: dataWips, 
            recordClick: function (args) {  
                //args.data will retrieve the 
                 
            }, 
                  . . . .  
        }); 
            . . . . 
        e.detailsElement.find("#detailGridLavorazioni" + filteredData).ejGrid({ 
                 . .   
        }); 
          . . . 
    } 
</script> 



You may also use the recordClick event of Grid retrieve the currently selected record from the corresponding Grid. Refer to the following code example and screenshot. 

<script type="text/javascript"> 
    var data = @Html.Raw(Json.Encode(ViewBag.OrdData)); 
    function expandChildrenGridFasi(e) { 
        var filteredData = e.data["EmployeeID"]; 
              . . . .  
        e.detailsElement.find("#detailGridWips").ejGrid({ 
            dataSource: dataWips, 
            recordClick: function (args) {  
                //args.data will retrieve the 
                 
            }, 
                  . . . .  
        }); 
        . . .  
        e.detailsElement.find("#detailGridLavorazioni").ejGrid({ 
               . . . . .. 
            recordClick: function (args) { 
                 
            }, 
            childGrid: { 
                queryString: "", 
                recordClick: function (args) {  
                //args.data will retrieve the 
                 
                }, 
                 . . .  
            }, 
              . . .  
        }); 
    } 
</script> 

 

We have prepared a sample that can be downloaded from the following location. 


Refer to the following Help Documents of recordClick event and other events related to row selection. 


Regards, 
Seeni Sakthi Kumar S. 


CA Carlo May 5, 2016 07:33 AM UTC

Excellent! Problem solved, now it works perfectly! :D Thanks a lot!

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 6, 2016 04:16 AM UTC

Hi Carlo, 

We are happy to hear that your issue has been resolved. 

Get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon