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. Canceling DetailsExpand on Grid

Canceling DetailsExpand on Grid

I'm trying to cancel the DetailsExpand event on the grid for records that do not have children.  I took out all of the extra code and just put this in:

    function grid_DetailsExpand(e) {
        e.cancel = true;
    }

And the event is still firing.  How do you cancel the event?  Am I missing something?

Thanks
Eric

3 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 30, 2017 04:14 PM UTC

Hi Eric, 

Thanks for contacting Syncfusion Support. 

We need some additional information to achieve your requirement. Could you please share us the following details given below. 

1. Exact scenario you need to achieve. 

2. Have you used Hierarchy Grid or Detail Template in your sample project. 

3. Do you want to hide the  expand/collapse icon or else you don’t want to expand the Grid when there is no children. 

4. Screenshot/Video about your requirement. 

5. Code example. 

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

Farveen sulthana T 
  


EO Eric Outley August 30, 2017 09:37 PM UTC

I using a Hierarchy Grid.

What I'm trying to accomplish is that if a row doesn't have children, then I don't want the empty row to show (or not have the row to expand). 

See image below:


I would prefer not to display the expand/collapse icon if possible.  

I was calling the DetailsExpand event on the grid and trying to cancel it, but the event never cancels.

    function grid_DetailsExpand(e) {

        e.cancel = true;

    }


Eric


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 5, 2017 04:08 PM UTC

Hi Eric, 

We have achieved your requirement using “rowDataBound”  event of the Grid. In the rowDataBound event of the Grid, we have filtered the child Grid records using Employee ID value.  Also we have hide the expand/collapse icon when there is no data for the child Grid. 

Refer to the API link :- 


Please refer to the code example:- 

<body> 
    <div class="content-container-fluid"> 
        <div class="row"> 
            <div class="cols-sample-area"> 
                <div id="Grid"></div> 
             </div> 
        </div> 
    </div> 
 
    <script type="text/javascript"> 
        var Data = [ 
        { EmployeeID: 0, FirstName: 'VINET', Title: 'SalesRepresentative', Country: 'USA' }, 
        { EmployeeID: 1, FirstName: 'HANAR', Title: 'SalesRepresentative', Country: 'USA' }, 
            .  .  . 
        ]; 
       $(function () { 
            $("#Grid").ejGrid({ 
                dataSource: Data, 
                rowDataBound: "rowdatabound", 
                allowSorting: true, 
                columns: [ 
                       { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, 
                       { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 }, 
                        
                ], 
                childGrid: { 
                    dataSource: window.gridData, 
                    queryString: "EmployeeID", 
                }, 
 
            }); 
        }); 
 
        function rowdatabound(args) { 
            var filter = args.rowData.EmployeeID; 
            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filter), true)); 
            if (data.length == 0) { 
               args.row.find(".e-icon").addClass("e-hide"); 
            } 
        } 
 
    </script> 
</body> 



Regards, 

Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon