How to set column freeze in a Wijmo Grid dynamically ?

Question

I can set the static row or column index by adding hard coded index value, but if the user wants to choose the column how can we do it using knockout js. Currently I have set the static column index but I want the users to be able to choose the column to freeze.

var viewModel= function () {
        var self = this;           
        self.data = ko.observableArray([]);            
        self.recordCount = ko.observable(0);
        self.lowTotNoOfRec = ko.observable(0);
        self.pageSize = ko.observable(10);
        self.pageIndex = ko.observable(0);          
        self.paged = function (e, data) {
            self.pageIndex(data.newPageIndex);
        };
        self.staticColumnIndex = -1;

}.

score 2 · Answer 1 · answered Jun 22 '15 at 16:12

Assuming you created a custom binding handler to set up your grid:

<table data-bind="wijgrid:gridConfig"></table>

And your gridConfig includes an observable for staticColumnIndex:

self.gridConfig = {
    //...other configuration stuff...
    staticColumnIndex: ko.observable(-1)
};

Then the init of the custom binding handler can subscribe to changes on staticColumnIndex and update the value for the grid:

ko.bindingHandlers.wijgrid = {
    init: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var options = valueAccessor() || {};
        var grid = $(element).wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowPaging: true,
            pageSize: options.pageSize(),
            data: options.data(),
            columns: options.headers,
            scrollMode: "auto"
        });
        options.staticColumnIndex.subscribe(function (newValue) {
            grid.wijgrid({
                staticColumnIndex: newValue
            });
        });
    }
};

Demo: http://jsfiddle.net/pvo4mk3c/

PS: It looks like once you have a freeze column indicator on the graph, you can drag it back and forth. The observable is not affected by those changes in my demo.

How to set column freeze in a Wijmo Grid dynamically ?

1 Answers1