Strange behavior with list of values in Internet Explorer

7 posts, 0 answers
  1. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 16 Mar 2015 Link to this post

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 18 Mar 2015 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 18 Mar 2015 in reply to Georgi Krustev Link to this post

    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.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 Mar 2015 Link to this post

    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.

     
  6. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 23 Mar 2015 in reply to Georgi Krustev Link to this post

    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
  7. Xavier
    Xavier avatar
    28 posts
    Member since:
    Dec 2010

    Posted 25 Mar 2015 Link to this post

    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.
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 25 Mar 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready