Wrong filter options after numeric column click

[golddog]

When I have both a numerically typed column and a text column in a grid, and allow filtering on both, the text options don't display properly if I click on the numeric column's options first.

In that scenario, I only show the "NoFilter" option on the text column, which is the only one that's common between the two types which I display.  (I am using client-side javascript to not display some of the options based on unique name).

I don't see this problem on the numeric column if I click the text options first.  Also, if I click the text options a second time after seeing the numeric options, then the right set of options (those which I keep) show up.

Note that I don't actually filter to see this problem.  It's just clicking on the button to see the numeric options, then clicking on the text options.  It does seem to be consistent and reproducible in IE 7 and Firefox, 32-bit Vista.

Also note that the order of my client-side script (copied below) doesn't seem to be important.  I initially had the "numeric" area below the "text", and switched them, thinking I might see the opposite effect.  No, it's always numeric filter options, then text which causes the problem.

Finally, the "Weight" column is decimal(32,8) in our database, but I think this problem manifests with any numeric type.

Here's an example grid from my application:

<telerik:RadGrid  ID="grdStrategicCriterionSearchResults" runat="server" 
    EnableViewState="True" 
    OnNeedDataSource="grdStrategicCriterionSearchResults_NeedDataSource"
    onSelectedIndexChanged="grdStrategicCriterionSearchResults_SelectedIndexChanged"
    Visible="true">

    <ClientSettings EnablePostBackOnRowClick="true">
        <ClientEvents OnFilterMenuShowing="FilterMenuShowing" />
    </ClientSettings>
    <MasterTableView DataKeyNames="StrategicCriterionID" 
        RetrieveAllDataFields="False" EditMode="InPlace">
        
        <NoRecordsTemplate>
            No strategic criteria were found.
        </NoRecordsTemplate>

        <Columns>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" 
                    UniqueName="colName" />
            <telerik:GridBoundColumn DataField="Description" 
                    HeaderText="Description"  UniqueName="colDescription" />
            <telerik:GridBoundColumn DataField="Weight" HeaderText="Weight" 
                    UniqueName="colWeight" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the javascript for client-side filter display (this is in my Master page, so all the other unique names are columns in other grids in the application).  I've left in some alerts I was using to debug.

function FilterMenuShowing(sender, eventArgs)
{ 
    var menu = eventArgs.get_menu(); 
    var items = menu._itemData; 
    var i = 0;

    // Customize filter options. 

    // boolean
    if (eventArgs.get_column().get_uniqueName() == "colSoftBenefit" ||
        eventArgs.get_column().get_uniqueName() == "colEnabled" ||
        eventArgs.get_column().get_uniqueName() == "colShared" ||
        eventArgs.get_column().get_uniqueName() == "colSuper")
    {
        alert("in boolean area");
        while (i < items.length) 
        {
            var item = menu._findItemByValue(items[i].value);
            if (item != null)
            {
                if (items[i].value != "EqualTo" && 
                    items[i].value != "NotEqualTo" &&
                    items[i].value != "NoFilter")
               {
                    item._element.style.display = "none";
                } else {
                    item._element.style.display = '';
                }
            }

            i++;
        }
    }

    //numeric/date
    if (eventArgs.get_column().get_uniqueName() == "colStartYear" ||
        eventArgs.get_column().get_uniqueName() == "colWeight" ||
        eventArgs.get_column().get_uniqueName() == "colICCDiscountRate" || 
        eventArgs.get_column().get_uniqueName() == "colTaxRate" ||
        eventArgs.get_column().get_uniqueName() == "colDate" || 
        eventArgs.get_column().get_uniqueName() == "colLevel" ||
        eventArgs.get_column().get_uniqueName() == "colFiscalYear") 
    { 
        alert("in numeric area");

        while (i < items.length) 
        { 
            var item = menu._findItemByValue(items[i].value);

            if (item != null) 
            {
                if (items[i].value != "GreaterThan" && 
                    items[i].value != "LessThan" && 
                    items[i].value != "NoFilter" &&
                    items[i].value != "EqualTo") 
               { 
                    item._element.style.display="none"; 
                } else {
                    item._element.style.display='';
                }

                i++; 
            } 
        }
    }

    // text-type filters
    if (eventArgs.get_column().get_uniqueName() == "colName" ||
        eventArgs.get_column().get_uniqueName() == "colText" ||
        eventArgs.get_column().get_uniqueName() == "colPortfolioName" ||
        eventArgs.get_column().get_uniqueName() == "colTemplateName" ||
        eventArgs.get_column().get_uniqueName() == "colStrategicCriteria" ||
        eventArgs.get_column().get_uniqueName() == "colDescriptor" ||
        eventArgs.get_column().get_uniqueName() == "colDescriptorType" ||
        eventArgs.get_column().get_uniqueName() == "colExp" ||
        eventArgs.get_column().get_uniqueName() == "colUsername" ||
        eventArgs.get_column().get_uniqueName() == "colProjectName" ||
        eventArgs.get_column().get_uniqueName() == "colAction" ||
        eventArgs.get_column().get_uniqueName() == "colSource" ||
        eventArgs.get_column().get_uniqueName() == "colCategory" ||
        eventArgs.get_column().get_uniqueName() == "colMessage" ||
        eventArgs.get_column().get_uniqueName() == "colDescription" ||
        eventArgs.get_column().get_uniqueName() == "colPrefixAndSeed" ||
        eventArgs.get_column().get_uniqueName() == "colProjectMode" ||
        eventArgs.get_column().get_uniqueName() == "colSuperDescriptor" ||
        eventArgs.get_column().get_uniqueName() == "colInterval" ||
        eventArgs.get_column().get_uniqueName() == "colUnitType" ||
        eventArgs.get_column().get_uniqueName() == "colFirstName" ||
        eventArgs.get_column().get_uniqueName() == "colLastName" ||
        eventArgs.get_column().get_uniqueName() == "colEmail") 
    { 
        while (i < items.length) 
        { 
            var item = menu._findItemByValue(items[i].value);

            if (item != null) 
            {
                if (items[i].value != "Contains" && 
                    items[i].value != "EndsWith" && 
                    items[i].value != "StartsWith" &&
                    items[i].value != "NoFilter")
               {

                    alert(

" setting filter option " + items[i].value + " off");
                    item._element.style.display="none"; 
               } else {
                    item._element.style.display='';
                    alert(" setting filter option " + items[i].value + " on");
               }

                i++; 
            } 
        }
    }
}

