Wijmo 5 Angular - Flexgrid Event Handling

Posted by: juliekirwin on 14 September 2017, 11:09 am EST

    • Post Options:
    • Link

    Posted 14 September 2017, 11:09 am EST

    So am trying to use an event handler on my angular flex grid, but I’m having trouble getting it to work. I tried following some old posts I found, but I think i’m not initializing in the tag correctly. Here is an example of me trying to onCellEditEnded.

    HTML:

    [html]







    [/html]

    Controller:

    [js]

    $scope.onCellEditEnded = function (e) {

    console.log(‘It worked!’);

    };[/js]

    If someone knows the proper way to do this in the Wijmo5 Flexgrid, I would appreciate it!

    Thanks,

    Julie

  • Posted 14 September 2017, 11:09 am EST

    Hi Julie

    To attach any event handlers from the AngularJS markup, you should include the event name and the parameters in parentheses. For example:

    And the event handler should be specified in the controller as usual:

    $scope.cellEditEnded = function (sender, args) {
        alert('thanks for editing cell ' + args.row + ', ' + args.col);
    }
    

    Hope this helps.

  • Posted 14 September 2017, 11:09 am EST

    Yes thank you very much!

  • Posted 14 September 2017, 11:09 am EST

    Hello, having trouble making a new post so I thought I’d tack this on here.

    So I asked about how to use some of the event handlers for the Wijmo 5 Angularjs Flexgrid. Basically what I plan to do is use the onCellEditEnding event to validate and save the changes made.

    I am able to get the old value of the cell no problem, however have had trouble getting the new cell value. I guess really I have three questions…

    1. What is the proper way to get oldValue of a cell and newValue? Is this supported?

    2. I was going to try to use getCellData to get the new value of the cell to compare. I understand how to use event handling methods but what about methods like getCellData? Are they usable with the Angular Flexgrid approach? Would I want to do something like this?

      [js]

      $scope.onCellEditEnding = function (s, e) {

      var newVal = //call getCellData(r, c, formatted);



      };[/js]

    3. Lastly, I have been blowing up your forum with questions that are rather trivial. I apologize. I am familiar with your doc pages http://wijmo.com/5/docs/, but I find the angular section lacking.

    As someone newer to your controls. It’s good to see the methods listed out and what they do in the Angular section, but very frustrating when I have to try to figure out how to use them.

    I know a lot of them are used similarly to each other. Have you thought about putting up someone basic code snippets for noobies like me? Is there a place where I can find a little more detail and examples into Wijmo 5 + Angular?

    Thanks,

    Julie

  • Posted 14 September 2017, 11:09 am EST

    Hello again Julie

    This snippet shows how you can get the old and new values for a cell in the “cellEditEnding” event handler:

    $scope.cellEditEnding = function(sender, e) {
    
        // get old and new values
        var flex = sender,
            oldVal = flex.getCellData(e.row, e.col),
            newVal = flex.activeEditor.value;
    
        // cancel edits if the new value doesn't contain the letter 'a'
        if (newVal.indexOf('a') < 0) {
            e.cancel = true;
        }
    }
    

    You can get the old value using the 'getCellData' method, and the new value using the 'activeEditor' property. If the new value fails validation, you can cancel the edits by setting the e.cancel property to true.

    And here's how to hook up the event handler (same as any other):

    As for your comments, I understand completely. We put a lot of effort in the Wijmo 5 documentation and samples, but there’s always room for improvement, so we will keep improving. And your feedback is a huge help.

    I will add the snippet above to the documentation for the cellEditEnding event, I am sure it will help many users.

    The “FlexGridIntro” sample is the place where we try show how you can perform common tasks. Validation is something that is missing from that sample, I will make a note to add this topic ASAP.

    If you have any other requests or suggestions on how we can improve our documentation, please let me know. This is a very dear topic to me.

    Thanks for helping us improve Wijmo 5.

  • Posted 14 September 2017, 11:09 am EST

    Thank you Bernardo, I appreciate the great support you are providing! If I think of anything else documentation-wise, I will let you know!

  • Posted 14 September 2017, 11:09 am EST

    Hi,

    oldVal = flex.getCellData(e.row, e.col), // This is giving the new value

    newVal = flex.activeEditor.value; // flex.activeeditoor is null

    Is there any other way of getting the old value?

  • Posted 14 September 2017, 11:09 am EST

    Hello,

    I was not able to replicate the issue at my end with the latest version of Wijmo 5 i.e. 2015v3.102. I was able to get the old and new value of the cell by using the following code in the cellEditEnding event of FlexGrid:

    [js]

    oldVal = flex.getCellData(e.row, e.col), // This is giving the new value

    newVal = flex.activeEditor.value; // flex.activeeditoor is null

    [/js]

    Kindly refer to the attached sample which implements the same. You may edit the country column values and observe the output in the console window.

    I would suggest you to test the issue with the latest build of Wijmo 5 i.e. 2015v3.102 which you can download from the following link: http://wijmo.com/products/wijmo-5/.

    Hope it helps. In case the issue still persists, I would request you to modify the attached HTML Page to depict your issue so that I can replicate the issue at my end and debug it further.

    Thanks,

    Manpreet Kaur

    2015/11/OldNewVal.html

  • Posted 14 September 2017, 11:09 am EST

    I had the same problem as Lintu – flex.activeEditor.value was null.

    I was using the wrong event. I was in rowEditEnding instead of cellEditEnding.

  • Posted 25 April 2019, 9:46 am EST

    I am facing problem in cellEditEnded event on dropdownin flexgrid . I have 3 rows. First time for each row Dropdown cellEditEnded work but next time when i move to another row dropdown change event won’t work.

    Can anyone help me.

    Thanks

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels