limiting the filter menu options ?

[Neeraj]

I have the below code that is filtering the menu options........there is one problem, when I switch between a datetime or amount datatype to a string datatype - the filteroptions just show me three options "NoFilter, EqualTo, NotEqualTo". This happens only sometimes ? what am I doing wrong ? 

// JScript File

 

function filterMenushowing(sender, eventArgs)

 

{

 

 

var menu = eventArgs.get_menu();

 

 

var items = menu._itemData;

 

 

var dataType = eventArgs.get_column().get_dataType().toString();

 

 

 

var usedTypes = "System.String, System.DateTime, System.Decimal";

 

 

//debugger;

 

 

if(usedTypes.indexOf(dataType != -1))

 

{

 

 

var filterForString = "";

 

 

 

if(dataType == "System.String")

 

filterForString =

"NoFilter, Contains, DoesNotContain, StartsWith, EndsWith, EqualTo, NotEqualTo";

 

 

if(dataType == "System.Decimal" || dataType == "System.DateTime")

 

filterForString =

"NoFilter, EqualTo, NotEqualTo, GreaterThan, LessThan, GreaterThanOrEqualTo, LessThanOrEqualTo";

 

 

 

var i = 0;

 

 

while (i < items.length)

 

{

 

if (filterForString.indexOf(items[i].value.toString()) != -1)

 

{

 

var item = menu._findItemByValue(items[i].value);

 

 

if (item != null)

 

item._element.style.display =

"";

 

 

//else

 

 

// item._element.style.display = "";

 

}

 

 

else

 

{

 

var item = menu._findItemByValue(items[i].value);

 

 

if (item != null)

 

item._element.style.display=

"none";

 

 

}

i++;

}

 

}

 

else

 

{

 

var i = 0;

 

 

while (i < items.length)

 

{

 

var item = menu._findItemByValue(items[i].value);

 

 

if (item != null)

 

item._element.style.display=

"";

 

 

i++;

}

 

}

}

[Georgi Krustev]

Hello Neeraj,

To achieve your goal you need to use a CSS class in order to hide the filter menu and then to show it. Here is a code snippet showing how to achieve this:

[CSS]:

 <style type="text/css">
        .hideFilterOption
        {
            display: none !important;
        }
</style>

[ASPX]:

    <script type="text/javascript" language="javascript">
        var oldFilterStyle = "";

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

            if (eventArgs.get_column().get_dataType() == "System.String") {
                var i = 0;
                while (i < items.get_count()) {
                    if (items.getItem(i).get_value() != "StartsWith" && items.getItem(i).get_value() != "Contains") {
                        var item = items.getItem(i);
                        if (item != null)
                        {
                            if (item.get_element().className != "hideFilterOption")
                            {
                                oldFilterStyle = item.get_element().className;
                            }
                            item.get_element().className = "hideFilterOption";
                        }
                    }
                    i++;
                }
            }
            else {
                var i = 0;
                while (i < items.get_count()) {
                    var item = items.getItem(i);
                    if (item != null)
                        if(oldFilterStyle != "" && item.get_element().className == "hideFilterOption")
                            item.get_element().className = oldFilterStyle;
                    i++;
                }
            }
        }
    </script>

Greetings,
Georgi Krustev
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.

[Neeraj]

Thanks for that. That works except that I have limitations for DateTime and Amount as well. I need to customize the filters for DateTime and Amount DataType - how would I do that for them along with customizations for String ?

[Georgi Krustev]

Hello Neeraj,

Yo achieve your goal you need to check whether the data type is DateTime or Decimal and clear the required filter options. Here is a code snippet showing how to achieve this:

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

    if (eventArgs.get_column().get_dataType() == "System.String") {
        var i = 0;
        while (i < items.get_count()) {
            if (items.getItem(i).get_value() != "StartsWith" && items.getItem(i).get_value() != "Contains") {
                var item = items.getItem(i);
                if (item != null) {
                    if (item.get_element().className != "hideFilterOption") {
                        oldFilterStyle = item.get_element().className;
                    }
                    item.get_element().className = "hideFilterOption";
                }
            }
            i++;
        }
    }
    else if (eventArgs.get_column().get_dataType() == "System.DateTime")
    {
        //use the same approach as in the above if.
    }
    else if (eventArgs.get_column().get_dataType() == "System.Decimal")
    {
        //use the same approach as in the above if.
    }
    else {
        var i = 0;
        while (i < items.get_count()) {
            var item = items.getItem(i);
            if (item != null)
                if (oldFilterStyle != "" && item.get_element().className == "hideFilterOption")
                item.get_element().className = oldFilterStyle;
            i++;
        }
    }
}

Greetings,
Georgi Krustev
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.

[Neeraj]

that does not work , I tried that before. If I click the filter on a string datatype and then a datedatetype ( the first time it does not work properly) and once I click on the date date type - then it works. Did this code work before or what am I doing wrong ? 

 

var oldFilterStyle = "";

 

 

 

function filterMenushowing(sender, eventArgs) {

 

 

var menu = eventArgs.get_menu();

 

 

var items = menu.get_items();

 

 

var filterForString = "NoFilter, Contains, DoesNotContain, StartsWith, EndsWith, EqualTo, NotEqualTo";

 

 

if (eventArgs.get_column().get_dataType() == "System.String")

 

{

 

var i = 0;

 

 

while (i < items.get_count()) {

 

 

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

 

&& items.getItem(i).get_value() !=

"DoesNotContain"

 

&& items.getItem(i).get_value() !=

"StartsWith"

 

&& items.getItem(i).get_value() !=

"EndsWith"

 

&& items.getItem(i).get_value() !=

"EqualTo"

 

&& items.getItem(i).get_value() !=

"NotEqualTo"

 

)

 

//if (filterForString.indexOf(items.getItem(i).get_value()) == -1)

 

{

 

var item = items.getItem(i);

 

 

if (item != null)

 

{

 

if (item.get_element().className != "hideFilterOption")

 

{

oldFilterStyle = item.get_element().className;

}

item.get_element().className =

"hideFilterOption";

 

}

}

i++;

}

}

 

else if (eventArgs.get_column().get_dataType() == "System.DateTime")

 

{

 

var i = 0;

 

 

while (i < items.get_count()) {

 

 

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

 

&& items.getItem(i).get_value() !=

"EqualTo"

 

&& items.getItem(i).get_value() !=

"NotEqualTo"

 

&& items.getItem(i).get_value() !=

"GreaterThan"

 

&& items.getItem(i).get_value() !=

"LessThan"

 

&& items.getItem(i).get_value() !=

"GreaterThanOrEqualTo"

 

&& items.getItem(i).get_value() !=

"LessThanOrEqualTo"

 

)

 

//if (filterForString.indexOf(items.getItem(i).get_value()) == -1)

 

{

 

var item = items.getItem(i);

 

 

if (item != null)

 

{

 

if (item.get_element().className != "hideFilterOption")

 

{

oldFilterStyle = item.get_element().className;

}

item.get_element().className =

"hideFilterOption";

 

}

}

i++;

}

}

 

else

 

{

 

var i = 0;

 

 

while (i < items.get_count()) {

 

 

var item = items.getItem(i);

 

 

if (item != null)

 

 

if(oldFilterStyle != "" && item.get_element().className == "hideFilterOption")

 

item.get_element().className = oldFilterStyle;

i++;

}

}

}

[Georgi Krustev]

Hello Neeraj,

Please review the attached file and let me know if I can assist you further.

Regards,
Georgi Krustev
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.

[Neeraj]

Thanks for posting that, I am actually using a combination of codebehind and javascript to achieve this. Your code should also work. Thanks for your input.