Question

I have been dropped into a sharepoint 2007 project, and i have relatively little experience with altering existing webparts.

My first task is to add a filter to two out of three columns in a list view. My Lead Dev suggests trying to add a jquery combo-box filter, and another dev suggests extending the web part and overriding some of the functionality.

What i think is a good option is to change the context menu for the list view headers, so that instead of “Show Filter Choices” bringing up a standard dropdownlist that only responds to the first letter, it would have a jquery combobox. And maybe if the business requests it, change the wording of that option.

My question to you is, what would be a good path to take on this? Also, what resources are there besides traipsing around books and blogs are there to guide an sp newbie to do this?

Thanks.

Answer 1

How about something like this:

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

    <script>
        google.load("jquery", "1.2.6");
        google.setOnLoadCallback(function() { 

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

    $("table.ms-listviewtable tr.ms-viewheadertr").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);
        });
    });
});

It will need to be added to the page via a content editor web part.