MVC Grid ForeignKey filter dropdown cutom styling for item

[Marco]

Hi,

I showing a grid where some columns has username information. when a user is inactive then the username has a strike trough styling by class

This column is a a ForeignKey with ClientTemplate for displaying and the EditorTemplateName to control the editing

what shows a dropdown with Template and ValueTemplate on the UIHint schtml.

And  event databound to add a class for the strike trough styling.

So my grid column and dropdwon during edit are all having styling for inactive users

But when I click the filter icon the dropdown has to do the same

Where do I do that?

I cannot find any template or something else to control the ForeignKey bound dropdown.

Can someone help me with this styling problem?

Thanks

[Alexander]

Hi Marco,

I noticed that there is no license associated with your account. This inevitably limits the support service that can be provided, regardless of whether the inquiry resides within a public forum or private thread.

Thus, I would personally advocate taking a look at the following Support Plans. In order to examine what each of the pricing tiers offers on the table:

Support Plans

I understand the importance this may have for you. Thus, I have pondered over a potentially feasible alternative. However, please allow me to unfold a crucial factor that needs to be taken into consideration.

Both the ForeignKey Column and the Filter Menu functionalities tend to be decoupled from one another. Meaning, that the DropDownList will differ substantially. And this would require additional augmentations in the way the template is employed.

The Filter Menu contains only distinct records. In contrast, the ForeignKey column can contain duplicate values for arbitrary records. Thus, using the "OwnerIsActive" in the context of the FilterMenu would not be applicable.

This would be in the developer's grasp to reinvent the template, so that certain records are crossed out. As it is in your scenario.

Regardless, you can alter the Filter DropDownList by using the following approach:

• Subscribe to the FilterMenuOpen event of the Grid:
  

.Events(events => events.FilterMenuOpen("onFilterMenuOpen"))

• Create a helper function, that will alter the Filter DropDownList options. This would be handy for scenarios where there is more than one DropDownList incarnations:
  

<script>
        function configureDropDownListFilter(container, title){
             var select = $(container).find(`span[title='${title}']`).find("select");
             var dropDownList = $(select).getKendoDropDownList();
             dropDownList.setOptions({
                 template: (data) => { // Custom logic for adding the 'owner' or 'ownerStrike' class names.
                     var className = data.value % 2 == 0 ? "owner" : "ownerStrike"
                     return `<span class=${className}>${data.text}</span>`;
                 }
             })

        }
</script>

• Within the FilterMenuOpen handler, utilize the aforementioned helper function:
  

<script type="text/javascript">
        function onFilterMenuOpen(e){
            if(e.field == "CategoryID"){
                configureDropDownListFilter(e.container, "Value");
                configureDropDownListFilter(e.container, "Additional value");
            }
        }
</script>

This should then produce the following result:

Here is a Telerik REPL that further illustrates this approach:

Telerik REPL Example

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Marco]

Thank you.

Ill will tell my boss to look at the support plans. It's very old code/application so that is maybe why there's no support plan.

Nevertheless. the solution you have provide works except for the setOption but that has something to do with older version.

So I used the old way and now it's working

Again, thank you for you help

[Alexander]

Thanks for keeping me posted and kudos to you for finding a resolution that accommodates a prior version of the suite. You have my utmost respect in this regard.