Hide columns at run-time - Forum - Kendo UI Builder - Progress Community
 Forum

Hide columns at run-time

This question has suggested answer(s)

Hello,

Is it possible to hide columns at run-time and how would I do that?

Best regards,
Bert

All Replies
  • Hello Bert,

    You should be able to use the hideColumn() and showColumn() methods of the Kendo UI Grid:

    docs.telerik.com/.../grid

    docs.telerik.com/.../grid

    You would call the methods from the grid handle.

    What type of view are you using?

    I hope this helps,

    Edsel

  • Hello Edsel,

    I am using both using a grid in a BLANK view or DATA GRID view.

    You are refering to jQuery documentation but Kendo UI Builder for OpenEdge is using Angular.

    Bert

  • Hello Bert,

    Kendo UI Builder 1.1 uses AngularJS 1.5.

    Support for AngularJS is provided by Kendo UI for jQuery.

    Support for Angular 2 / Angular 4 is provided by a different version of Kendo UI: Kendo UI for Angular.

    Links:

    docs.telerik.com/.../introduction

    www.telerik.com/.../angularjs-and-kendo-ui-framework-integration

    www.telerik.com/.../

    I hope this helps,

    Edsel

    ---

    P.S.: The industry convention is now to refer to AngularJS 1.x using "AngularJS" and to the new version of Angular just as "Angular", without using the "JS" suffix.

  • Despite the links you provided I still don't get the following code to work:

    this.scope.model.hideColumn(1);
    
    this.scope._$ds["DataSource1"].hideColumn(1);
  • Hello Bert,

    The hideColumn() method is available from the grid component.

    Depending on the type of view that you are using, you could access the grid from the scope reference or by using angular.element().

    If you are using a view created using the Blank view option, you can get the grid component by using its ID:

    angular.element("#grid0").data("kendoGrid").hideColumn(0);

    If you are using a pre-defined view, you could access the grid from the scope reference or using a the following code:

    angular.element("[kendo-grid='vm.widget']").data("kendoGrid").hideColumn(0);

    Some key here, is that the grid component should be instantiated by the time that you execute this code.

    The onShow event executes prior to the instantiation of the grid.

    Depending on your requirements, you could associate a data bound handler to the grid, use angular.$watch() to determine when the grid is instantiate, or listen to the kendoWidgetCreated event to know when the widget is created.

    Please let me know where do you need to call hideColumn() and can give you a sample.

    I hope this helps,

    Edsel

  • Hello Edsel,

    I managed to hide a column in a Blank view.

    When I search "kendoWidgetCreated" with Google only a few hits are returned. Putting the following code in view-factory.js prevents the module from being shown or it gives an error message that $scope is undefined.

    $scope.$on("kendoWidgetCreated", function(event, widget){
         console.log("kendoWidgetCreated");  
    });

    Without a good reference, being it on the web or a book makes it hard to go forward full speed.

     Can you put me in the right direction?

    Regards,
    Bert

  • Hello Bert,

    It is strange that the code you mentioned would prevent the module from being shown.

    Is the code called from the onShow event handler?

    (If you are using the debugger, the $scope variable should be available if it is referenced in the code.)

    Here is a sample of how the onShow handler would look like:

                   onShow: function($scope, customData) {

                       var that = this;

                       this.scope = $scope;

                       $scope.$on("kendoWidgetCreated", function(event, widget){

                           console.log("DEBUG: $scope: " + $scope);

    console.log("DEBUG: kendoWidgetCreated: " + widget.options.name);

    if (widget.options.name === "Grid") {

       angular.element("#grid0").data("kendoGrid").hideColumn(0);

                           }

                       });

                   },

    Please notice that the code above checks widget.options.name to determine that the grid component is the widget that is being created.

    Here are some few links with references to kendoWidgetCreated:

    - docs.telerik.com/.../global-events

    - community.progress.com/.../29520

    - documentation.progress.com/.../index.html

    The following two samples programs use a different approach to checking for a component being instantiated:

    - oemobiledemo.progress.com/.../GridWithFormJFP

    - oemobiledemo.progress.com/.../form-external-paging

    The 1st sample uses the dataBound event to select the first row on the grid.

    The 2nd sample uses $watch() to check when a combo-box component is instantiated.

    The source code for these sample projects can be found in GitHub:

    - github.com/.../kendo-ui-builder-samples

    I hope this information gets you in the right direction.

    Best regards,

    Edsel