Hide columns at run-time

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