[Solved] Error in the length of filter text box in Telerik MVC Grid

[Hilda]

Hi,

I have a grid with the filterable() option. When rendered the length of the text box for the filter is longer than the filter box. Please find attached the image of the same.  The code is as below:

Html.Telerik().Grid(Model)

       .Name("Grid")

       .DataKeys(keys => keys.Add(c => c.key))

      .Pageable()

      .Columns(columns =>

      {

 

        columns.Template(o =>

                            {

                               %>

  <input name="checkedRecords" type="checkbox" value=" <%=o.key %>" title="checkedRecords" />

                   <%

                            })

                     

        .Title("").Width(36)
.HtmlAttributes(new { style = "text-align:center" });

                               

        columns.Bound(o => o.Col1).Width(250);

        columns.Bound(o => o.Col2).Width(250);

         

        columns.Command(commands =>

        {

            commands.Edit();

            commands.Select();

        }).Width(250);

 

    })

    .DataBinding(dataBinding =>

        {

             

            dataBinding.Server()

                .Select("EditingServerSide", "Grid")

                 

                .Update("Save", "Grid")

                .Delete("Delete", "Grid");

        })

    .Sortable()

    .Filterable()

    .PrefixUrlParameters(false)

    .Render();

    %>

Kindly Help.

Regards,
Hilda Fabiola Bernard

[Renee]

I wonder if this is a problem with Telerik's base code. 

We found a related-sounding problem (in our case we noticed it in the numeric "filter" panel).  The "is less than or equal to" <select> list has a set width which is respected in Firefox, but is poorly supported in IE6, IE7, and IE8.  So, where your inputs are too long, our inputs are too short and get cut off (making them unreadable) in browsers other than Firefox.

Why can't the filter panel simply "shrink wrap" the content?  Telerik engineers - is there a potential fix coming for these issues?

[Atanas Korchev]

Hello Renee,

 
As far as we know the width of the <select> element is supported even in IE. Could you be more specific about the issue which you are experiencing? We have not been able to reproduce it so far. Could you reproduce it any of our online demos?

Regards,
Atanas Korchev
the Telerik team

[Renee]

Yes, the "width" attribute is supported in IE, but the ramifications are that you can see nothing that is outside of that width.  I've attached a screenshot from IE6 from your Demo site of the Telerik Grid.  For long text, it gets cut off.  It's minor, but a usability point highlighted to us by the users of our software (which unfortunately use primarily IE6 and IT7).

[Dimo]

Hi Renee,

Thank you for the clarification. Indeed, Internet Explorer does not expand the <select> dropdown, so that all options become fully visible. Generally, there are two ways to overcome this - increase the filtering menu's width or shorten the "is greater than or equal to" string.

In order to increase the filtering menu's width, please add the following CSS code to your application:

div.t-filter-options
{
    width: 183px;
}

div.t-filter-options  select
{
    width: 183px;
}

div.t-filter-options  input
{
    width: 177px;
}

div.t-filter-options  .t-button
{
    width: 180px;
}

In our opinion, the filtering menu will look a little odd this wide, that's why for the time being we will refrain from including the change out-of-the-box.

In order to shorten the strings in the <select>, you can use the localization mechanism:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-localization.html

Let us know if you need more information.

Best wishes,
Dimo
the Telerik team

[Renee]

This is helpful.  It would be fantastic if Telerik just shipped with IE specific CSS to overcome this problem where it occurs and leave the "nicer" UI where it doesn't occur.    i.e. in the common code, fix it once so that all of us don't have to do it on our own via *width: 183px;

Thanks for the response.

[Dimo]

Hi Renee,

We could do that, but currently we do not give this particular issue so great importance, which would justify the addition of a CSS hack in the components' common stylesheet.

Based on the total lack of other feedback on this matter, we assume that the filtering options are straightforward for most of the users. Of course, if more clients report that they are having problems with the clipped strings, we will consider expanding the menu in IE.

All the best,
Dimo
the Telerik team