DDL Binding in Edit Templete of Listview

[Ryan]

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" }

                ]

            });

        }

[Daniel]

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

[Ryan]

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"?

[Daniel]

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

[Tenen]

Ryan ,

can you  please upload a working example?

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

 

thanks

[Daniel]

Hi,

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

Regards,
Daniel
Telerik

 

 

[Drazen]

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.

 

[Daniel]

Hi,

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

Regards,
Daniel
Telerik

 

 

[Oleksandr]

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?

[Georgi Krustev]

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