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

Editable grid autocompletion

17 Answers 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alexey
Top achievements
Rank 1
Alexey asked on 20 Dec 2011, 03:14 PM
Is it possible to add autocompletion for editable fields in Grid?

17 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 22 Dec 2011, 10:51 AM
Hi,

I'm afraid  that in the current version of KendoUI changing the editors are not supported. However, have already addressed this limitation and with the next version of the grid widget, specifying custom editors will be possible.  I have attached a small sample use an internal build of KendoUI and demonstrates basic usage of such custom editor. 

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Igor
Top achievements
Rank 1
answered on 22 Dec 2011, 10:15 PM
Hi Rosen,

this is great news :) it's exactly the functionality I have been missing. I am wondering if it can be used to enable DropDownList or ComboBox as editing option. I managed to add a ComboBox, but after selecting the item I have only value without text in a grid.


Thanks for a great sample,

Igor
0
Nikolay Rusev
Telerik team
answered on 23 Dec 2011, 03:30 PM
Hello  Igor,

If you have the following editor for the column the text from the combo box will be shown instead of the value /Notice that the dataValueField field option is not set/:
function productNameEditor(container, options) {
 $("<input />").attr("name", options.field)
   .appendTo(container)
   .kendoComboBox({
     dataTextField: "ProductName",
     //dataValueField: "ProductID",
     dataSource: {
       transport: {
         read: {
           url: "http://demos.kendoui.com/service/Products",
           dataType: "jsonp"
         }
       }
     }
  });
}

The above solution is one of the options that the Grid provides for this scenario. If you set the dataValueField /i.e. uncomment it from the snippet above/ you other option - to handle edit event of the Grid and have the following handler:
edit: function(e) {
 var cell = e.container,
   column = this.columns[this.cellIndex(cell)],
   field = column.field,
   comboBox = cell.find("input[name=" + field + "]").data("kendoComboBox");
 
 if (comboBox) {
  this.editable.binder.options[field] = {
   parse: function(value) {
    return comboBox.text();
   }
  };
 }
}

P.S. The solution is based on the example provided by my colleague Rosen the previous post.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cagatay
Top achievements
Rank 1
answered on 28 Dec 2011, 04:09 PM
There is small bug in the posted example. When dropdown is pulled down, clicking an item in the dropped down list causes grid to loose focus and this takes grid cell out of edit mode so clicked item is nor set in grid cell.
0
Nikolay Rusev
Telerik team
answered on 28 Dec 2011, 04:47 PM
Hello Cagatay,

Indeed we are aware of this issue. Unfortunately I cannot offer you a fix or workaround at this moment. We will do our best to have it fixed as soon as possible.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cagatay
Top achievements
Rank 1
answered on 28 Dec 2011, 05:03 PM
Is there any chance that this fix will be ready for january minor release ?
0
Cagatay
Top achievements
Rank 1
answered on 28 Dec 2011, 05:37 PM
Hello Nikolay,

In fact if the grid is not scrollable then this incorrect behaviour does not occur. So setting scrollable: false is fine for now.. This is my poorman's workaround for this bug...
0
Nikolay Rusev
Telerik team
answered on 29 Dec 2011, 11:01 AM
Hello Cagatay,

We will do our best to have it fixed for the minor release in January, but I can not commit to a date.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Igor
Top achievements
Rank 1
answered on 29 Dec 2011, 11:10 AM
Hi Nikolay,

thanks for the info. I would appreciate if this feature will be available in January. I have purchased the commercial licence and this is a major priority for my project.

Cheers,
Igor
0
Cagatay
Top achievements
Rank 1
answered on 29 Dec 2011, 11:37 AM
Hi Nikolay,

I am in exact situation with Igor. So fixing this in january minor release would be great...

Thanks..
0
YoungJo
Top achievements
Rank 1
answered on 30 Dec 2011, 06:48 AM
I've tested kendoDropDownList. That in the example.
However, Grid does not enter a value in the Cell. When I change DropdownList.

Please help 
me how to apply a value Cell. When I change the dropdownlist 


http://jsfiddle.net/messfilm/j9gFN/ 




sorry, I could not Write English well 
0
Nikolay Rusev
Telerik team
answered on 30 Dec 2011, 02:59 PM
Hello Yenjo,

As explained in the earlier in the thread we are working on that issue and will try to fix it as soon as possible. However it is not a trivial task and might take longer time to address it.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shane P
Top achievements
Rank 1
answered on 22 Jan 2012, 06:56 AM
I really need to be able to be able to do this to.

I'm using the commercial licence running the latest internal release and still having the same problem. Any expected release date for the fix?
0
Nikolay Rusev
Telerik team
answered on 23 Jan 2012, 10:43 AM
Hello Shane,

You can try download the latest internal build from your account and try once again. This issue was recently fixed.

Regards,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shane P
Top achievements
Rank 1
answered on 23 Jan 2012, 11:52 PM
Awesome work. Thank you
0
Joshua
Top achievements
Rank 1
answered on 27 Apr 2012, 03:02 AM
I am trying to add an autocomplete to a grid. I have tried to replicate the simplest example possible.

http://jsfiddle.net/grippstick/YKA2c/34/ 


The main problem is that when you select something in the auto complete the first time it just blanks it out. In the samples that are provided they never seem to use the normal scenario where you have an id and a name.

The other huge problem is that it displays the ID first and not the name.

Can anyone help with this?
0
Guillaume
Top achievements
Rank 1
answered on 26 Nov 2012, 03:50 PM
Hi, I'm having the same problem as Joshua, can't make the autocomplete work when binding to an object with ID ad Name.
Any luck someone?
Thanks
Tags
Grid
Asked by
Alexey
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Igor
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Cagatay
Top achievements
Rank 1
YoungJo
Top achievements
Rank 1
Shane P
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Guillaume
Top achievements
Rank 1
Share this question
or