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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic value in command column

Thread ID:

Created:

Updated:

Platform:

Replies:

132156 Aug 17,2017 07:39 AM UTC Aug 23,2017 08:33 AM UTC JavaScript 5
loading
Tags: ejGrid
Stefano Capobianco
Asked On August 17, 2017 07:39 AM UTC

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 [Syncfusion]
Replied On 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. 


Stefano Capobianco
Replied On 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

Saravanan Arunachalam [Syncfusion]
Replied On 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. 


Stefano Capobianco
Replied On August 22, 2017 07:40 AM UTC

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

Stefano C.


Saravanan Arunachalam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;