How to use dropdownlist in Popup Editor via Kendo Template

1 Answer 3367 Views
Grid
Redfield
Top achievements
Rank 1
Redfield asked on 20 Jul 2017, 06:48 AM
I was going great with the web project, until i found this issue, if i use the dropdownlist outside of the grid, it will display just fine, even if i assign it to the toolbar template, but when i assign it to grid's pop-up editor, it doesn't display the dropdownlist for me to create a new data, it just displays the blank text, can someone explain to me how to use dropdownlist in editor, i tried the custom editor but it doesn't help.

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 24 Jul 2017, 06:30 AM
Hello Redfield,

I have assembled small sample (dropdown-in-popup-editor.zip) which illustrates how to use Kendo DropDown widget inside a custom popup editor.

Please use it as a reference and do not hesitate to contact me if you have further questions.

You can find а collection of Telerik UI for ASP.NET MVC examples in the following Github repository:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Redfield
Top achievements
Rank 1
commented on 25 Jul 2017, 02:25 AM

Hi Georgi.

Oh thanks for the reply, i have a new problem that i can't find the exact solution from any documents of Telerik Demos.
How to display the item name instead of the id ( number type ) on the grid that was defined in the schema model ? 
Like i have a Model like this : 
schema: {
                            model: {
                                id: "Appointment_ID",
                                fields: {
                                    Appointment_ID: { type: 'number', editable: false },
                                    Status: { editable: true ,defaultValue: { id: 1, text: "Open"}},
                                    Customer_ID{ type: 'number', editable: true },
                                    Customer_Type { type: 'number', editable: true },

                                }
                            }

Status is a drop down list which looks like this :
function customStatusEditor(container, options) {
                $('<input required name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataTextField: "text",
                        dataValueField: "id",
                        dataSource:{
                            data: [ {text:"Open", id:1},
                                {text:"Close",id:0}]
                        }
                        })
            }

And i have Customer model which include Customer_ID as Number, Customer_Name as String and Customer_Type as Number; the Customer_Type is pointed to another model named Defined_Value which include Value_ID as number and Value_Name as String.

I want to display to the appointment grid the text of the Status but the grid displays the id number, i also want to display the Value_Name to the Customer_Type instead of the ID number, how can i do that ?

Georgi
Telerik team
commented on 26 Jul 2017, 01:57 PM

Hello Redfield,

In order to display the text it is possible to use column template, the following dojo illustrates how to display the text property instead of id of the Status field:


Possible solution to associate number field to some text value in another object is to use ferign key functionality. I have assembled small sample which illustrates how to use foreign key:


Another solution is to create view model that includes foreign key columns and bind the grid to that view model.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Redfield
Top achievements
Rank 1
commented on 27 Jul 2017, 02:43 AM

Hello Georgi

Thanks for the Reply, i had tried your method before asking, the Status in your demo will return Unidentified unfortunately, but i've figured it out in my case. 
For the Foreign Key Solution, it's not possible for me to do that since i have NO foreign key in the model and classes, due to the logic issue, so my method is to convert it in the controller instead. I think you should update your demos a little bit, i'm pretty sorry if i didn't describe it to you more clearly about my situation. 
Best Regard, Redfield.

Redfield
Top achievements
Rank 1
commented on 27 Jul 2017, 02:45 AM

Hello Georgi

Thanks for the Reply, i had tried your method before asking, the Status in your demo will return Unidentified unfortunately, but i've figured it out in my case. 
For the Foreign Key Solution, it's not possible for me to do that since i have NO foreign key in the model and classes, due to the logic issue, so my method is to convert it in the controller instead. I think you should update your demos a little bit, i'm pretty sorry if i didn't describe it to you more clearly about my situation. 
Best Regard, Redfield.

Georgi
Telerik team
commented on 28 Jul 2017, 02:37 PM

Hi Redfield,

From the provided information it looks like the foreign key is Customer_Type since it points to another model.

I have assembled small sample (foreign-key-column.zip) using the provided models, which illustrates how to display to the Value_Name value to the Customer_Type column. 


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Redfield
Top achievements
Rank 1
commented on 02 Aug 2017, 04:18 AM

Hi Georgi,

Thanks for the reply, i think i solved the problem, thank you very much

Steve
Top achievements
Rank 1
commented on 20 Nov 2018, 12:34 AM

Hi,

Just FYI - that does not appear to work (i.e. the dropdown) for a custom editor window (see attached - associated javascript).   There is a run-time error on the dropdown.   If I take the dropdown out, my custom pop-ups work.   If I use the method outline in your example it works but both the EDIT and CREATE go to the same window.   In short, it does not appear to hold true for custom editor windows (which I got from your support department as well)

 

Steve

 

 

Georgi
Telerik team
commented on 21 Nov 2018, 03:12 PM

Hi Steve,

Please have in mind that it is necessary to escape the initialization script of the drop down since it is within a Kendo Template. You can escape the initialization of the widget using the ToClientTemplate method.

e.g.

@(Html.Kendo().DropDownList()
...
.ToClientTemplate())

For your convenience I am attaching a sample which demonstrates how to include a drop down to the custom popup template.


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Redfield
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or