Dynamic value in command column

[Stefano Capobianco]

Hi support i've a question for you.

This is my egrid:

        $(function () {

            var dataManager = ej.DataManager({

                url: "http://localhost:5110/api/countries",

                adaptor: new ej.WebApiAdaptor()

            });

            var myGrid = $("#Grid").ejGrid({

                dataSource: dataManager,

                isResponsive: true,

                enableResponsiveRow: true,

                showStackedHeader: true,

                allowPaging: true,

                allowSorting: true,

                allowSearching: true,

//                allowResizeToFit: true,

//test

//                templateRefresh: "refreshTemplate",

//end test

                locale: "it-IT",

                sortSettings: { sortedColumns: [{ field: "Id", direction: "ascending" }] },

                toolbarSettings: { showToolbar: true, customToolbarItems: [{ templateID: "#Refresh" }] },

                searchSettings: { fields: ["CountryName"] },

                pageSettings: { pageSize: 2, enableTemplates: true, template: "#template", showDefaults: true },

                actionComplete: 'complete',

                toolbarClick: "clicked",

                dataBound: "databound",

                stackedHeaderRows: [{

                    stackedHeaderColumns:

                    [

                        { headerText: "", column: "Id,CountryName,IstatCode,IsoCode" },

                        { headerText: "Validità", column: "StartDate,EndDate", headerTextAlign: "center" },

                        { headerText: "Azioni", column: "editField,deleteField", headerTextAlign: "center" }

                    ]

                }],

                columns: [

                    { field: "Id", headerText: "Record Id", headerTextAlign: "center" },

                    { field: "CountryName", headerText: "Nazione", headerTextAlign: "center" },

                    { field: "IstatCode", headerText: "Codice Istat", headerTextAlign: "center" },

                    { field: "IsoCode", headerText: "Codice Iso", headerTextAlign: "center" },

                    { field: "StartDate", headerText: "Data Inizio", headerTextAlign: "center" },

                    { field: "EndDate", headerText: "Data Fine", headerTextAlign: "center" },

                    {

                        headerText: "Update",

                        commands: [

                            { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-icon e-edit", click: "EditGrid" } }

                        ],

                        isUnbound: true,

                        width: 100,

                        headerTextAlign: "center",

                        field: "editField"

                    },

                    {

                        headerText: "Delete",

                        commands: [

                            { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-icon e-delete", click: "DeleteGrid" } }

                        ],

                        isUnbound: true,

                        width: 100,

                        headerTextAlign: "center",

                        field: "deleteField"

                    },

                ],

                actionComplete: function (args) {

                    $(".e-pagercontainer.e-template").css('border-style', 'none');

                    if (args.requestType == "refresh")

                        debugger

                    $("#pageSize").ejDropDownList({ 

                        width: 55, value: args.model.pageSettings.pageSize, dataSource: dropData, 

                        change: function (args) { 

                            $("#Grid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } }); 

                        }

                    });

                }

            });

I need to hide the cells in Update and Delete command column when the StartDate field is not null. It's possible ?

Thanks in advance for your help

Stefano Capobianco

[Saravanan Arunachalam]

Hi Stefano, 

Thanks for contacting Syncfusion’s support. 

We understood from your query, you need to disable the command buttons, if the “StartDate” field is not null. We have achieved this requirement by using rowDataBound event of ejGrid. In this event, we have dynamically disabled the commad buttons in the row based on the value of “StartDate” field in the current row. Please refer to the below code example. 

$(function () { 

            $("#Grid").ejGrid({ 

                 . . . 

                rowDataBound: "onRowdataBound", 

            }); 

        }); 

         function onRowdataBound(args){ 

            if(!ej.isNullOrUndefined(args.data.StartDate)){ 

                //Disable the command button, if the StartDate is not null  

                args.row.find(".e-unboundcell").find("button").ejButton("disable"); 

            } 

        } 

 

 

And also refer to the below api reference links. 

https://help.syncfusion.com/api/js/ejbutton#methods:disable  

https://help.syncfusion.com/api/js/ejgrid#events:rowdatabound  

Regards, 

Saravanan A. 

[Stefano Capobianco]

Thanks Saravanan for your response. This solution work very well. It's possible to hide the button and not disable only ?

Other little question. It's possible to enter the stackedHeaderColumns? If you give a look to my grid you can find the centered attribute 

                stackedHeaderRows: [{

                    stackedHeaderColumns:

                    [

                        { headerText: "", column: "Id,CountryName,IstatCode,IsoCode" },

                        { headerText: "Validità", column: "StartDate,EndDate", headerTextAlign: "center" },

                        { headerText: "Azioni", column: "editField,deleteField", headerTextAlign: "center" }

                    ]

                }],

applied to the Stack Header but the result don't correspond to my desire.

Thanks in advance

Stefano Capobianco

[Saravanan Arunachalam]

Hi Stefano, 

Query 1: It's possible to hide the button and not disable only? 

Yes, we can hide the button instead of disable it by adding the class “e-hide” to the button element. Please refer to the below code example. 

function onRowdataBound(args){ 

            if(!ej.isNullOrUndefined(args.data.StartDate)){ 

                //Hide the command button, if the StartDate is not null  

                args.row.find(".e-unboundcell").find("button").addClass("e-hide"); 

            } 

        } 

 

Query 2: applied to the Stack Header but the result don't correspond to my desire. 

We suspect that you have missed to define the showStackedHeader property of ejGrid control. So, please ensure whether you have defined the showStackedHeader property and also refer to the below demo,UG and api reference link, 

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/Columns/StackedHeader  

https://help.syncfusion.com/js/grid/stackedheader  

https://help.syncfusion.com/api/js/ejgrid#members:showstackedheader  

If you want to aling the stacked header text, we suggest you to use the textAlign property instead of headerTextAlign that can be refer from below code example. 

$("#Grid").ejGrid({ 

                . . . 

                showStackedHeader:true, 

                stackedHeaderRows: [{ 

                    stackedHeaderColumns: 

                       [ 

                        { headerText: "", column: "Id,CountryName,IstatCode,IsoCode" }, 

                        { headerText: "Validità", column: "StartDate,EndDate", textAlign: "center" }, 

                        { headerText: "Azioni", column: "editField,deleteField", textAlign: "center" } 

                    ] 

                }], 

                 

            }); 

 

Regards, 

Saravanan A. 

[Stefano Capobianco]

Thanks Saravanan your solution work very well. Thanks for your help

Stefano C.

[Saravanan Arunachalam]

Hi Stefano,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.