1. Home
  2. Forum
  3. jQuery
  4. Dynamic value in command column

Dynamic value in command column

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

5 Replies
SA Saravanan Arunachalam Syncfusion Team August 18, 2017 06:56 AM UTC

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. 
Regards, 
Saravanan A. 


SC Stefano Capobianco August 18, 2017 07:56 AM UTC

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

SA Saravanan Arunachalam Syncfusion Team August 21, 2017 05:57 AM UTC

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, 
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. 


SC Stefano Capobianco August 22, 2017 07:40 AM UTC

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

Stefano C.


SA Saravanan Arunachalam Syncfusion Team August 23, 2017 08:33 AM UTC

Hi Stefano,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


Loader.
Up arrow icon