Toolbar items and settings created dynamically

[Juan Jose Uribe]

Hi, 

I have a grid and I need to create buttons in toolbar according to some data read from server and stored in a viewbag var. So, the code I use to create the grid is:

<script type="text/javascript">

    $(document).ready(function () {

        var dataManager = ej.DataManager({

            url: "/api/contratotipo?idPais=" + localStorage.getItem("codigoPais"),

            adaptor: new ej.WebApiAdaptor()

        });

        $("#ListaContratoTipo").ejGrid({

            dataSource: dataManager,

            columns: [

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

                { field: "ContratoTipo1", headerText: "Tipo contrato", validationRules: { required: true } },

                { field: "IdUsuarioCrea", visible: false },

                { field: "FechaCrea", visible: false },

                { field: "IdUsuarioActualiza", visible: false },

                { field: "FechaActualiza", visible: false },

                { field: "TemplatePDF", visible: false },

                { field: "Habilitado", headerText: "Habilitado", editType: "booleanedit" },

                { field: "IdPais", visible: false },

            ],

            endAdd: "jsActualizaGrilla",

            endEdit: "jsActualizaGrilla",

            actionBegin: "confirmaEdicion",

            actionComplete: "complete",

            locale: "es-CO",

            isResponsive: true,

            allowPaging: true

        });

    })

</script>

I create this function to create the toolbar:

function CreateToolbarUponProfile(nombreGrid) {

        var listaPermisos = $("#permisosGrilla").val().split(',');

        valorAllowAdding = false;

        valorAllowEditing = false;

        toolbarAdding = "";

        toolbarEditing = "";

        for (i = 0; i < listaPermisos.length; i++) {

            if (listaPermisos[i] == "crear") {

                valorAllowAdding = true;

                toolbarAdding = "add";

            }

            if (listaPermisos[i] == "modificar") {

                valorAllowEditing = true;

                toolbarEditing = "edit";

            }

        }

        if (listaPermisos.length > 0) {

            $("#" + nombreGrid).ejGrid({

                editSettings: { allowAdding: valorAllowAdding, allowEditing: valorAllowEditing, editMode: ej.Grid.EditMode.Dialog },

                toolbarSettings: { showToolbar: true, toolbarItems: [toolbarAdding, toolbarEditing] }

            })

        }

    }

Is it the correct way to do what I want?

Where should I call this function? I mean, in which action of the grid (create, complete, etc) should I call the function?

[Kuralarasan Muthusamy]

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we found that you want to render the toolbar items dynamically by using the viewBag values. We have achieved your requirement by using load event of the Grid. 

Please refer the following code snippet: 

Client side: 

 

<script type="text/javascript"> 

    $(function () { 

         

            $("#Grid").ejGrid({ 

 

                  ...... 

 

                load: "load",              

            }); 

        }); 

    var data = @Html.Raw(Json.Encode(ViewBag.value)) 

    function load(args) { 

        this.model.toolbarSettings.showToolbar = data[0].showToolbar; 

        this.model.toolbarSettings.toolbarItems = data[0].toolbarItems; 

        this.model.editSettings.allowEditing = data[0].allowEditing; 

        this.model.editSettings.allowAdding = data[0].allowAdding; 

        this.model.editSettings.allowDeleting = data[0].allowDeleting; 

    } 

</script> 

 

 

Controller Side: 

 

namespace WebAPI.Controllers 

{ 

    public class HomeController : Controller 

    { 

        public static List<Orders> order = new List<Orders>(); 

        public ActionResult Index() 

        { 

            if (order.Count == 0) 

                Bindvalue(); 

            ViewBag.value = order; 

            return View(); 

        } 

        public void Bindvalue() 

        { 

            List<string> list = new List<string>(); 

            list.Add("add"); 

            list.Add("edit"); 

            list.Add("delete"); 

            list.Add("update"); 

            list.Add("cancel"); 

 

            order.Add(new Orders(true, false, false, true, list)); 

        } 

    } 

} 

 

In this code we have rendered the grid toolbar items by using load event and we have used viewBag values to enable and disable toolbar items in Grid. We have also prepared the sample with your requirement and that sample can be downloadable from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/F138694200093449.zip 

Refer the following link to know about load event of the Grid: 

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

Please get back to us, If you need any further assistance on this, 

Regards, 

Kuralarasan M.