jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Related Topics sp_TopicIcon

When using setFrozenColumns and filterToolbar at same time, non-frozen columns disappear

Tags: frozen columns disappear

30/03/2012
00:03

peterbnp

Member

Members

Forum Posts: 4

Member Since:
29/03/2012

Offline

I am trying to implement the freeze column feature but it is causing some odd refresh problems. I have tried every possible strategy and workaround, I've searched for this issue but have not found anybody with same problem. If anybody can help, much appreciated. For now, I've disabled freeze column feature.

This post (http://www.trirand.com/blog/?p.....38;ret=all) makes me wonder if there is a bug with the combinatin filter and frozen columns.

I can't post images because I don't have a public url. Image 1 would have shown grid just after a page refresh. No problems, there are 3 data rows and a filter row which is populated with current filters. Image 2 would have shown what happens if I type in a new filter and then press enter: the columns 'disappear'. In fact, they don't really disappear, but their widths probably go to 0 because there is a solid vertical bar just after the "name" column which is in fact all of the columns sandwiched together! Note also that the 3 original rows are duplicated as well.

I am freezing the First column, "Name".

I am using "filterToolbar" and I use the following technique to populate the filter row in the loadComplete Event:

{jQuery("[id=gs_Name]").val("company");jQuery("[id=gs_Credit_Research]").val("food");}

If I remove the above code, the problem goes away - but then current filters don't get displayted... Also, if I remove jqgrid's "freeze column" feature, problem goes away.

I am using Visual Studio 2010, ASP.NET, MVC 3, newest jquery modules

I posted same question here:

http://stackoverflow.com/questions/9921769/when-using-setfrozencolumns-and-filtertoolbar-at-same-time-non-frozen-columns-d

Here are Column / Row definitions:

var dynamicGridDataColumns = [{ name: 'Name', index: 'Name', width: 300, title: false, frozen: true, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Issuer_Val', index: 'Issuer_Val', width: 70, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Event_Risk', index: 'Event_Risk', width: 80, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Expected_Rating', index: 'Expected_Rating', width: 100, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Rating_Floor', index: 'Rating_Floor', width: 100, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Recovery', index: 'Recovery', width: 60, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Relative', index: 'Relative', width: 60, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Credit_Research', index: 'Credit_Research', width: 500, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Analyst', index: 'Analyst', width: 125, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Eu/Us', index: 'Eu/Us', width: 40, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Hy/Ig', index: 'Hy/Ig', width: 40, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Last_Publication', index: 'Last_Publication', width: 100, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Bond', index: 'Bond', width: 85, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Equity', index: 'Equity', width: 85, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Country', index: 'Country', width: 200, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'Keywords', index: 'Keywords', width: 200, title: false, frozen: false, search:true, stype:'text', searchoptions: {sopt: ['eq', 'ne', 'cn']}},{ name: 'ClearId', index: 'ClearId', width: 75, title: false, frozen: true, search:true

And here is the relevant code:

link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/jQuery/smoothness/jquery-ui-1.8.16.custom.css") %>" />
<link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/jQuery/jqgrid/ui.jqgrid.css") %>" />
<link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/jQuery/jqgrid/plugins/ui.multiselect.css") %>" />
<link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/jQuery/jqgrid/plugins/searchfilter.css") %>" />
<link rel="stylesheet" type="text/css" media="screen" href="<%= Url.Content("~/Content/jQuery/autosuggest/jquery.autocomplete.css") %>" />

<script src="<%= Url.Content("~/Scripts/json2.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/ui/jquery-ui-1.8.16.custom.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/grid.addons.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/grid.postext.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/grid.setcolumns.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/jquery.contextmenu.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/jquery.tablednd.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/ui.multiselect.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/jqgrid/plugins/jquery.searchFilter.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/bgiframe/jquery.bgiframe.js") %>" type='text/javascript'></script>
<script src="<%= Url.Content("~/Scripts/jquery/blockUI/jquery.blockUI.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery/autosuggest/jquery.autocomplete.js") %>" type='text/javascript'></script>

<script type="text/javascript">
    <%= Html.ToJsColumnNames("dynamicGridDataColumnNames", Model.GridColumns ) %>
    <%= Html.ToJsColumns("dynamicGridDataColumns", Model.GridColumns, "" ) %>
    <%= Html.ToJsShowHideColums("dynamicGridDataShowHideColumns", Model.GridColumns ) %>
</script>

<script type="text/javascript">

    $(function () {

        document.title = "CLEAR Masterlist";

        jQuery("#list").jqGrid({
            url: '<%=Url.Action("DynamicGridData")%>',
            datatype: 'json',
            mtype: 'POST',
            colNames: dynamicGridDataColumnNames,
            colModel: dynamicGridDataColumns,
            pager: jQuery('#pager'),
            pagerpos: 'center',
            rowNum: 100,
            rowList: [100, 100000000],
            loadComplete: function () {
                $("option[value=100000000]").text('All');
                $.getScript('<%=Url.Content("~/Names/PopulateFilterBar/")%>');
            },
            sortname: "Name",
            sortorder: "asc",
            height: 600,
            width: 1235,
            loadui: "block",
            shrinkToFit: false,
            multiselect: true,
            multiboxonly: false,
            caption: 'List of Names
        });

        jQuery("#list").jqGrid('filterToolbar', { autosearch: true, searchOnEnter: true, stringResult: true
        });

        jQuery("#list").jqGrid('navGrid', '#pager', {
            del: false, add: false, edit: false, search: false, refresh: false,
            view: false, height: 250, jqModal: false, closeOnEscape: true
        });

        jQuery("#list").jqGrid('setFrozenColumns');

    });

</script>

05/04/2012
16:29

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Actually I do not cosider this as bug.

When using the frozen columns we actually make a snapshoot and set it with higher z-index over the original grid.

Simple you should set in this case the area of the field.

This can be something like this:

loadComplete : function ()

{

var fdiv = this.grid.fhDiv;

jQuery("[id=gs_Name]", fdiv ).val("company");

jQuery("[id=gs_Credit_Research]", fdiv).val("food"); // if this field is frozen too.

}

Hope this helps

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/04/2012
18:24

peterbnp

Member

Members

Forum Posts: 4

Member Since:
29/03/2012

Offline

Thanks, Tony, but I believe now that this is a bug.

I am using the filter row and frozen columns feature at the same time and they seem to be in conflict. Here is a visual of the problem:

Before (on refresh):

col1 (frozen) | col2 | col3 | col4 | col5 | col6

filter row
search term | | | |

...

But after entering a filter

col1 (frozen) |||||||

filter row new search term|||||||

data |||||||

...

The lines |||||| represent the columns "sandwiched" together - their data and widths have disappeared.

The 2 lines of code that seem to be in conflict are :

loadComplete: function () {

$.getScript('<%=Url.Content("~/Names/PopulateFilterBar/")%>');

jQuery("#list").jqGrid('setFrozenColumns');

The first statement is a call to a function in the MVC controller that gnerates the the following:

jQuery("[id=gs_Name]").val("company"); }

If I remove the first command, the 2nd works perfectly well but I lose the appearance of the filter words on a refresh. If I remove the 2nd, I lose the frozen column feature.

Has anyone seen this error?

Furthermore, I notice that the selection of rows seems to not always work when columns are frozen. I have abondoned the frozen column feature until I can resolve this problem.

I am using jqGrid, all newest versions of jQuery, in VS2010 ASP.NET, .NET 4, MVC.

30/04/2012
11:50

peterbnp

Member

Members

Forum Posts: 4

Member Since:
29/03/2012

Offline

I don't mean to push this question unnecessarily. I've tried to be clear in my second post, and in my first, I tried to provide as much info as possible. If the question is not clear, here it is in a few words:

Can someone please provide a simple explanation why jQuery's jQgrid is not redrawing correctly when I (a) type in a filter in the filter toolbar under the headings and (b) press Enter. Note that this only occurred after I added the freeze column feature. All relevant code above.

30/04/2012
15:12

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello!

I will try to help you. You need clear understand which actions should be exectued one and which need be executed at the end of every filling of the grid body.

If you create the the grid using jQuery("#list").jqGrid({...}); the empty <table> element will be converted to grid. Many additional dived over the <table> will be created. For example it will be created div which hold the column headers, pager, caption abd so on. So one should create the grid once. In the same way after the grid with all the elemens are created you can for example modify the pager with the code $("option[value=100000000]").text('All');. You should do this once for example in the next line after jQuery("#list").jqGrid({...});. On the other time if you do the action inside of loadComplete on every grid filling it will only make the loading of grid a little slowly, but it will make no problems.

In the same you should create filter toolbar with respect of filterToolbar only once. After you created all the parts of grid you can call setFrozenColumns once.

Many methods contains some code which do imediat return if you use the methods in the wrong way and call at the second time the method which need be called once. The setFrozenColumns method is relatively new and it's not contains such kind of validation. It seems your main problem. There are exist additionally destroyFrozenColumns method, but if shold be mostly used in caseif you need change which column will be frozen or you you for example need to modify the column headers using

You should be more careful in calling some methods multiple times.

Best regards
Oleg

03/05/2012
16:55

peterbnp

Member

Members

Forum Posts: 4

Member Since:
29/03/2012

Offline

Thanks, Oleg. As seen below, I have removed all code from LoadComplete. It is all getting executed "once" as you suggest. And I am still having the same problem. I type in filter, the first time is OK, the 2nd time I lose all columns as described above.

$(function () {

            <%= Html.ToJsColumnNames("dynamicGridDataColumnNames", Model.GridColumns ) %>
            <%= Html.ToJsColumns("dynamicGridDataColumns", Model.GridColumns, "" ) %>
            <%= Html.ToJsShowHideColums("dynamicGridDataShowHideColumns", Model.GridColumns) %>
            <%= Html.ToJsGetCurrentFilters("dynamicGridDataCurrentFilters") %>

document.title = "CLEAR Masterlist";

            jQuery("#list").jqGrid({
                url: '<%=Url.Action("DynamicGridData")%>',
                datatype: 'json',
                mtype: 'POST',
                colNames: dynamicGridDataColumnNames,
                colModel: dynamicGridDataColumns,
                pager: jQuery('#pager'),
                pagerpos: 'center',
                rowNum: 100,
                rowList: [100, 100000000],
                sortname: "Name",
                sortorder: "asc",
                height: 600,
                width: 1235,
                loadui: "block",
                shrinkToFit: false,
                multiselect: true,
                multiboxonly: false,
                caption: 'List of Names'
            });

            jQuery("#list").jqGrid('navGrid', '#pager', {
                del: false, add: false, edit: false, search: false, refresh: false,
                view: false, height: 250, jqModal: false, closeOnEscape: true
            });

$("option[value=100000000]").text('All');

jQuery("#list").jqGrid('filterToolbar', { autosearch: true, searchOnEnter: true, stringResult: true
});

jQuery("#list").jqGrid('setFrozenColumns');

            var fdiv = jQuery("#list").fhDiv;
            var cf = dynamicGridDataCurrentFilters.split("&&");
            for (var x = 0; x < cf.length; x++) {
                var f = cf[x].split('~');
                if (f.length > 1) {
                    var fld = "[id=gs_" + f[0] + "]";
                    jQuery(fld, fdiv).val(f[1]);
                }
            }

});

</script>

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
62 Guest(s)

Currently Browsing this Page:
1 Guest(s)