</script>

[Nikolay Rusev]

Hello golddog,

I am afraid I cannot completely understand the problem you are facing.
When filter menu shows it has only the options specified by the javascript.

For colWeight column: NoFilter, EqualTo, GreaterThen, LessThen
For colDescription column: NoFilter, Containes, StartsWith, EndsWith

Have in mind that if you specify 
    DataType="SomeType" FilterListOptions="VaryByDataType" on each column, filter menu will contain only the options acceptable for this column type. The effect will be similar to what your javascript does.

Greetings,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[illumination]

I'm having similar problem. Current Problem I have is that I put:

function filterMenuShowing(sender, eventArgs)

{

var menu = eventArgs.get_menu();

var items = menu.get_items();

var i = 0;

if (eventArgs.get_column().get_uniqueName() == "Article_Id" ||

eventArgs.get_column().get_uniqueName() == "Inserted_Date")

{

while (i < items.len)

{

if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "EqualTo"  && items.getItem(i).get_value() != "GreaterThan"  && items.getItem(i).get_value() != "LessThan")

{

var item = items.getItem(i);

if (item != null)

item.get_element().style.display = "none";

}

i++;

}

}

else if (eventArgs.get_column().get_uniqueName() == "Article_Date" ||

eventArgs.get_column().get_uniqueName() == "Subject" ||

eventArgs.get_column().get_uniqueName() == "Recipients" ||

eventArgs.get_column().get_uniqueName() == "Medco_Nbr")

{

while (i < items.get_count())

{

if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "Contains")

{

var item = items.getItem(i);

if (item != null)

item.get_element().style.display = "none";

}

i++;

}

}

else

{

while (i < items.get_count())

{

var item = items.getItem(i);

if (item != null)

item.get_element().style.display = "";

i++;

}

}

}

