1. Home
  2. Forum
  3. jQuery
  4. How to set visible false for command column if multiple row is selected

How to set visible false for command column if multiple row is selected

How to set visible false for command column if multiple row is selected?

3 Replies 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 2, 2020 02:08 PM UTC

Hi Ravikumar, 

Thanks for contacting Syncfusion Support. 

Query#:- How to set visible false for command column if multiple row is selected? 
 
We have achieved your requirement using RowSelecting event of the Grid. In this event, while selecting multiple rows we have set visibility of the column as false and update the columns using columns method of the Grid. 

Refer to the code example:- 
 
 
<script type="text/javascript"> 
    $(function () { 
        $("#Grid").ejGrid({ 
            // the datasource "window.gridData" is referred from jsondata.min.js 
            dataSource: window.gridData, 
            allowPaging: true, 
             
            selectionType: "multiple", 
            selectionSettings: { selectionMode: ["row"] }, 
 
            columns: [ 
                { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 }, 
                 .     .      . 
               { 
                    headerText: "Manage Records", 
                    commands: [ 
                        { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } }, 
                         
                    ], 
                    isUnbound: true, 
                    width: 130 
                } 
            ], 
           rowSelecting: function (args) { 
                if (this.getSelectedRecords().length) { 
                    var len = this.model.columns.length 
                    for (var i = 0; i < len; i++) { 
                        if (this.model.columns[i].isUnbound) { 
                            var column = args.model.columns[i]; 
                            column.visible = false;  //set visible false 
                             this.columns(column, "update");   //using columns method to change the properties of the column 
                        } 
                    } 
                } 
            }         
         }); 
    }); 
</script> 
 
Refer to the API Link:- 

If we misunderstood your query, please provide detailed Explanation of your requirement so that we will provide response accordingly. 
 
Regards, 
Farveen sulthana T 


RA Ravikumar June 3, 2020 05:02 AM UTC

There are three command buttons in the command column (edit, delete & clear selection). I need to disable/visible false for the Command (edit) if multiple row is selected.
only for the selected row. If the row is unselect then we need to show again. 

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team June 3, 2020 02:15 PM UTC

Hi Ravikumar,  

Query#:-  I need to disable/visible false for the Command (edit) if multiple row is selected. 
only for the selected row. If the row is unselect then we need to show again.  
 
Based on requirement we have enabled and disabled the Edit Commandbutton using rowSelected and rowDeselected events of the Grid. In this events, we have enable and disable the ejButton using enabled and disabled methods of the ejButton. 

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"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                allowPaging: true, 
                 
 
                columns: [ 
                    .  .   .    . 
                   { field: "Verified", headerText: "Verified", editType: ej.Grid.EditingType.Boolean, width: 75 }, 
                    { 
                        headerText: "Manage Records", 
                        commands: [ 
                            { type: "edit", buttonOptions: { text: "Edit" } }, 
                            { type: "delete", buttonOptions: { text: "Delete" } }, 
                            { type: "Undo delete", buttonOptions: { text: "Clear" } }, 
                            { type: "save", buttonOptions: { text: "Save" } }, 
                            { type: "cancel", buttonOptions: { text: "Cancel" } }, 
 
                        ], 
                        isUnbound: true, 
                        width: 130 
                    } 
                ], 
                rowSelected: function (args) { 
                    if (this.getSelectedRecords().length > 1) { 
                        $(args.row).find(".e-unboundcelldiv .e-editbutton").ejButton("disable"); 
                    } 
                    else { 
                        $(args.row).find(".e-unboundcelldiv .e-editbutton").ejButton("enable"); 
                    } 
                }, 
                rowDeselected: function (args) { 
                    $(args.row).find(".e-unboundcelldiv .e-editbutton").ejButton("enable"); 
                } 
            }); 
        }); 
    </script> 
</body> 
 
Refer to API links:- 
 
Regards, 
Farveen sulthana T 



Marked as answer
Loader.
Up arrow icon