Binding DropDownList in Template

7 posts, 0 answers
  1. Kay
    Kay avatar
    10 posts
    Member since:
    Apr 2016

    Posted 25 Apr 2018 Link to this post

    Even though many similar topics can be found on the internet, I wasn't able to bind my dropdownlist value within a scheduler template:

     

    this is my code within the template:

     

    <div class="k-edit-label"><label for="trainerId">Trainer</label></div>

    <div data-container-for="trainerId" class="k-edit-field">
        <input id="trainerId" name="trainerId"
               data-bind="value:trainerId"
               data-role="dropdownlist" />
    </div>

     

    the dropdownlist is beeing created by edit event of scheduler:

     

      // Creating dynamic dropdown
                e.container.find("#trainerId").kendoDropDownList({
                    dataTextField: "Text",
                    dataValueField: "Value",
                    change: function(e) {
                       
                    },
                    dataSource: {
                        transport: {
                            read: {
                                type: 'post',
                                dataType: "json",
                                url: '@Url.Action("Trainers_List","Trainer")',
                            }
                        }
                    }
                });

     

    Fiddler shows :

    'TrainerId' is listed in the body but has no value.

    Instead there are other fields like:

    trainer.Disabled,

    trainerId.Sorting,

    trainerId.Value which actually holds the correct value.

     

    What am I doing wrong here?

  2. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 27 Apr 2018 Link to this post

    Hello Kay,

    In addition to the jQuery plug-in widget initialization, each Kendo UI control may be initialized and configured through data attributes. Therefore, when data-role="dropdownlist" attribute is used on the select element, a DropDownList widget is initialized. With this approach, there is no need to reinitialize the widget again from the Scheduler's edit event. Instead, you can just define the data source configuration and use the setDataSource() method to apply it to the widget (Dojo example):
    // Editor template
    <div data-container-for="ownerId" class="k-edit-field">
      <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
        data-value-field="ProductID" data-text-field="ProductName">        
      </select>
    </div>
     
    // Scheduler's edit event handler
    <script>
      edit: function(e) {             
        var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
        var ownersDataSource = new kendo.data.DataSource({                 
          type: "odata",                
          transport: {
            read: {
            }
          }               
        });
        ownerId.setDataSource(ownersDataSource);                           
    },
    </script>

    Alternatively, you could define a simple <select> element and initialize the widget from the Scheduler's edit event handler as follows:
    // Editor template
    <script id="customEditorTemplate" type="text/x-kendo-template">
        <input id="dropdownlist" />
     </script>
     
    // Scheduler's edit event handler
    <script>
      edit: function(e) {
        var ddlContainer = e.container.find("#dropdownlist");
        var dataSource = new kendo.data.DataSource({
          transport: {
            read: {
              dataType: "jsonp"
            }
          }
        });
     
        ddlContainer.kendoDropDownList({
            dataSource: dataSource,
            dataTextField: "ProductName",
            dataValueField: "ProductID"
        });
      }
    </script>


    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Kay
    Kay avatar
    10 posts
    Member since:
    Apr 2016

    Posted 02 May 2018 in reply to Dimitar Link to this post

    Thanks four your answer.

     

    Unfortunately I am still not able to bind the widget value.

    I use html wrapper to create the scheduler widget with following settings:

     

          .Editable(editable => { editable.TemplateName("_MyTemplate").Resize(true); })

    and

    .EventTemplate("<div class='k-event-template #:getCustomCssStyle(data)#'<p>#=title#</p></div>")

     

    MyTemplate is like this:

     

    ...

    <div class="k-edit-label">
        @(Html.LabelFor(model => model.End))
    </div>
    <div data-container-for="end" class="k-edit-field">
        <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <span data-bind="text: endTimezone"></span>
        <span data-bind="text: startTimezone, invisible: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
    </div>


    <div class="k-edit-label"><label for="trainerId">Trainer</label></div>

    <div data-container-for="trainerId" class="k-edit-field">
        <select id="trainerId" data-bind="value:trainerId" data-role="dropdownlist"
                data-value-field="Value" data-text-field="Text"></select>
    </div>

    ...

    in edit event of the widget:

     // Creating dynamic dropdown
                var trainerId = e.container.find("#trainerId").data("kendoDropDownList");
                var trainerIdDataSource = new kendo.data.DataSource({                 
                    type: "json",                
                    transport: {
                        read: {
                            type: 'post',
                            dataType: "json",
                            url: '@Url.Action("Trainers_List","Trainer")',
                        }
                    }     
                });
                trainerId.setDataSource(trainerIdDataSource); 

     

    dropdown 'trainerId' is working fine but fiddler still shows

    TrainerId

    trainerId.__kendo_devtools_id 36
    trainerId.Disabled false
    trainerId.Group

    trainerId.Selected false
    trainerId.Text Mike Tyson
    trainerId.Value 538c7a4e-0b7f-43ef-ba36-1e68d251694c

     

     

     

     

  4. Kay
    Kay avatar
    10 posts
    Member since:
    Apr 2016

    Posted 02 May 2018 in reply to Kay Link to this post

    I just figured it out by myself.

    The solution is to capitalize the name of the property 'trainerId' in data-binding attribute:

    <div data-container-for="trainerId" class="k-edit-field">
        <select id="trainerId" data-bind="value:TrainerId" data-role="dropdownlist"
                data-value-field="Value" data-text-field="Text"></select>
    </div>

     

  5. Kay
    Kay avatar
    10 posts
    Member since:
    Apr 2016

    Posted 18 May 2018 Link to this post

    Unfortunately, after havin updated to version:

    the found solution is not working anymore.

    Fiddler shows:

    TrainerId [object Object]

    Dropdown works fine and consumed data:

    [{"Disabled":false,"Group":null,"Selected":false,"Text":"aa
    bb","Value":"538c7a4e-0b7f-43ef-ba36-1e68d251694c"}]

  6. Kay
    Kay avatar
    10 posts
    Member since:
    Apr 2016

    Posted 18 May 2018 in reply to Kay Link to this post

    Updated to version 2018.2.516
  7. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 22 May 2018 Link to this post

    Hello Kay,

    Capitalizing the name of the property depends on the dataSource schema definition. Please do check the provided Dojo example in my previous reply, where the following configuration can be observed:
    dataSource: {
      ...          
      schema: {
        model: {
          id: "taskId",
          fields: {                
            ...
            ownerId: { from: "OwnerID", defaultValue: 1 }      
          }
        }
      }
    }

    If the schema is set successfully and the error continues to persist, I would suggest you to open a separate support thread in the ticketing system, where you could provide us with additional information and a runnable example to examine. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top