[niko316Participant]

I would like to thank Christopher. I faced the same issue with a grid and I solved it using his patch. Thank you!!

[niko316Participant]

That was the problem. Thanks! (Sorry for the late reply).

[niko316Participant]

Maybe is a problem with the visibility of the div. I’m using Knockout (and MVVM). Here’s a snippet of the html:

<div class="col_80">
        <fieldset class="label_side top">
            <label>Cliente</label>
            <div class="clearfix">
                <div id= "clientesComboBox" data-bind="jqxComboBox: { comboOptions: { data: clientesList, width: '250px', height: '25px', dropDownWidth: '250px', displayText: 'nombre', objectIdRef: 'id', autocomplete: 'true', searchMode: 'containsignorecase', selectedItem: clienteSeleccionadoCombo}}"></div>
            </div>
        </fieldset>
    </div>

And here is the js:

 ko.bindingHandlers.jqxGrid = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var binding = ko.utils.unwrapObservable(allBindingsAccessor());
            //debugger;
            var options = binding.jqxGrid || {};
            //debugger;
            var sourceGrid =
            {
                localdata: options.data,
                datatype: 'observablearray'
            };
            var theme = "darkblue";
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(sourceGrid);
            //debugger;
            // initialize jqxGrid
            $(element).jqxGrid(
            {
                width: options.totalwidth,
                source: dataAdapter,
                theme: theme,
                pageable: options.pageable,
                autoheight: options.autoheight,
                sortable: options.sortable,
                altrows: options.altrows,
                pagesize: options.pagesize[0],
                enabletooltips: options.enabletooltips,
                pagesizeoptions: options.pagesize,
                editable: options.editable,
                selectionmode: options.selectionmode, //'singlerow' |'multiplecellsextended'
                columns: options.columns
            });
            $(element).bind('rowdoubleclick', function (event) {
                if (options.canSelect) {
                    var args = event.args;
                    var row = args.rowindex;
                    var datos = $(element).jqxGrid('getrowdata', row);
                    options.selectedRow(datos[options.objectIdRef]);
                    //debugger;
                }
            });
        }
    };

I’ve made my own binding because the default wasn’t working. None of the css classes modifies the input margin. The resulting html for the input is:

<input class="jqx-combobox-input jqx-combobox-input-darkblue jqx-widget-content jqx-widget-content-darkblue jqx-rc-all jqx-rc-all-darkblue" type="textarea" style="margin: 12.5px 0px 0px; padding: 0px; border: 0px none; width: 100%;" autocomplete="off" name="clientesComboBox">

And analizing it with Firebug in Firefox (or Web Developer Tools in Chrome) i can see that the margin is not being set by any of the css and its an element style property.

[Author]

Posts