ChexkBoxFormatter

[havvanur160401046]

I also want to change the checkbox over the list, I need to write a checkboxformatter function, but I have no idea how to do it, there is an example for the texts above, I think it should be like this as far as I understand

I did it like this, but what are my mistakes or deficiencies?

[edwardch]

I'm not sure what you're trying to achieve here?

Try search for GridRowSelectionMixin or inspect the checkbox element in your browser to find out more about it.

[havvanur160401046]

I want to change the discontunued value. There is an example for string or number on the list, but how can I do it for boolean values?

[havvanur160401046]

so I want to make it changeable via the list when it lists as above without opening the form

[edwardch]

I haven't tried this in a grid, but if you open a dialog and inspect the checkbox element you will get something like this

<input type="checkbox" class="editor s-BooleanEditor" id="StartSharp_Northwind_ProductDialog39_Discontinued" name="Discontinued">

Perhaps try using those classes instead and see how it goes?

[reach2rv]

@havvanur160401046
In your Grid.ts

      private booleantFormatter(ctx) {
           var klass = 'edit check-box';
           var item = ctx.item as ConfigurationRow;
           var pending = this.pendingChanges[item.Id];

           if (pending && pending[ctx.column.field] !== undefined) {
               klass += ' dirty';
           }

           var value = this.getEffectiveValue(item, ctx.column.field) as string;
           var check: string;
           var isChecked = q.ToBool(value);
           if (isChecked)
               check = "<input type='checkbox' checked='" + isChecked + "' class='" + klass +
                   "' data-field='" + ctx.column.field +
                   "' value='" + value + "'/>";
           else
               check = "<input type='checkbox' class='" + klass +
                   "' data-field='" + ctx.column.field +
                   "' value='" + value + "'/>";


           return check
       }

protected getColumns() {
            var columns = super.getColumns();

            let xyzColumn = Q.first(columns, x => x.field == fld.xyz);

            xyzColumn .format = ctx =>             
                    return this.booleantFormatter(ctx);

            return columns;
        }

   private inputsChange(e: JQueryEventObject) {
            var cell = this.slickGrid.getCellFromEvent(e);
            var item = this.itemAt(cell.row);
            var input = $(e.target);
            var field = input.data('field');
            var text = Q.coalesce(Q.trimToNull(input.val()), '0');           
            var pending = this.pendingChanges[item.Id];

            var effective = this.getEffectiveValue(item, field);
            var oldText: string; 
            var value;           

            if (!pending) {
                this.pendingChanges[item.Id] = pending = {};
            }
            if (input.hasClass('check-box')) {
                    if (item.Value == "False") {
                        value = "True";
                        input.prop("checked");
                    }
                    else {
                        value = "False";
                        input.prop("");
                    }
             }
            
            pending[field] = value;
            item[field] = value;
            this.view.updateItem(item.Id, item);
            this.view.refresh();

            input.val(value).addClass('dirty');

        }

in Constructor

this.slickContainer.on('change', '.edit:input', (e) => this.inputsChange(e));

I have trimmed down the code by removing other validation for my specific code.. Please try and let me know.. you may need to alter some functions as per your needs

[havvanur160401046]

` protected getButtons() {
var buttons = super.getButtons();

        buttons.push({
            title: 'Save Changes',
            cssClass: 'apply-changes-button disabled',
            onClick: e => this.saveClick(),
            separator: true
        });

        return buttons;
    }
    protected onViewProcessData(response) {
        this.pendingChanges = {};
        this.setSaveButtonState();
        return super.onViewProcessData(response);
    }

`

[eissa1005]

call this on Constructor
this.slickContainer.on('change', '.edit:input', (e) => this.inputsChange(e));

[reach2rv]

@havvanur160401046 you are missing this

this.slickContainer.on('change', '.edit:input', (e) => this.inputsChange(e));

add it in grid constructor

[reach2rv]

@havvanur160401046 Please mark as answered if your issue is resolved. Thanks

[havvanur160401046]

no i didn't miss it i added it so it doesn't work