How to use dropdownlist in Popup Editor via Kendo Template

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

    Posted 20 Jul 2017 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
    383 posts

    Posted 24 Jul 2017 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 2017 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
    383 posts

    Posted 26 Jul 2017 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 2017 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 2017 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
    383 posts

    Posted 28 Jul 2017 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 2017 Link to this post

    Hi Georgi,

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

  9. Steve
    Steve avatar
    17 posts
    Member since:
    Oct 2014

    Posted 19 Nov in reply to Georgi Link to this post

    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

     

     

  10. Georgi
    Admin
    Georgi avatar
    383 posts

    Posted 21 Nov Link to this post

    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.
Back to Top