I have a view where I am dynamically adding a number of textareas when the view loads.

I am then creating an editor out of all them by applying: $(".im_editor").kendoEditor({  ...

This is working fine, but next I need to add several dropdowns to the toolbars to insert html from several different categories.

It was quickly apparent that the "insertHtml" tool would not work as it can only be used once per editor (although does function in each of the rendered editors).

Next I tried using the "customTemplate" tool following the example on the Demos page.

This works fine on the first rendered editor, but does not render properly or function on the remaining editors.

Can someone provide assistance on how to accomplish this?  

@foreach(var sec in Model.Sections)
{
    <div class="internalapproval_investmemo_sectitle">@sec.SectionName</div>
    <table sectionid="@sec.SectionID">
        @foreach(var entry in Model.Entries.Where(e => e.SectionID == sec.SectionID).OrderBy(e => e.EntrySeqNo))
        {
            <tr>
                <td entryid="@(sec.SectionID.ToString() + "_" + entry.EntryID)">
                    <textarea id="@sec.TextAreaName" name="@("sec" + sec.SectionID.ToString())" class="im_editor" style="height:150px;">@(HttpUtility.HtmlDecode(entry.EntryText))</textarea>
                </td>
            </tr>
        }                                        
    </table>
}

<script type="text/x-kendo-template" id="insertToken-template">
    <select id='insertTokens' style='width:110px'>
        <option value=''>Insert token</option>
        <option value='{token: dealname}'>Deal Name</option>
        <option value='{token: dealtype}'>Deal Type</option>
        <option value='{token: sectortype}'>Sector Type</option>
    </select>
</script>

<script>   

    $(document).ready(function () {

        $(".im_editor").kendoEditor({
            resizable: { content: true },
            tools: [
                "bold",
                "italic",
                "underline",
                { name: "insertHtml",
                    items: [
                        { text: "token: UPB", value: "{token: upb}" },
                        { text: "token: Investment", value: "{token: investment}" }
                    ]
                },
                {
                    name: "customTemplate",
                    template: $("#insertToken-template").html()
                }
            ]
        });

        $("#insertTokens").kendoDropDownList({
            change: function (e) {
                var editor = $(".im_editor").data("kendoEditor");
                editor.exec("inserthtml", { value: e.sender.value() });
                console.log("change fired");
            }
        });

    });
</script>

I am playing around with default-v2 SASS for jquery and I noticed that placeholder or textbox focus/blur behave differently between standard input and input with icon.

<input class="k-textbox" placeholder="enter criteria" />

First example looks more "correct". Placeholder color is lighter. Box also gets a shadow on focus.

<span class="k-textbox k-space-right">
  <input placeholder="enter criteria" />
  <span class="k-icon k-i-search"></span>
</span>

Second example differes in a way it is flat. Placeholder is same color as text (confusing for user), box doesn't get any shadow on focus.

Is this a limitation or just a style misconfiguration? How can we make this to be consistent?

quick demo:

https://dojo.telerik.com/UmuwUYeJ

My grid is showing the ID in a column. The ID however is coming from the database and can't be changed. Also, the database creates it when adding a new item.

In other words: editing the ID when adding or editing a new item makes no sense.

How can I achieve this?

Here is what I tried:

@(Html.Kendo().Grid<DepartmentModel>()
      .Name("departmentsGrid")
      .HtmlAttributes(new { @class = "controls-default" })
      .Columns(c =>
      {
          c.Bound(x => x.Id);
          c.Bound(x => x.Name);
          c.Bound(x => x.Description);
          c.Command(b =>
          {
              b.Edit();
              b.Destroy();
          });
      })
      .ToolBar(b => b.Create())
      .Editable(b => b.Mode(GridEditMode.PopUp))
      .Sortable()
      .Scrollable()
      .Pageable(x => x.Refresh(true).PageSizes(true).ButtonCount(5))
      .DataSource(b => b.Ajax()
                        .Model(model =>
                        {
                            model.Id(x => x.Id);
                            model.Field(x => x.Id).Editable(false);
                        })
                        .Read(x => x.Action("ReadDepartments", "Departments").Data("getReadDepartmentsParameters"))
                        .Create(x => x.Action("CreateDepartment", "Departments"))
                        .Update(x => x.Action("UpdateDepartment", "Departments"))
                        .Destroy(x => x.Action("DeleteDepartment", "Departments"))))

Dear Telerik Forum

We have a problem with two virtual cascaded dropdown lists.
I gave an example where one dropdown list contains Swiss cities and the second dropdown list contains the corresponding postal codes.
Depending on the selected city, the drop-down menu with the postal codes should only show those that exist in the selected city. This also works as long as the second is not loaded virtual. As soon as the second dropdown is loaded virtual an error occurs, 'c is not a function'. Without the 'data-virtual' option it works fine again.

http://dojo.telerik.com/EQUDOBUg/4

Thank you very much

Best regards

Is there a way to bind a tabstrip data item badge?  For example, I want the tab header to be "Tab Header" having a badge = 10 but be able to update it via code.

Testing

Hi, 

Our business user is asking us to provide a list of charts we can do with kendo.  But current our application is still using the old Kendo JQuery library of version 2016.3.914. Could you please provide a list of charts that the old version supported. Since the page on your website is always  showing the components of  most recently version. 

https://demos.telerik.com/kendo-ui/

Thanks.