Using SharePoint InstantListFilter with a BusinessDataListWebPart

Sep 22, 2010 at 3:17 PM

I'm going to try out the InstantListFilter with a BusinessDataListWebPart and jQuery version 1.4.2. I've got the fix from Alexander Bautz mentioned here in place to deal with the newer jQuery verson..

It'll be interesting to see how it works with the BDC data refresh. I'll post back with what I find, but wanted to mention it here in case anyone has any insights.

M.

Sep 23, 2010 at 8:22 PM
Edited Sep 23, 2010 at 8:23 PM

I got this working with the BusinessDataListWebPart. I'll do a blog post about it, but there were two tricks:

  • Wait for the list data to be loaded into the table. The BDC data is returned asynchronously, so depending on how much you are retrieving, etc., it can take a while before the data is there.
  • The construct in the DOM is a bit different than a standard LVWP.  The primary selector needs to be:
    $("table#BdwpRows tr:first")
    
    like below.

M.

var didIt = false;
$(document).ready(function() {
  setInterval("if(!didIt) doIt()", 5000);
});

function doIt() {
  if($("table#BdwpRows tr:first").length <= 0) return;
  didIt = true;
  jQuery.extend(jQuery.expr[':'], { containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0} });
  $("table#BdwpRows tr:first").each(function() {
    if($("td.ms-vh-group", this).size() > 0){
      return;
    }
    var tdset = "";
    var colIndex = 0;
    ...
Oct 29, 2010 at 8:56 AM

I have also BusinessDataListWebPart, but I can't get it to work.

I allways have the same error. Perhaps you can help me.

Error is:

"didIt" is undefined.

Here is the code that I used.

<![CDATA[<script src="http://www.google.com/jsapi"></script>

<script>


google.load("jquery", "1.2.6");

google.setOnLoadCallback(function() {

var didIt = false;
$(document).ready(function()
{    setInterval("if(!didIt) doIt()", 5000);});

    function doIt() {
  if($("table#BdwpRows tr:first").length <= 0) return;
  didIt = true;

    jQuery.extend(jQuery.expr[':'], { containsIgnoreCase: function(a,i,m) {return (a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0} });

   
    $("table#BdwpRows tr:first").each(function()
    {
        if($("td.ms-vh-group", this).size() > 0)
        {
            return;   
        }
       
        var tdset = "";
       
        var colIndex = 0;
       
        $(this).children("th,td").each(function()
        {
            if($(this).hasClass("ms-vh-icon"))
            {
                // attachment
                tdset += "<td></td>";
            }
            else
            {
                // filterable
                tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";               
            }
           
            colIndex++;
        });
       
        var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
       
        $(tr).insertAfter(this);
    });   
   
   
    $("input.vossers-filterfield")
        .css("border", "1px solid #7f9db9")
        .css("width", "100%")
        .css("margin", "2px")
        .css("padding", "2px")
        .keyup(function()
        {           
            var inputClosure = this;
           
            if(window.VossersFilterTimeoutHandle)
            {
                clearTimeout(window.VossersFilterTimeoutHandle);
            }
           
            window.VossersFilterTimeoutHandle = setTimeout(function()
            {
                var filterValues = new Array();
               
                $("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()
                {               
                    if($(this).val() != "")               
                    {
                        filterValues[$(this).attr("filtercolindex")] = $(this).val();
                    }
                });       
               
                           
                $(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()
                {
                    var mismatch = false;
                   
                    $(this).children("td").each(function(colIndex)
                    {
                        if(mismatch) return;
                       
                        if(filterValues[colIndex])
                        {
                            var val = filterValues[colIndex];
                           
                            // replace double quote character with 2 instances of itself
                            val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));                           
                                                                               
                            if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))
                            {
                                mismatch = true;
                            }                       
                        }
                    });
                   
                    if(mismatch)
                    {
                        $(this).hide();
                    }
                    else
                    {
                        $(this).show();
                    }       
                });               
               
            }, 250);
        });
}

});</script>]]>

Oct 29, 2010 at 11:23 AM
You're going to need to do some debugging for your environment. The selectors I used were right for my environment and certainly wont be right for yours. Also, jQuery 1.2.6 is ancient. You should use a more current version.