Wijmo grid dynamic columns with angular

Question

Can someone guide me on how can I generate dynamic columns using Wijmo grid. I need to generate dynamic columns some of which might be editable and might contain textbox, checkbox or dropdown. I am using Angular.

Anyone has any pointers on how to generate these columns dynamically based on the data received from web api using Angular $http call.

Answer 1

I formed the JSON on web api code ..in required format for data and columns and assigned as below. The Metadata will contain array of column meta data objects.

grid  = $("#wijgrid").wijgrid({
                       editingMode: "row",
                     allowColMoving: true,
                     allowColSizing: true,
                     selectionMode: "none",
                     showFilter: true,
                     allowSorting: true,
                     allowPaging: true,
                     allowEditing: true,
                     beforeCellEdit: onBeforeCellEdit,
                     afterCellEdit: onAfterCellEdit,
                     pageSize: 10,
                     data: $scope.DataRows,
                     columns: $scope.MetaData
                 });

Answer 2

You should create a datasource array in your $scope. Then populate that array from the http call. Lastly, in your view you should set the data option in wijgrid to that scope property. The grid will automatically generate columns that match the data structure of the array (of objects).

Example:

$scope.myData = [];

$scope.loadData = function () {
    //call angular $http
    $scope.myData = result;
}

//on init load Data
loadData();

Markup

<wij-grid data="myData"></wij-grid>

If you want better editors, you need to assign the dataType of each column that you want to have a specific data type. This is not done when the grid is auto-generating columns. You would have to loop through the first record in the results to figure out the data type. If the results are always the same (which it sounds like they aren't) you can define the column in markup.

<wij-grid data="myData">
    <columns>
        <column data-key="ID" data-type="number"></column>
        <column data-key="StartDate" data-type="datetime"></column>
        <column data-key="Active" data-type="boolean"></column>
    </columns>
</wij-grid>