customtoolbaritem upon condition

[Juan Jose Uribe]

Hi, 

I have a grid with a customtoobaritem defined. What i want to do is that the button in toolbar be conditional, I mean that show this item in toolbar depending on a variable value that i have in "result.permission" which i took from ajax call result. 

My code by now is:

<div id="ListaClientes"></div>

<script id="Add" type="text/x-jsrender">

    <a class="e-icon e-addnew" />

</script>

<script>

    $(document).ready(function () {

        $.ajax({

            url: "/cliente/TraeClientes?idPais=" + localStorage.getItem("codigoPais") ,

            type: "GET",

            cache: true,

            success: function (result) {

                debugger;

                $("#ListaClientes").ejGrid({

                    dataSource: result.lista,

                    columns: [

                        { headerText: "", template: "<a title='Modificar' id='modificarClienteHref' rel='nofollow' href='/cliente/modificar/{{:IdClientes}}'><span class='e-icon e-edit'></span></a>" },

                        { field: "IdClientes", visible: false, isPrimaryKey : true },

                        { field: "DocumentoTipo" , headerText : "Tipo Doc.", width :"5em" },

                        { field: "Documentonumero", headerText : "Nro. Doc.", width :"10em" },

                        { field: "Nombre", headerText : "Nombre", width : "15em" },

                        { field: "Ciudad", headerText : "Ciudad", width : "10em" },

                        { field: "Direcccion", headerText : "Dirección", width : "10em" },

                        { field: "Telefono", headerText : "Teléfono", width : "10em" },

                        { field: "ClienteEstado", headerText : "Estado", width : "10em" }

                    ],

                    locale: "es-CO",

                    allowScrolling : true,

                    isResponsive : true,

                    allowPaging : true,

                    allowSearching : true,

                    allowSorting: true,

                    toolbarSettings: {

                        showToolbar: true,

                        toolbarItems: [ej.Grid.ToolBarItems.Search],

                        customToolbarItems: [{ templateID: "#Add"}]

                    },

                    toolbarClick: "nuevoCliente"

                });

            },

            error: function (jqXHR, textStatus, error) {

                NotyAviso('error', error, false, true, false, true);

            }

        });

    })

</script>

[Thavasianand Sankaranarayanan]

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to enable or disable the custom toolbar items based on the result.Permissions values. 

In the below code example we have disable the custom toolbar item when result.customtool value is true. 

<script type="text/javascript"> 

    $(function () { 

        $.ajax({ 

            url: "/Grid/FormalRender", 

            type: "POST", 

            success: function (result) { 

                 

                $("#Grid").ejGrid({ 

                    dataSource: result.data, 

                    columns: [ 

 

                       ---- 

 

                    ], 

                    //  locale: "es-CO", 

 

                      --- 

 

                    toolbarSettings: { 

                        showToolbar: true, 

                        toolbarItems: [ej.Grid.ToolBarItems.Search], 

                        customToolbarItems: [{ templateID: "#Add" }] 

                    }, 

                     

                }); 

                if (result.customtool) { 

                    //Gets the ToolBar. 

                    var $toolbar = $("#Grid_toolbarItems"); 

                    ////Gets the tool  

                    var li = $("#Grid_Add"); 

                    $toolbar.ejToolbar("disableItem", li); 

                } 

            }, 

 

             --- 

 

        }); 

         

    }); 

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/136653/ze/SyncfusionMvcApplication13_(5)-818185309.zip 

We have already discuss about the above mention query in the following knowledge base documentation. 

KB link: https://www.syncfusion.com/kb/5450/how-to-disable-or-enable-toolbar-items-in-the-grid 

  

Regards, 

Thavasianand S. 

[Juan Jose Uribe]

Hi,

Yes, I could achieve what I wanted. However, now I want to hide a column upon the same condition received from the ajax call, so I did this:

