Manipulating buttons on the toolbar (or the toolbar itself)...

[onyxplyr]

Good day:

I am trying to display certain buttons on the toolbar depending on the user type that is logged into the application.  More specifically, if a user is an Admin, I would like to show all functions.  If they are a regular user, I would only like to display one function.

Can this be done as the grid is being defined or can it be done once the grid and its parts are defined?

Here is the code...

var obj = {
            width: 1200,
            height: 800,
            wrap: false,
            hwrap: false,
            editable: false,
            showTop: true,
            showBottom: true,
            collapsible: false,
            showHeader: true,
            resizable: true,
            columnBorders: true,
            rowBorders: true,
            flexHeight: false,
            virtualX: false,
            sortable: true,
            numberCell: { show: true },
            filterModel: { mode: "AND", header: true },
            scrollModel: { autoFit: true, pace: 'optimum' },
            selectionModel: { type: 'row', mode: 'single' },
            toolbar: {
                items: [
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-plus',
                            label: ' Add Student ',
                            listeners: [
                              {
                                  "click": function (evt, ui) {
                                      var grid = $(this).closest('.pq-grid');
                                      addStudentRow();
                                  }
                              }
                            ]
                        },
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-close',
                            label: ' Clear Filter ',
                            listeners: [
                              {
                                  "click": function (evt, ui) {
                                      var filter_id = '';
                                      var id = 0;
                                      id = @(Url.RequestContext.RouteData.Values["id"] == null ? 0 : Url.RequestContext.RouteData.Values["id"]);
                                      if( id > 0 ) { filter_id = id; }
                                      var grid = $(this).closest('.pq-grid');
                                      // Clear out the filter criteria fields
                                      var $search_row = $("tr[class='pq-grid-header-search']");
                                      $search_row.find("input[name='SchoolName']").val('');
                                      $search_row.find("input[name='FirstName']").val('');
                                      $search_row.find("input[name='LastName']").val('');
                                      $search_row.find("input[name='Grade']").val('');
                                      $search_row.find("input[name='Suspension']").val('');
                                      $search_row.find("input[name='TotalAbsense']").val('');
                                      $search_row.find("input[name='ExcusedAbsense']").val('');
                                      $search_row.find("input[name='UnExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastTwoWeeksExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastTwoWeeksUnExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastFourWeeksExcusedAbsense']").val('');
                                      $search_row.find("input[name='PastFourWeeksUnExcusedAbsense']").val('');
                                      // Now clear the filters
                                      grid.pqGrid("filter", {
                                          oper: 'replace',
                                          data: [
                                              { dataIndx: 'StudentId', condition: 'contain', value: "" },
                                              { dataIndx: 'HomeSchoolId', condition: 'contain', value: "" },
                                              { dataIndx: 'ServicingSchoolId', condition: 'contain', value: "" },
                                              { dataIndx: 'SchoolName', condition: 'equal', value: "" },
                                              { dataIndx: 'FirstName', condition: 'contain', value: "" },
                                              { dataIndx: 'LastName', condition: 'contain', value: "" },
                                              { dataIndx: 'Grade', condition: 'contain', value: "" },
                                              { dataIndx: 'Suspension', condition: 'contain', value: "" },
                                              { dataIndx: 'TotalAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'ExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'UnExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastTwoWeeksExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastTwoWeeksUnExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastFourWeeksExcusedAbsense', condition: 'contain', value: "" },
                                              { dataIndx: 'PastFourWeeksUnExcusedAbsense', condition: 'contain', value: "" }
                                          ]
                                      });
                                  }
                              },
                            ]
                        },
                        {
                            cls: 'btn btn-default',
                            style: 'padding: 6px',
                            type: 'button',
                            icon: 'ui-icon-document',
                            label: ' Print/Export ',
                            listeners: [
                                {
                                    "click": function (evt) {
                                        $("#grid_students").pqGrid("exportExcel", {url: window.location.origin + "/Home/excel",sheetName: "Student Data" });
                                    }
                                }
                            ]
                        }
                    ]
            },
... (there's a lot more to the grid, just cutting it off at this point to be succinct)

How can I display select toolbar items given a specific condition?  is there If Then logic that can be used (like in the colModel)?

Please advise.

Thanks!

[paramvir]

toolbar is composed of an array of items similar to colModel which is an array of columns.

You can include / exclude the items depending upon the user role during initialization of the grid.

[onyxplyr]

Thank you for the reply.

I am trying to implement the conditional render, but need some guidance on where it should be done.  My initial approach was to use the render method within each toolbar item, but that did not work.  Then I tried to wrap the items in an if statement...also didn't work.

What would be the best approach here?  Forgive my lack of understanding.  Still trying to learn the tool.

Thanks

[paramvir]

var items;
if ( user == 1 ){
  items = items1; //items1 is predefined array of items for user1
}
else{
  items = items2; //items2 is predefined array of items for other users
}

//grid initialization object.
var obj = {
  ..other grid options,
  toolbar: {
    items: items
  }
}

[onyxplyr]

Thanks for the example!  I will be integrating it now.

[paramvir]

Toolbar items can also be changed after initialization followed by call to refreshToolbar method.

https://paramquery.com/pro/api#method-refreshToolbar