LIDOR SYSTEMS

Advanced User Interface Controls and Components

Label Editing in TreeView AngularJS

Created: 18 February 2015

By default, item text cannot be edited and in order to change it you need to use some kind of method in your code. Fortunately, TreeView directive has an option to enable editing of item text during run-time. In following sections we will explain how to enable label editing or tree items.

TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

To allow changes to item text during run-time, at first we need to set the value of labelEdit property of TreeView directive to true or using the value of some variable in your application controller. Here how this looks like in code:

$scope.isEditAllowed = true;

<iui-treeview name="{{treeName}}" items="data" label-edit="isEditAllowed"></iui-treeview>

After this is set, you can start the editing process. There are two ways to do this:

  • By clicking on item label using the left mouse button
  • By pressing the ENTER key when item has the input focus

When item is clicked, the edit box will not appear immediately. You need to press and hold the left-mouse button for a short amount of time and then release it, after which the edit box will appear. With keyboard editing, the edit box appears instantly.

This process is accompanied with two events: beforeLabelEdit and afterLabelEdit, which are fired before and after item text is edited using the label editor. By handling these events you can change the outcome of the editing process.

You can add any custom condition you need in your code. For example, by handling the beforeLabelEdit event in your code, you can place a condition which when it’s not fulfilled the edit process will become canceled. Here how this may look like:

$scope.beforeEdit = function(e){

if (e.item.id == '3')

return false;

}

<iui-treeview name="{{treeName}}" items="data" label-edit="true" before-label-edit="beforeEdit(e)"></iui-treeview>

In above code, although editing of item text is enabled, when item with id set to '3' is clicked, the edit process is cancelled and as a result the edit box will not appear. You can also cancel the editing process by pressing the ESCAPE key.

Demonstration above shows how to enable/disable editing of item text during run-time by changing the value of labelEdit property. A complete sample with full source code is available as part of IntegralUI Studio for Web package.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.