$.ajax({

            url: "/cliente/TraeClientes?idPais=" + localStorage.getItem("codigoPais"),

            type: "GET",

            cache: true,

            success: function (result) {

                permisoModificar = result.puedeModificar;

                $("#ListaClientes").ejGrid({

                    dataSource: result.lista,

                    columns: [

                        { headerText: "Edit", template: "<a title='Modificar' id='modificarClienteHref' rel='nofollow' href='/cliente/modificar/{{:IdClientes}}'><span class='e-icon e-edit'></span></a>" },

                        { field: "IdClientes", visible: false, isPrimaryKey: true },

                        { field: "DocumentoTipo", headerText: "Tipo Doc.", width: "5em" },

                        { field: "Documentonumero", headerText: "Nro. Doc.", width: "10em" },

                        { field: "Nombre", headerText: "Nombre", width: "15em" },

                        { field: "Ciudad", headerText: "Ciudad", width: "10em" },

                        { field: "Direcccion", headerText: "Dirección", width: "10em" },

                        { field: "Telefono", headerText: "Teléfono", width: "10em" },

                        { field: "ClienteEstado", headerText: "Estado", width: "10em" }

                    ],

                    locale: "es-CO",

                    allowScrolling: true,

                    isResponsive: true,

                    allowPaging: true,

                    allowSearching: true,

                    allowSorting: true,

                    toolbarSettings: {

                        showToolbar: true,

                        toolbarItems: [ej.Grid.ToolBarItems.Search],

                        customToolbarItems: [{ templateID: "#Add" }]

                    },

                    toolbarClick: "nuevoCliente"

                });

                if (!result.puedeCrear) {

                    var $toolbar = $("#ListaClientes_toolbarItems");

                    var li = $("#ListaClientes_Add");

                    $toolbar.ejToolbar("disableItem", li);

                    $("#ListaClientes").ejGrid("hideColumns", "Edit");

                }

                

            },

            error: function (jqXHR, textStatus, error) {

                NotyAviso('error', error, false, true, false, true);

            }

        });

The result I´ve got is the column hidden (which is ok) but, the button in the toolbar does not appear disabled!!. If I remove the line $("#ListaClientes").ejGrid("hideColumns", "Edit");  then the button in the toolbar is disabled.

How can I get the two things at the same time?

[Thavasianand Sankaranarayanan]

Hi Juan, 

We have analyzed your query and we are able to reproduce the reported issue “disabled toolbar item get enabled after using the hideColumns method”. In our previous update we have disabled the toolbar items externally so we suggest you to disable the toolbar items after the columns get hided to avoid the reported issue. 

Refer the below code example. 

<script type="text/javascript">  

    $(function () {  

        $.ajax({  

            url: "/Grid/FormalRender",  

            type: "POST",  

            success: function (result) {  

                  

                $("#Grid").ejGrid({  

                    dataSource: result.data,  

                    columns: [  

  

                       ----  

  

                    ],  

                    //  locale: "es-CO",  

  

                      ---  

  

                    toolbarSettings: {  

                        showToolbar: true,  

                        toolbarItems: [ej.Grid.ToolBarItems.Search],  

                        customToolbarItems: [{ templateID: "#Add" }]  

                    },  

                      

                });  

                if (result.customtool) {  

                            var gridObj = $("#Grid").data("ejGrid"); 

                    gridObj.hideColumns("Employee ID"); // hide the columns in Grid then disable the custom toolbar items. 

                    //Gets the ToolBar.  

                    var $toolbar = $("#Grid_toolbarItems");  

                    ////Gets the tool   

                    var li = $("#Grid_Add");  

                    $toolbar.ejToolbar("disableItem", li);  

                }  

            },  

  

             ---  

  

        });  

          

    });  

</script>  

Regards, 

Thavasianand S. 

[Juan Jose Uribe]

Oh yes, it is working now. Thanks so much.

[Thavasianand Sankaranarayanan]

Hi Juan, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.