Telerik Forums / UI for ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.

Strange behavior with list of values in Internet Explorer

6 Answers 143 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Xavier
Top achievements
Rank 1
Xavier asked on 16 Mar 2015, 09:17 AM
captura.png
Hi,

This post is about a new incidence with Internet Explorer 11 and dropdownlist. The first time I click over dropdownlist the list of values are loading, but the list is closed. I should click again to get the list without close the list.


Editor Template

@model object
 
@(Html.Kendo().DropDownList()
    .HtmlAttributes(new { style = "width: 450px;" })
    .Name("ContactID")
    .DataTextField("Text")
    .DataValueField("Value")
    .Filter(FilterType.Contains)
    .OptionLabel("-please select-")
    .ValuePrimitive(true)
    .AutoBind(false)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("MultiSearchProductors", "Productors", new { area = "Comercial" }).Data("filterSearchProductor");
        })
        .ServerFiltering(true);
    })
     
)


Method from editor template

public async Task<JsonResult> MultiSearchProductors(string text)
        {
            var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
 
            var productors = ens.Contacts.OfType<Productor>().Where(p => user.AuthorizedCenters.Contains(p.CentreID.ToString()) && p.Baixa == null).Select(p => new
            {
                Value = p.ContactID,
                Text = p.Nom + " " + p.Addresses.FirstOrDefault(a => a.TypeID == (short)addressType.General).Poblacio.Denominacio + " - " + p.ContactID
            });
 
            if (!String.IsNullOrWhiteSpace(text))
            {
                productors = productors.Where(p => p.Text.Contains(text));
            }
 
            return Json(productors, JsonRequestBehavior.AllowGet);
        }


function filterSearchProductor() {
            return {
                text: $("#ContactID").data("kendoDropDownList").filterInput.val()
                //allCenters: true
            };
        }


Grid with column ContactID and mode Popup

@(Html.Kendo().Grid<PartnerViewModel>()
        .Name("partner_"+contactID)
        .ToolBar(t =>
        {
            if (User.IsInRole("Modify"))
            {
                t.Create().Text("Nou Partner");
            }
        })
        .Columns(columns =>
        {
            columns.Bound(f => f.ContactID).Title("Codi").Width(60);


View Model

public class PartnerViewModel
    {
        [DisplayName("Productor")]
        [UIHint("ProductorMultiSearch")]
        public int ContactID { get; set; }


Can you say anything about this behavior?


Thanks.


Xavier.

6 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 18 Mar 2015, 07:46 AM
Hello Xavier,

The described problem is not a known one. In order to continue with the investigation I created a simple Dojo demo that uses DropDownList in popup editor form, but I could replicate the issue. Here is a screencast that demonstrate the observed behavior. Could you let me know what I am missing?

Regards,
Georgi Krustev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Xavier
Top achievements
Rank 1
answered on 18 Mar 2015, 12:17 PM
Hi Georgi,

If you send me the source code for your example, later I will update the code to show you the scenario.



Thanks in advance.


Xavier.
0
Georgi Krustev
Telerik team
answered on 19 Mar 2015, 03:53 PM
Hello Xavier,

here is the code from the demo:
<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Ticket ID: 916476</title>
 
</head>
<body>
        <script src="../content/shared/js/products.js"></script>
        <div id="example">
            <div id="grid"></div>
 
            <script>
 
                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                       pageSize: 20,
                       data: products,
                       autoSync: true,
                       schema: {
                           model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                             }
                           }
                       }
                    });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            { field:"ProductName",title:"Product Name" },
                            { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
                            { command: ["edit", "destroy"], title: " ", width: "150px" }],
                        editable: {
                          mode: "popup"
                        }
                    });
                });
 
                function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                                }
                            }
                        });
                }
 
            </script>
        </div>
 
 
</body>
</html>

Regards,
Georgi Krustev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Xavier
Top achievements
Rank 1
answered on 23 Mar 2015, 10:33 AM
Hi Georgi,

I have made an example where you can see how to the control dropdownlist on grid is not open correctly the first time. I think this behavior is because the number issues in list is high.

In this URL you can find the project:
https://drive.google.com/drive/#my-drive

I hope you can help me on this topic.



Thanks in advance.



Xavier
0
Xavier
Top achievements
Rank 1
answered on 25 Mar 2015, 08:06 AM
Hi Georgi,

Sorry, the link you should use to download the project is:

https://drive.google.com/file/d/0B_6s7mAQgZsPcmtKVV9aMlV6TXM/view






Thanks in advance.



Xavier.
0
Georgi Krustev
Telerik team
answered on 25 Mar 2015, 10:34 AM
grid-editing-dropdownlist-virtualization.zip
Hello Xavier,

Thank you for the repro demo. It helped to observe the depicted issue and I can also confirm that the widget is not opened first time because of the large data set that it needs to display.

The only feasible workaround that I can suggest is to use the newly released "virtualization" functionality. This will allow you to show only subset of the data and you will improve the general UX experience.

Note that there are several issues in the Q1 2015 release that are already fixed and I would strongly suggest use the next internal build that will be public later this week.

Regards,
Georgi Krustev
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
DropDownList
Asked by
Xavier
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Xavier
Top achievements
Rank 1
Share this question
or