New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem with checkbox column #292

Open
jptcnde opened this Issue Oct 14, 2014 · 4 comments

Comments

Projects
None yet
4 participants
@jptcnde

jptcnde commented Oct 14, 2014

Checkbox column is duplicated everytime it is loaded in second attempt, other grid on the same context also adding its checkbox column. Here's the scenario, all grids are inside jquery ui tab. Each tab panel is generated from template (not remote tab). The 'grid columns' (not sure if this is the cause) inside the first tab was populated dynamically. When an action is clicked inside the grid in the 1st tab, 2nd tab will be generated with its grid. On first load, it is fine, but after i closed the 2nd tab and generate it again, all checkbox column on each grid are incremented. Please help

@jptcnde

This comment has been minimized.

Show comment
Hide comment
@jptcnde

jptcnde Oct 14, 2014

Additional details below. I've found that everytime I add new column, checkbox column is also added. Is there any better way?

options
, colLogSheetDetailGridOptions = {
columnDefs: ko.observableArray([
{ field: 'name', displayName: 'Detail Name' }
])
, data: colLogSheetDetailList.items
, footerVisible: false
//, displaySelectionCheckbox: true
, multiSelect: true
, jqueryUITheme: true
, disableTextSelection: false
, rowTemplate: koGridRowTmpl
}

// Methods
detailChannelColumnDefs = owner.colLogSheetDetailGridOptions.columnDefs;
//detailChannelColumnDefs.splice(1, detailChannelColumnDefs().length);
detailChannelColumnDefs.removeAll();
detailChannelColumnDefs.push({ field: 'name', displayName: 'Detail Name' });

        $.each(channels, function (i, item) {
            detailChannelColumnDefs.push({
                field: item.code
                , displayName: item.code
                , cellTemplate: '<div data-bind="with: function(){' +
                    'var entity = $parent.entity[\'' + item.code + '\'];' +
                    'entity.id = \'' + item.id + '\';' +
                    'return entity;' +
                    '}">' + colLogDetailTxKoGridCell + '</div>'
            });
        });

jptcnde commented Oct 14, 2014

Additional details below. I've found that everytime I add new column, checkbox column is also added. Is there any better way?

options
, colLogSheetDetailGridOptions = {
columnDefs: ko.observableArray([
{ field: 'name', displayName: 'Detail Name' }
])
, data: colLogSheetDetailList.items
, footerVisible: false
//, displaySelectionCheckbox: true
, multiSelect: true
, jqueryUITheme: true
, disableTextSelection: false
, rowTemplate: koGridRowTmpl
}

// Methods
detailChannelColumnDefs = owner.colLogSheetDetailGridOptions.columnDefs;
//detailChannelColumnDefs.splice(1, detailChannelColumnDefs().length);
detailChannelColumnDefs.removeAll();
detailChannelColumnDefs.push({ field: 'name', displayName: 'Detail Name' });

        $.each(channels, function (i, item) {
            detailChannelColumnDefs.push({
                field: item.code
                , displayName: item.code
                , cellTemplate: '<div data-bind="with: function(){' +
                    'var entity = $parent.entity[\'' + item.code + '\'];' +
                    'entity.id = \'' + item.id + '\';' +
                    'return entity;' +
                    '}">' + colLogDetailTxKoGridCell + '</div>'
            });
        });
@markdreyer

This comment has been minimized.

Show comment
Hide comment
@markdreyer

markdreyer May 13, 2016

I have this issue as well. Seems to be when columnDefs config is observable. The buildColums method will add the checkbox column, even if it has already been added (which is likely since it is subscribed to the columnDefs observable):

//FILE: ..\src\classes\grid.js

