[FlexGrid] DataMap selection change

[FlexGrid] DataMap selection change

Posted by: akuniyil on 14 September 2017, 11:14 am EST

• 

  akuniyil

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:14 am EST

  Hi,
  
  I’m using FlexGrid with angularJS. The columns that have data maps (data-map=‘’), how do i add event handlers to notify when the selection changes in the drop down? Can you please point me to a documentation or a fiddle?

  Thanks!

• 

  ashishjindal

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:14 am EST

  Hello,

  You can handle the beginningEdit and cellEditEnded events of the FlexGrid for same. Here is the fiddle: http://jsfiddle.net/oq3yduzu/1/

  Also, you can refer to the following thread discussing similar issue:
  
  http://wijmo.com/topic/flex-grid-and-dropdown-columns/page/2/

  Regards

• 

  akuniyil

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:14 am EST

  Thanks, i am able to capture the change event now. Although, i’m trying to get the Id of the selected item and face a couple of issues at this point.

  What i had before is something like this -
  
  [js]
  
  var listItems = “[‘Australia’, ‘Germany’]”;
  
  gridHtml += ‘’;

  [/js]

  Now i modified it to look like this
  
  [js]
  
  var listItems = [{id: 1, name: ‘India’},{id:2, name: ‘Austria’}];
  
  var map = = new wijmo.grid.DataMap(listItems, “id”, “name”);
  
  gridHtml += '<wj-flex-grid-column data-map="map" binding="id"';
  
  [/js]

  2 issues with this.

  1. Until i put the 'map' variable in scope($scope.map instead of var map), this will not work. And in my case i want to avoid this scope variable.
  2. In the cellEditEnding event, how do i get the 'id' of the selected item instead of the 'display value'?
• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:14 am EST

  Hello

  1. Until i put the ‘map’ variable in scope($scope.map instead of var map), this will not work. And in my case i want to avoid this scope variable.
  
  You have to expose the dataMap to the scope if you want to use it in your AngularJS markup, that's the only way Angular can determine what the dataMap is.
  
  But if you don't want to add the map to the scope, you can use the initialized event for example and assign the dataMap that way. Something like this:
  
  [html]<wj-flex-grid initialized="init(s, e)" ....[/html]
  
  [js]$scope.init = function(s, e) {
    s.columns[0].dataMap = ...
  }[/js]
  
  

  2. In the cellEditEnding event, how do i get the ‘id’ of the selected item instead of the ‘display value’?

  You should use the dataMap's getKeyValue method, passing the display value as the parameter.

  I hope this helps.

• 

  akuniyil

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:14 am EST

  Thanks Bernardo!

  1. I did the assigning part (s.columns[0].dataMap=) in the gridSrcChanged event and it did the trick

  2. I’m trying to get the selected key in the cell edit ending event. How do i access the dataMap at that point?

• 

  akuniyil

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:14 am EST

  Ok i found the answer for this. Thanks for your help on this!!