PropertySheet and Angular

Webix JS
1

Hi,

I’m considering porting a large Angularized SPA to webix. I have quite a few questions. Here’s the first:

In the code below, I have 2 configuration strings (hash of property/value) which I want to edit using a property view.

I set it up to load either from a config object or via HTML (uncomment either lines 21 or 22 and change the value of loadViaConfig on line 40)

I was expecting to be able to change the value of the sheet’s elements just by changing the object on the scope containing the element hash (wiElements) and having the sheet reflect those changes as per the Angular binding philosophy. I haven’t found a way to do it, so I need to use $$(“sets”).define(“elements”,$scope.wiElements); instead. Am I missing something?

Both implementations differ in how the scrollbar is rendered (or not), and I’m also having trouble with displaying a long text string (note the style element at the bottom of the page .webix_property_value {text-overflow: ellipsis !important; }…which has no effect)

Rather than attaching a bit of code, I could share it on http://snippet.webix.io/ but haven’t found how to get an Angularized app to work there…

So here goes:

2

There was an issue with property sheet, so you need to update the code from the attached package, after that you will be able to use code like next

            <div webix-ui view="property" id="sets" webix-elements="wiElements" webix-data="currentElementStr" scroll="true" height="200" width="300">
            </div>

Which will automatically track and change both data and properties configuration.

The updated code of your sample, can be checked by the next link

Update resolves issue with long text strings as well.

3

The updated package
https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/JLdI4AqZ9XTlcEl/webix.zip

4

Maksim,

Many thanks for the prompt reply!

A couple more issues nonetheless…

  1. The scroll bar still isn’t working for me.
  2. I’ve added an event handler as an HTML tag
    webix-event=“onAfterEditStop = updateTree(id)”

and in the controller:
$scope.updateTree =function(id) {
console.log($scope.currentElement)
}

First, the console output of $scope.currentElement does not reflect the changes made in the editor.
Second, the event is not triggered if I check/uncheck a boolean value.
Lastly, and this is just a query. Is it possible to mix’n match init by config and by HTML tags, e.g.,

and specify the event handlers in the config object? (I tried but it didn’t work)

Note that the editor is “linked” to a tree object and each node contains a property wiData (a hash of property/values) which is assigned to $scope.currentElement when the node item is clicked. This works just fine. Unlike in my previous comment, webix-data=“currentElement” and not webix-data=“currentElementStr” where currentElementStr was a JSON.stringify version of currentElement.

5

Hi Maksim,

Any luck in figuring out why in the TreeView when
webix-event=“onAfterEditStop = updateTree(id)” is triggered
the controller function : $scope.updateTree =function(id) { console.log($scope.currentElement) }
does not show the updated value?

And also why the event is not triggered when a check box is clicked?

Thanks

6

Maksim,

There seems to be a regression problem…I replaced the version you linked to in this thread with latest version of webix and now nothing is showing in my property sheet…

7

Sorry for inconvenience, latest build with fixed regression can be taken from here
https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/YBe6dbSdkr0LuPJ/webix_1.4.2.zip

8

Maksim,

I’m still having a problem with checkbox inputs triggering an “onAfterEdit” event…I have to click many time very close to the box to sometimes get the event to fire…even in webix1.5

9

Inline checkbox doesn’t generate on-EditStart and on-EditStop events, as there is no real editing process here. ( It can generate some edit related event when you are clicking on the empty space near the checkbox - but this behavior is more a bug than a feature )

There is an onCheck event, which will be triggered each time after click on a checkbox.