and when I use this script, I am supposed to have particular filter assigned to each column.
When initialized, the article_date, subject, recipients, and Medco_nbr are working correctly (it only has nofilter and contains). but for article_id and inserted_date are not working correctly. because when the web page is initialized and I click article_id, it seems the filter is working (with nofilter, equalto, greaterthan, and lessthan). As soon as I click the other filters, the article_id only showing nofilter until I click the filter for inserted_date then the article_id filter is like resetting itself.  Only article_id and inserted_id are the one that are not working properly.
And this problem seems consistent.
So I tried to change it to use this:

        function filterMenuShowing(sender, eventArgs)  
        {  
           var menu = eventArgs.get_menu();  
           var items = menu.get_items();  
           var i = 0;  
 
           if (eventArgs.get_column().get_dataType() == "System.Int32")  
           {  
               while (i < items.get_count())  
               {  
                   if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "EqualTo" && items.getItem(i).get_value() != "GreaterThan"  && items.getItem(i).get_value() != "LessThan")   
                   {  
                       var item = items.getItem(i);  
                       if (item != null)  
                           item.get_element().style.display = "none";  
                   }  
                   i++;  
               }  
           }  
           else if (EventArgs.get_column().get_dataType() == "System.DateTime")  
           {  
               while (i < items.get_count())  
               {  
                   if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "EqualTo"  && items.getItem(i).get_value() != "GreaterThan"  && items.getItem(i).get_value() != "LessThan")   
                  {  
                       var item = items.getItem(i);  
                       if (item != null)  
                           item.get_element().style.display = "none";  
                   }  
                   i++;  
               }  
           }  
           else if (eventArgs.get_column().get_uniqueName() == "Article_Date" ||  
                    eventArgs.get_column().get_uniqueName() == "Subject" ||  
                    eventArgs.get_column().get_uniqueName() == "Recipients" ||  
                    eventArgs.get_column().get_uniqueName() == "Medco_Nbr")  
           {  
               while (i < items.get_count())  
               {  
                   if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "Contains")   
                   {  
                       var item = items.getItem(i);  
                       if (item != null)  
                           item.get_element().style.display = "none";  
                   }  
                   i++;  
               }  
           }  
           else  
           {              
               while (i < items.get_count())  
               {  
                   var item = items.getItem(i);  
                   if (item != null)  
                       item.get_element().style.display = "";  
                   i++;  
               }  
           }  
       } 

Since I figured it might be the datatype. When I use the script, the one working only is Article_id and the others are just posting back when I click the filter icon.

I put this as a ticket but it has not been answered yet. I really need this solve since this is the only one left for the application to deploy so I need it asap. Please help.

Thank you very much.

[Nikolay Rusev]

Hello Lina,

I am afraid I cannot completely understand the problem you are facing.
In my previous post in this thread I explained that if you set proper DataType and "FilterListOptions="VaryByDataType"" of your GridColumn, filter menu will be populated with acceptable options only for this DataType.

Regards,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[illumination]

I tried to use the varybydatatype but I it did not work as I wanted because there are still to many filters showing. But I have achieve what I need by using RadGrid1_Init to create the filter menu for the article_id and article_date then I use the functionMenuShowing for the other columns filtering. Got it to work great.

    Protected Sub RadGrid1_Init(ByVal sender As Object, ByVal e As EventArgs) Handles RadGrid1.Init
        Dim menu As GridFilterMenu = RadGrid1.FilterMenu
        Dim i As Integer = 0
        While i < menu.Items.Count
            If menu.Items(i).Text = "NoFilter" Or _
               menu.Items(i).Text = "Contains" Or _
               menu.Items(i).Text = "EqualTo" Or _
               menu.Items(i).Text = "GreaterThan" Or _
               menu.Items(i).Text = "LessThan" Then
                ii = i + 1
            Else
                menu.Items.RemoveAt(i)
            End If
        End While
    End Sub

        function filterMenuShowing(sender, eventArgs)
        {
           var menu = eventArgs.get_menu();
           var items = menu.get_items();
           var i = 0;

        if (eventArgs.get_column().get_uniqueName() == "Article_Date" ||
                    eventArgs.get_column().get_uniqueName() == "Subject" ||
                    eventArgs.get_column().get_uniqueName() == "Recipients" ||
                    eventArgs.get_column().get_uniqueName() == "Medco_Nbr")
           {
               while (i < items.get_count())
               {
                   if (items.getItem(i).get_value() != "NoFilter" && items.getItem(i).get_value() != "Contains")
                   {
                       var item = items.getItem(i);
                       if (item != null)
                           item.get_element().style.display = "none";
                   }
                   i++;
               }
           }
           else
           {
               while (i < items.get_count())
               {
                   var item = items.getItem(i);
                   if (item != null)
                       item.get_element().style.display = "";
                   i++;
               }
           }

            <ClientEvents OnRowDblClick="RowDblClick" OnFilterMenuShowing="filterMenuShowing" />

Thanks for the response.
Sincerely.