This is a migrated thread and some comments may be shown as answers.

DropDown editor in wrong place

6 Answers 547 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sergey
Top achievements
Rank 1
Sergey asked on 09 May 2012, 12:46 AM
Hi All,

I have troubles witj DropDown editor ingrid, it  occasionally the window with the options will pop up in top left of computer screen. 

{ field: "ptcCode", title: "Package To", template: '#= kendo.toString(ptcName) #',
  editor: ptcDropDownEditor, width: 200 }
//
function ptcDropDownEditor(container, options) {
$('<input data-text-field="Name" data-value-field="Code" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
   autoBind: false,
   dataSource: ptcDataSource,
 });
}

Any idea to resolve this?

6 Answers, 1 is accepted

Sort by
0
Tony H
Top achievements
Rank 1
answered on 09 May 2012, 09:35 AM
Hi Sergey,

I had this problem and it took me quite a while to figure out because I thought I had done something wrong.  I figured out eventually that this is a bug and is because I was clicking the drop down on a cell with a null value in it; the Kendo drop down list control seems to have a problem with null values in grids at least and this caused the drop down to appear in the top left corner of the screen.  

However, it only does it on the second opening of the drop down, for example, click and open up the drop down the first time and it appears normal.  Second time you click and open it, it opens two drop down lists, one in the correct place and one in the top left corner of the screen.

Unfortunately I haven't found a workaround for this and I was going to report this bug with Kendo but I haven't got around to it yet but I hope that this will suffice now unless there is somewhere else I should report bugs?
0
Curt
Top achievements
Rank 1
answered on 16 May 2012, 01:19 PM
I have a workaround that seems to work.  In the grid "edit" event I hide the ghosted div.

edit: function (e){
 $(".k-animation-container").hide();
}

I am also doing this on the open event for the dropdown.
open: function(e) {
 $(".k-animation-container").hide();
}

I was seeing the div appear in top left sometimes when i would edit a grid row and sometimes when I actually opened the dropdown list.

Also, it seems that a new div is created each time you edit a row for the editor? Maybe this is part of the issue?

I'd like to see what the admins have to say about this issue.
0
Cody
Top achievements
Rank 1
answered on 07 Oct 2013, 05:55 PM
I'm having this problem as well. I have the DDL in a listview though, not a grid.
0
Alexander Valchev
Telerik team
answered on 10 Oct 2013, 03:43 PM
Hello guys,

@Cody
This forum topic is relatively old. Which Kendo UI version are you using? If it is an outdated one, please try to upgrade to latest internal build as it contains a log of fixes and let me know if this fixes the issue.

If not, we will appreciate if you can provide a small but runnable jsBin sample that isolates it. In this way we will be able to investigate your exact configuration and if it turns out that the problem is caused by a bug in the framework to fix it.

Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cody
Top achievements
Rank 1
answered on 10 Oct 2013, 03:52 PM
Thanks Alexander - I'm using 2013.2.823.  I finally found some steps to recreate it in my application. I'll see if I can create a small isolated example for you on jsbin or fiddlr. 

My scenario is that I have a drop down list and a textbox in my listview item template. If I type text into the textbox before I click on the drop down, I get the drop down list's list in the top left corner of the screen.  If I click the drop down list first it does not occur.  

one complexity to my scenario in that my textbox is dynamically created in code. I suppose that could contribute to it although I'm not sure how yet.

this is my markup for the listview template. the textbox is created inside the span tag dynamically later in js.
<script type="text/x-kendo-template" id="filterTemplate">
     <div class="filter-field-container">
          <div class="filter-field k-block k-shadow ">
               <div>
                    <select data-role="dropdownlist" data-bind="value:field, source:fieldList"   tabindex="-1"></select>
                    <select data-role="operatormenu" data-bind="value:operator"  tabindex="-1"></select>
                    <span ></span>
               </div>
          </div>
     </div>
</script>


0
Alexander Valchev
Telerik team
answered on 15 Oct 2013, 10:55 AM
Hi Cody,

Your scenario involves custom logic (dynamic creation of DOM elements) to which we have no knowledge about. Could you please provide an isolated sample so we can examine your exact set-up and investigate the issue? Please provide such sample and we will check it right away.
Thank you in advance.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Sergey
Top achievements
Rank 1
Answers by
Tony H
Top achievements
Rank 1
Curt
Top achievements
Rank 1
Cody
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or