1

I am using wijgrid component in angular js there I got the problem that unable to perform click events on it.in wijgrid html components are not compiled , find the html code

<wij-grid  id = "dataGrid" allow-sorting="true" data="data" columns-autogeneration-mode="none" allow-paging="true" >
  <columns>
     <column data-key="name" header-text="Name"></column>
     <column data-key="address" header-text="Address" ></column>
     <column data-key="submit" header-text="Submit"></column>
   </columns>
</wij-grid>

and my angular js code 

$http.get(url,data).success(
        loadData);  

function loadData(responseData) {
if (responseData != null) {
    var data = responseData;
    for (index = 0; index < data.length; index++) {
        data[index].address =   data[index].addressLineOne+","+data[index].addressLineTwo;                                  
        $SubmitBtn  = "<a href='javascript:void(0);ng-click='submitCode("+data[index].reviewId+",true)'>Approve</a>";   data[index].submit=$ASubmitBtn;                                     
    }
    $scope.data = data;
    $("#content").wijtabs();
  }
}    
$scope.submitCode= function(id, status) {
alert(id+" "+status)
}

HERE submit code function is not calling and in view source the function is showing with id and status.. which means it is not compiling in wijgrid module please help me to provide the solution. I tried to compile code $compile($sumitBtn)($scope) but it doesnt works , please suggest me s0lution

Community
  • 1
  • 1
Satish
  • 537
  • 2
  • 9
  • 21

2 Answers2

1

Wijmo is aware of this issue and says it's a known bug. The workaround I'm using is this:

  $scope.cellStyleFormatter = function(args) {
  if ((args.row.type & wijmo.grid.rowType.data) && (args.row.state & wijmo.grid.renderState.rendering)) {
        var content = args.$cell[0].innerHTML;
        //Here I have button html already in my grid data, using 
        //'my-link-class' css
        if(content.indexOf("my-link-class") > -1) {
            var scope = angular.element("#grid-container").scope();
            args.$cell
                .empty()
                .append($(content).click(function () {
                    scope.myControllerClickHandler();
                })
            );
        }
        return true;
    }
    };

And I declare my grid like so:

    <wij-grid  data="template.model.content" allow-editing="false" cellStyleFormatter="cellStyleFormatter">
      <columns>
        <column dataKey="col_0" ></column>
      </columns>
    </wij-grid>

I am using cellStyleFormatter above because I can apply it globally to the whole grid. You can use cellFormatter if you know the column ahead of time (my application has variable number of columns so this wasn't an option for me). You would reference args.container instead of args.$cell if using cellFormatter.

Here is a link to wijmo's explanation: http://wijmo.com/topic/wig-grid-with-angularjs-how-to-handle-click-on-a-link-in-a-cell/

Sammie Edwards
  • 111
  • 1
  • 4
  • Hi Edwards, Thanks for your reply, I tried this example previosly which works only for static data.. but in this case I am getting data Dynamically and uses call event functions with reviewId. I am unable to use cellFormater and cellStyleFormatter in this case,Please suggest me anyother way to use this.. – Satish Nov 25 '13 at 05:25
  • You mean you're changing the data during runtime? My data also comes from a remote service, but I am updating the $location.path for every update which causes the controller to reload and re-instantiate the grid, which is the same as destroying and recreating the wij-grid. Also if it's not too late for your project to abandon wijmo, that is probably the best course. – Sammie Edwards Nov 26 '13 at 19:50
0

I got the solution using cellformatter method there i changed the code according to my requirement

$scope.formatter = function(args) {
if(args.row.dataRowIndex < 0 ) 
return false;
args.$container
.html($compile(
args.formattedValue)
($scope));
return true;    
}
Satish
  • 537
  • 2
  • 9
  • 21