Error when Read Datagrid data from MS SQL Server for Cell Editing in DataGrid

[ozzy]

Hello all,
I have a small problem and  was not able to find a solution for it. I have to make a mvc Webapplication using a datagrid to present some feeds read from Social Neworks.
I am using a slightly modified variant of the Cell Editing in DataGrid http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Cell%20Editing%20in%20DataGrid.
The difference are that I am reading the data from a database (MS SQL Server) and not statically from a json and I use one text editor field and a combobox with some values and modified formatters.

Reading the data from database is OK and the table is populated correctly. The only thing is that when entering a text input cell or the combobox the value therein is getting some blanks before and after and the value is not recognized correctly "0" becomes "         0        ".
See the attached pics.

In the combobox formatter I was able to fix it by trimmimg the blanks (see below String(value).trim())) but I am not able to do it then DataGrid cell is set for editing.
Also the combobox seems to have a fixed height so it doesn't adjust dinamically after the number of elements in the dropdown list.

I tried for several days now to find a solution but no luck at all. Does anybody had similar problems or does anyone know how to trim the DG cell content when the cell is in edit mode and where can I set the combobox to adjust depending on the number of elements?

Here is how I construct the DG with the js section in the index.cshtml...

Code:

   <div id="FeedLinksDiv" style="margin:20px 0"></div>
    <table id="dg" class="easyui-datagrid" title="Feed Links" style="width:950px" fitcolumns="true"
       data-options="
           rownumbers:false,
           singleSelect:true,
           method:'get',
           toolbar:toolbar,
           pagination:false, 
           nowrap:false">
    <thead>
        <tr>
            <th hidden data-options="field:'FeedLinkId',width:110,align:'left'">
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th data-options="field:'sourceid', width:70,
                        formatter:function(value,row)
                        {
                            String(value).trim();
                            for(var i=0; i<6; i++)
                            {
                                if (sources[i].sourceid == String(value).trim())
                                    return sources[i].sourcename;
                            }
                            return row.sourcename;
                        },
                        editor:{ type:'combobox', options:{
                        valueField:'sourceid',
                        textField:'sourcename',
                        method:'get',
                        data:sources,
                        required:true
                        }}">@Html.DisplayNameFor(model => model.Source)
            </th>
            <th data-options="field:'url',width:200,editor:'text',align:'left'">
                @Html.DisplayNameFor(model => model.Url)
            </th>
            </th>
            <th data-options="field:'created',width:70,align:'center'">
                @Html.DisplayNameFor(model => model.Created)
            </th>
        </tr>
    </thead>

<script>
        var toolbar = [{text: 'Add',....}, '-'];

$.extend($.fn.datagrid.methods, {
    editCell: function (jq, param) {
        return jq.each(function () {
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            $(this).datagrid('beginEdit', param.index);
            var ed = $(this).datagrid('getEditor', param);
            if (ed) {
                if ($(ed.target).hasClass('textbox-f')) {
                    $(ed.target).textbox('textbox').focus();
                } else {
                    $(ed.target).focus();
                }
            }
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    },
    enableCellEditing: function (jq) {
        return jq.each(function () {
            var dg = $(this);
            var opts = dg.datagrid('options');
            opts.oldOnClickCell = opts.onClickCell;
            opts.onClickCell = function (index, field) {
                if (opts.editIndex != undefined) {
                    if (dg.datagrid('validateRow', opts.editIndex)) {
                        dg.datagrid('endEdit', opts.editIndex);
                        opts.editIndex = undefined;
                    } else {
                        return;
                    }
                }
                dg.datagrid('selectRow', index).datagrid('editCell', {
                    index: index,
                    field: field
                });
                opts.editIndex = index;
                opts.oldOnClickCell.call(this, index, field);
            }
        });
    }
});

$(function () {
    $('#dg').datagrid().datagrid('enableCellEditing');
})

// The source serving as data for the combobox:
var sources = [
   { sourceid: '0', sourcename: 'Facebook' },
   { sourceid: '1', sourcename: 'Twitter' },
   { sourceid: '2', sourcename: 'Rss' },
   { sourceid: '3', sourcename: 'GooglePlus' },
   { sourceid: '4', sourcename: 'LinkedIn' },
   { sourceid: '5', sourcename: 'YoutubePlaylist' }
];
</script>

[stworthy]

The datagrid data can be retrieved from remote server or the local existing <tr> elements. If you are transforming datagrid from an existing, unformatted html table, make sure that you don't render unwanted space before and after nested <td> element. The code may look like this:

Code:

<tr>
    <td>@Html.DisplayFor(modelItem => item.Subject)</td>
...

Or override the $.fn.datagrid.parseData function to change the default parsing behavior.

Code:

<script type="text/javascript">
    $.fn.datagrid.parseData = function(target){
        var t = $(target);
        var data = {
            total:0,
            rows:[]
        };
        var fields = t.datagrid('getColumnFields',true).concat(t.datagrid('getColumnFields',false));
        t.find('tbody tr').each(function(){
            data.total++;
            var row = {};
            $.extend(row, $.parser.parseOptions(this,['iconCls','state']));
            for(var i=0; i<fields.length; i++){
                row[fields[i]] = $.trim($(this).find('td:eq('+i+')').html());
            }
            data.rows.push(row);
        });
        return data;
    };
</script>

[ozzy]

It works like a dream now, by overriding the pars function!!!!!
I guess I was too preocupied studying the js scripts and trying to understand all that then to see the obvious.

Do you also figure it out why the combobox have a fixed height and it doesn't adjust dinamically after the number of elements in the dropdown list? (see pic Combo_after_height.jpg above)

Thank you and regards,
Ozzy

[stworthy]

By default, the drop-down panel has a fixed height. You can set the 'panelHeight' property to change its height.

Code:

editor:{
    type:'combobox',
    options:{
        panelHeight:'auto',
        valueField:'productid',
        textField:'productname',
        method:'get',
        url:'products.json',
        required:true
    }
}

[ozzy]

That did it! All my problems are solved now!
Yoe are vgreat man! I would like to know how can I make it even!
Any idea?
Regards
ozzy