self.buildColumns = function () {
    var columnDefs = self.config.columnDefs,
        cols = [];

    if (!columnDefs) {
        self.buildColumnDefsFromData();
        columnDefs = self.config.columnDefs;
    }
    if (self.config.displaySelectionCheckbox && self.config.canSelectRows) {
        columnDefs.splice(0, 0, {
            field: '\u2714',
            width: self.elementDims.rowSelectedCellW,
            sortable: false,
            resizable: false,
            headerCellTemplate: '<input class="kgSelectionHeader" type="checkbox" data-bind="visible: $grid.multiSelect, checked: $grid.allSelected"/>',
            cellTemplate: '<div class="kgSelectionCell"><input class="kgSelectionCheckbox" type="checkbox" data-bind="checked: $parent.selected" /></div>'
        });
    }

//FILE: ..\src\bindingHandlers\ko-grid.js

        if (ko.isObservable(options.columnDefs)) {
            options.columnDefs.subscribe(function (newDefs) {
                grid.columns([]);
                grid.config.columnDefs = newDefs;
                grid.buildColumns();
                grid.configureColumnWidths();
            });
        }

I have this issue as well. Seems to be when columnDefs config is observable. The buildColums method will add the checkbox column, even if it has already been added (which is likely since it is subscribed to the columnDefs observable):

//FILE: ..\src\classes\grid.js

self.buildColumns = function () {
    var columnDefs = self.config.columnDefs,
        cols = [];

    if (!columnDefs) {
        self.buildColumnDefsFromData();
        columnDefs = self.config.columnDefs;
    }
    if (self.config.displaySelectionCheckbox && self.config.canSelectRows) {
        columnDefs.splice(0, 0, {
            field: '\u2714',
            width: self.elementDims.rowSelectedCellW,
            sortable: false,
            resizable: false,
            headerCellTemplate: '<input class="kgSelectionHeader" type="checkbox" data-bind="visible: $grid.multiSelect, checked: $grid.allSelected"/>',
            cellTemplate: '<div class="kgSelectionCell"><input class="kgSelectionCheckbox" type="checkbox" data-bind="checked: $parent.selected" /></div>'
        });
    }

//FILE: ..\src\bindingHandlers\ko-grid.js

        if (ko.isObservable(options.columnDefs)) {
            options.columnDefs.subscribe(function (newDefs) {
                grid.columns([]);
                grid.config.columnDefs = newDefs;
                grid.buildColumns();
                grid.configureColumnWidths();
            });
        }
@steph4nc

This comment has been minimized.

Show comment
Hide comment
@steph4nc

steph4nc Aug 19, 2016

This is a really old issue, but I had the same problem. There is no check to see if the select column is already added to the front, every time buildColumns is called.

So I fixed my version by changing this if in self.buildColumns:
if (self.config.displaySelectionCheckbox && self.config.canSelectRows) {

to the following:
if (self.config.displaySelectionCheckbox && self.config.canSelectRows && (!columnDefs[0] || columnDefs[0].field !== '\u2714')) {

This fixes the symptom.

steph4nc commented Aug 19, 2016

This is a really old issue, but I had the same problem. There is no check to see if the select column is already added to the front, every time buildColumns is called.

So I fixed my version by changing this if in self.buildColumns:
if (self.config.displaySelectionCheckbox && self.config.canSelectRows) {

to the following:
if (self.config.displaySelectionCheckbox && self.config.canSelectRows && (!columnDefs[0] || columnDefs[0].field !== '\u2714')) {

This fixes the symptom.

@dotNetFollower

This comment has been minimized.

Show comment
Hide comment
@dotNetFollower

dotNetFollower Jan 24, 2017

If you don't like changing the 3rd party libraries' source code, here is an alternative way to fix the issue by using custom binding:

ko.bindingHandlers["koGridFixed"] = {
   init: function (element, valueAccessor, allBindingsAccessor, data, context) {
      var gridOptions = ko.utils.unwrapObservable(valueAccessor());
      if (gridOptions && gridOptions.columnDefs) {
         var columnDefsArr = ko.utils.unwrapObservable(gridOptions.columnDefs);
         if (columnDefsArr && columnDefsArr.length > 0 && columnDefsArr[0].field === '\u2714')
            columnDefsArr.splice(0, 1);
      }
 
      return ko.bindingHandlers["koGrid"].init(element, valueAccessor, allBindingsAccessor, data, context);
   }
};

So, just replace all koGrid binding in views with koGridFixed. A bit more details in my blog - koGrid: Bug – Checkboxes column duplication

If you don't like changing the 3rd party libraries' source code, here is an alternative way to fix the issue by using custom binding:

ko.bindingHandlers["koGridFixed"] = {
   init: function (element, valueAccessor, allBindingsAccessor, data, context) {
      var gridOptions = ko.utils.unwrapObservable(valueAccessor());
      if (gridOptions && gridOptions.columnDefs) {
         var columnDefsArr = ko.utils.unwrapObservable(gridOptions.columnDefs);
         if (columnDefsArr && columnDefsArr.length > 0 && columnDefsArr[0].field === '\u2714')
            columnDefsArr.splice(0, 1);
      }
 
      return ko.bindingHandlers["koGrid"].init(element, valueAccessor, allBindingsAccessor, data, context);
   }
};

So, just replace all koGrid binding in views with koGridFixed. A bit more details in my blog - koGrid: Bug – Checkboxes column duplication

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment