DDL Binding in Edit Templete of Listview

10 posts, 0 answers
  1. Ryan
    Ryan avatar
    1 posts
    Member since:
    Jan 2012

    Posted 21 Jan 2013 Link to this post

    I must be missing something, but I cannot seem to get a DDL to bind to remote data in the edit template of a listview...

    Template and script below... Any help here?
    <script type="text/x-kendo-tmpl" id="CompanyTemplateEdit">
        ...
              ...
               
    <dt>State</dt>
                <dd>
                    <input id="ddlState${CompanyID}" data-bind="value:State" name="State" />
                    #renderDDLStates(data)#
                 </dd>
                <dt>Postal Code</dt>
                <dd>
                    <input type="text" data-bind="value:PostalCode" name="PostalCode" required="required" validationMessage="required" />
                    <span data-for="PostalCode" class="k-invalid-msg"></span>
                </dd>
            </dl>                           
        </div>                       
    </script>
    $(document).ready(function () {
      
                listView.kendoListView({
                    dataSource: CompanySource,
                    template: kendo.template($("#CompanyTemplate").html()),
                    editTemplate: kendo.template($("#CompanyTemplateEdit").html())
                }).data("kendoListView");
            });
      
            var listView = $("#company_list");
              
            var CompanySource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/api/Company/" + $.cookie("C1AuthCompanyID"),
                          
                    },
                    update: {
                        url: "/api/Company/" + $.cookie("C1AuthCompanyID"),
                        type: "PUT",
                          
                    }
                },
                schema: {
                    model: {
                        id: "CompanyID",
                        fields: {
                            CompanyID: { editable: false, nullable: true },
                            ParticipantID: { type: "number" },
                            CompanyName: "CompanyName",
                            DBA: "DBA",
                            CompanyNumber: "CompanyNumber",
                            Street1: "Street1",
                            Street2: "Street2",
                            City: "City",
                            State: "State",
                            PostalCode: "PostalCode",
                            isApproved: { type: "boolean" },
                            isActive: { type: "boolean" },
                            isDeleted: { type: "boolean" }
                        }
                    }
                }
            });
      
            function renderDDLStates(data) {
                $("#ddlState" + data.CompanyID).kendoDropDownList({
                    dataTextField: "stateName",
                    dataValueField: "stateCode",
                    dataSource: [
                                    { stateName: "Texas", stateCode: "TX" },
                                    { stateName: "Pennsylvania", stateCode: "PA" }
                    ]
                });
            }
  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 23 Jan 2013 Link to this post

    Hello Ryan,

    The code to initialize the dropdownlist will be executed before the template is added. You could use the edit event to initialize the dropdownlist or a timeout in the renderDDLStates function. Another option is to use the declarative initialization.

    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ryan
    Ryan avatar
    1 posts
    Member since:
    Jan 2012

    Posted 23 Jan 2013 Link to this post

    Thanks for the reply... I eventually figured out the way to use the declarative initialization inside the template such as in the example "how to" article you linked to...
    <select data-role="dropdownlist" data-text-field="field" data-value-field="id" id="things" data-source="things" data-change="change"></select>
    It sure would be nice to have examples within the API docs for these attributes. Almost all your documentation shows javascript initialization examples, with no mention of the data- attributes. I spent days going through the Template and ListView and DDL documentation trying to find what I needed to do to make this work...

    As a new user of Kendo, how would I know that the attribute equivalent of dataTextField is "data-text-field", and not "data-textfield"?
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 25 Jan 2013 Link to this post

    Hello again Ryan,

    The Data Attribute Initialization documentation topic provides information on how the attributes can be determined from the configuration options.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Tenen
    Tenen avatar
    6 posts
    Member since:
    Feb 2015

    Posted 13 Apr 2015 in reply to Daniel Link to this post

    Ryan ,

    can you  please upload a working example?

    I'm struggling this more than I wanted to...

     

    thanks

  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 15 Apr 2015 Link to this post

    Hi,

    I created an example that demonstrates using the declarative initialization for a dropdownlist in the editor.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Drazen
    Drazen avatar
    3 posts
    Member since:
    Jun 2016

    Posted 28 Jun in reply to Daniel Link to this post

    Hi Daniel,

    Thank you for your example.
    However, let me ask you one more question:
    Since 'CategoryName' is not a property of a 'product'  what would be the best way to handle issue with displaying 'CategoryID' instead of 'CategoryName' in view template?

    Thanks.

     

  9. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 30 Jun Link to this post

    Hi,

    You could use the items from the categories dataSource to display the corresponding name - updated example.

    Regards,
    Daniel
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  10. Oleksandr
    Oleksandr avatar
    7 posts
    Member since:
    Oct 2008

    Posted 21 Nov Link to this post

    Thank you for example, Daniel.

    But could you confirm if using global variable for that purpose is a good way to go?

    I have kendo MVVM model which my listview (and drop-down) should be bound to. In addition I need my drop-down options list to be different based on other drop-down selection from within same listview. As for me it looks like it should be done with MVVM somehow rather than global varialbes, but I can't find any example or direction on how to do that. Could you please comment on that?

  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 Nov Link to this post

    Hello Oleksandr,

    Indeed, the usage of a global variable is just one way to accomplish this task. If you don't want to use global instance, then the whole data should be available on model level. Basically, every model should self-contain all required data. Thus you can avoid looking for something in the global scope.

    How this could be implemented depends entirely on your personal preference and business requirements. If you need further assistance on the concrete implementation, I  would suggest you contact our Professional Services, which are specialized in such custom solutions.

    Regards,
    Georgi Krustev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top
Kendo UI is VS 2017 Ready