custom grid editor plugin how to submit and clear a form - Developing Packages

Bo Jacobsen 606 posts 2404 karma points

Sep 06, 2016 @ 13:58

Custom grid editor plugin. How to submit and clear a form.

Hello Everyone.

I am lost here. I am trying to make some custom Grid Editor Plugin... But i cant get the form to submit or clear it self.

What i wanna do is type in some text and then add it to the control.value and empty the form.

What i got is this.

@Using Umbraco version 7.5.2

angular.module("umbraco").controller("myPluginController", function ($scope) {
    $scope.addOnSubmit = function (test) {
        $scope.control.value.push(test);
    }
});

<div ng-controller="myPluginController">
    <form ng-submit="addOnSubmit(test)">
        <input type="text" class="umb-editor umb-textstring textstring" ng-model="test.topText"  />
        <input type="text" class="umb-editor umb-textstring textstring" ng-model="test.botText" />
        <button type="submit" class="btn-primary">Add</button>
    </form>
</div>

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 06, 2016 @ 14:24

Try:

angular.module("umbraco").controller("myPluginController", function($scope) {
    $scope.addOnClick= function (test) {
        $scope.control.value.push({ topText: $scope.topText, botText: $scope.botText});
        $scope.topText="";
        $scope.botText="";
    }
});

<div ng-controller="myPluginController">
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="topText"  />
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="botText" />
    <button type="submit" class="btn-primary" ng-click="addOnClick">Add</button>
</div>

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 06:56

Then it saves the whole page.

And if i try to predefine the textfields, it wont let me.

angular.module("umbraco").controller("myPluginController", function ($scope) {

    $scope.topText = "Top";
    $scope.botText = "Bot";

    $scope.addOnClick = function (test) {
        $scope.control.value.push({ topText: $scope.topText, botText: $scope.botText });
        $scope.topText = "";
        $scope.botText = "";
    }
});

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 07:15

Sorry, I left it has a submit rather than a button. Below also makes sure that value is an array and the ng-init directive on the text fields sets initial values.

angular.module("umbraco").controller("myPluginController", function($scope) {

    $scope.control.value = $scope.control.value || [];

    $scope.addOnClick= function (test) {
        $scope.control.value.push({ topText: $scope.topText, botText: $scope.botText});
        $scope.topText="";
        $scope.botText="";
    }
});

<div ng-controller="myPluginController">
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="topText" ng-init="topText='asdf'"  />
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="botText" ng-init="botText='qwer'" />
    <button type="button" class="btn-primary" ng-click="addOnClick">Add</button>
</div>

EDIT (for future reference): ng-click="addOnClick" should be ng-click="addOnClick()"

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 10:25

Nothing happens when i press the button.

angular.module("umbraco").controller("myPluginController", function($scope) {

    $scope.control.value = $scope.control.value || [];

    $scope.addOnClick= function () {
        $scope.control.value.push({ topText: $scope.topText, botText: $scope.botText});
        $scope.topText="";
        $scope.botText="";
    }
});

<div ng-controller="myPluginController">
    <p>{{control.value}}</p>
    <p>{{topText}} | {{botText}}</p>
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="topText" ng-init="topText='asdf'"  />
    <input type="text" class="umb-editor umb-textstring textstring" ng-model="botText" ng-init="botText='qwer'" />
    <button type="button" class="btn-primary" ng-click="addOnClick">Add</button>
</div>

/* The values i get from p tags is: */
<p>[]</p>
<p>asdf | qwer</p>

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 10:44

Sounds like it is just your ng-click that isn't working then try changing it to ng-click="addOnClick()"

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 12:40

Your code works well :)

I found my issue..

I use multiple gridEditors. And somehow there is trouble if i add 2 controllers to the same package manifest. So if i remove MyPlugin2.Controller.js, it all works as it should.

{
    gridEditors: [
        {
            name: "MyPlugin1",
            alias: "MyPlugin1",
            view: "~/App_Plugins/MyPlugins/.../MyPlugin1.html",
            render: "~/App_Plugins/MyPlugins/.../MyPlugin1.cshtml",
            icon: "icon-pictures-alt-2"     
        },
        {
            name: "MyPlugin2",
            alias: "MyPlugin2",
            view: "~/App_Plugins/MyPlugins/.../MyPlugin2.html",
            render: "~/App_Plugins/MyPlugins/.../MyPlugin2.cshtml",
            icon: "icon-article"
        }
    ],
    javascript: [
            "~/App_Plugins/MyPlugins/.../MyPlugin1.Controller.js",
            "~/App_Plugins/MyPlugins/.../MyPlugin2.Controller.js",
            "~/App_Plugins/MyPlugins/.../Language.Controller.js",
            "~/App_Plugins/MyPlugins/.../UmbMediaPicker.Controller.js"
    ],
    css: [
        "~/App_Plugins/MyPlugins/.....Layout.min.css"
    ]
}

Bonus question. Do you know how to add controllers to both plugins whitout issue?

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 12:45

I've added multiple controllers to the package manifest just like you have. I assume you don't have this in both JS files?

angular.module("umbraco").controller("myPluginController", function($scope) {
    ...
}

rather it should be:

angular.module("umbraco").controller("myPluginController1", function($scope) {
    ...
}
angular.module("umbraco").controller("myPluginController2", function($scope) {
    ...
}

I'm guessing it isn't as simple as that.

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 12:50

Should they be in the same file or just 2 seperate?

I got it in 2 seperatefiles like this.

/* ~/App_Plugins/MyPlugins/.../MyPlugin1.Controller.js */
angular.module("umbraco").controller("MyPlugin1Controller", function ($scope) {
    ...
});

/* ~/App_Plugins/MyPlugins/.../MyPlugin2.Controller.js */
angular.module("umbraco").controller("MyPlugin2Controller", function ($scope) {
    ...
});

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 13:04

Separate, as you have them, is how I have it but it shouldn't matter. The Umbraco built in controllers are all in the same file.

Do you get any kind of console error?

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 13:38

No. i dont get any console errors.

I got a console.log(media) that i removed in my UmbMediaPicker.Controller.js, and that is not gettin updated either.

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 13:47

Well all I can suggest is that you add in the JS/HTML bit by bit to try to work out where the conflict is. You can add in as many JS files as you like, which don't need to be related to grid editors so start with a blank JS file I suggest.

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 07, 2016 @ 13:49

Thank you for your help.

I just outcommented the clientDependency in the web.config. That seemed to work.

    <urlrewritingnet configSource="config\UrlRewriting.config" />
    <microsoft.scripting configSource="config\scripting.config" />
    <!--<clientDependency configSource="config\ClientDependency.config" />-->
    <Examine configSource="config\ExamineSettings.config" />
    <ExamineLuceneIndexSets configSource="config\ExamineIndex.config" />
    <log4net configSource="config\log4net.config" />

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 07, 2016 @ 14:30

Really? That's weird. My best guess is that there was something in your JS which was preventing minification.

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Sep 08, 2016 @ 10:17

No.. I was wrong again... I just have to outcomment/incomment something in the config file. So it restart. A line break is not enough...

But still no console error.

Copy Link

David Peck 690 posts 1896 karma points c-trib

Sep 08, 2016 @ 12:48

And nothing in /App_data/logs/ ?

Copy Link

is working on a reply...

Flag this post as spam?

Custom grid editor plugin. How to submit and clear a form.