How to use dropdownlist in Popup Editor via Kendo Template

8 posts, 1 answers
  1. Redfield
    Redfield avatar
    10 posts
    Member since:
    Jun 2017

    Posted 20 Jul Link to this post

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

    Posted 24 Jul Link to this post

    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.
  3. Redfield
    Redfield avatar
    10 posts
    Member since:
    Jun 2017

    Posted 24 Jul Link to this post

    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 ?

  4. Georgi
    Admin
    Georgi avatar
    127 posts

    Posted 26 Jul Link to this post

    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.
  5. Redfield
    Redfield avatar
    10 posts
    Member since:
    Jun 2017

    Posted 26 Jul in reply to Georgi Link to this post

    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.

  6. Redfield
    Redfield avatar
    10 posts
    Member since:
    Jun 2017

    Posted 26 Jul in reply to Georgi Link to this post

    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.

  7. Answer
    Georgi
    Admin
    Georgi avatar
    127 posts

    Posted 28 Jul Link to this post

    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.
  8. Redfield
    Redfield avatar
    10 posts
    Member since:
    Jun 2017

    Posted 01 Aug Link to this post

    Hi Georgi,

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

Back to Top