I have a sitemap bound kendo menu in my layout page that correctly displays the menu items in the ul as shown below. Although this works great for an mvc app with normal back end routing it doesnt work for client side routing such as the one provided by angular or others. Because im trying to build a spa I need the href to be #/controller/action. Is there any way to do this.  

 Server wrapper:

 @(Html.Kendo().Menu()
                             .Name("SiteNav")
                             .Direction(MenuDirection.Bottom)
                             .SecurityTrimming(true)
                             .BindTo("WebSiteMap", (item, siteMapNode) => { })
                            )

 

Generated html:

<ul class="k-widget k-reset k-header k-menu" id="SiteNav">
    <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home<span class="k-icon k-i-arrow-s"></span></a><ul class="k-group k-menu-group">
        <li class="k-item k-state-default"><a class="k-link" href="/Home/Contact">Contact</a></li>
    </ul>
    </li>
    <li class="k-item k-state-highlight k-state-default"><a class="k-link" href="/">Home 2</a></li>
</ul>

 

sitemap:

 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="" description="" roles="*">
    <siteMapNode title="Home" controller="Home" action="Index">
      <siteMapNode title="Contact" controller="Home" action="Contact" />
      <siteMapNode title="About" controller="Home" action="About"  roles="Admin"/>
    </siteMapNode>
    <siteMapNode title="Home 2" controller="Home" action="Index">
    </siteMapNode>
  </siteMapNode>

</siteMap>

This is the value that's in the database and being passed to the view:

<p>this is a paragraph</p>

 This is what is showing in the Editor:

 <p>this is a paragraph</p>

I've searched online for the solution, and found that I need to set encoded = false in the editor, and [AllowHtml] attribute to field in the class. I did that, but am still having the issue. 

Here is the code in the view for the editor -- the first line appends a text area into a div:

 

        $("#divParagraphs").append('<div class="search-box"><div class="row"><div class="col-md-12">Paragraph:</div></div><div class="row"><div class="col-md-12"><textarea class="Paragraph" id=' + id + '></textarea><input type="hidden" id=' + id + '_id value=' + pid + ' /></div></div></div>');

         $("#" + id).kendoEditor({
            encoded: false,
            tools: [
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull",
                "createLink",
                "unlink",
                "insertImage",
                "createTable",
                "addColumnLeft",
                "addColumnRight",
                "addRowAbove",
                "addRowBelow",
                "deleteRow",
                "deleteColumn",
                "foreColor",
                "backColor"
            ]
        });

 I'm out of ideas :-) Please help.

 Thanks,

Mike

 

Is there a way to auto play the page turn automation?  So if I have 5 images, it will turn the page one every X seconds.  I can get the first image to page to the second image, but never get subsequent images to page correctly.

I am trying to save and load column widths for a kendo Grid.
I have been storing the information in local storage in a format such as this "[{"Name":"Line","Width":78,"Field":"ReceiptLine"},{"Name":"Supplier","Width":97,"Field":"Supplier"}]" and then changing the grid's column fields widths to the widths in the local storage on the dataBound event.
Then I have been getting the grid to resize by doing the rather hacky method of hiding and showing a previously unhidden column. This method works effectively. But is there a better way to do this?

I've tried the grid.setOptions(grid.options) method but that gave me an error.

Hi Everyone,

I'm trying to add custom attributes to treeview nodes. I'm querying a web api 2 service trough a $.ajax call. On success event I firstly create an observable containing an observableHierarchy and then I bind it with the kendo tree view.

                        $.ajax({
                            url: serviceBaseUrl + "/Arguments/GetCategoryArgumentMap",
                            success: function(data) {
                                //Gestione espansione di tutti i nodi
                                //$(data).each(function() {
                                //    this["expanded"] = true;
                                //});
                                var checkedNodesNameClient = [];
                                argumentsDataSource = kendo.observable({
                                    hItem: kendo.observableHierarchy({
                                        data: data,
                                        schema: {
                                            model: {
                                                children: "Associateds",
                                                id: "ArgumentId",
                                                expanded: true
                                            }
                                        }
                                    })
                                });
                                $("#treeview").kendoTreeView({
                                    checkboxes: {
                                        checkChildren: true,
                                        template: function(data) { console.log(data.item.Associateds); return "<input type='checkbox' data-mainArgument='" + data.item.Associateds.mainArgument + "' />"; }
                                    },
                                    dataTextField: "ArgumentCode",
                                    check: onTreeViewItemCheck,
                                    select: onTreeviewItemSelection,
                                    dataSource: argumentsDataSource.hItem,
                                    dataBound : function () {
                                        $("#treeview > ul > li > div span.k-checkbox").hide();
                                        $("#treeview INPUT[type='checkbox']").addClass("km-widget");
                                    }
                                });
                                checkTreeViewItems(viewModel.result.AssociatedArguments, $("#treeview").data("kendoTreeView"), checkedNodesNameClient)
                                $("#argumentsFilter").bind("keyup", function(){
                                    $("#treeview > UL > LI").hide(); 
                                    $("#treeview > UL > LI:contains('" + $(this).val() + "')").show();
                                });
                                $("#selectedTVItems").text(checkedNodesNameClient.join(", "));
                            }
                        });

How can I achive my target?

After I upgrade the Kendo UI version from "2014.1.416" to  v2015.1.408, 

I found that all the grid column size is more larger than before. Is it need to apply additional css file ?

Before upgrade, I  just apply kendo.common.min.css and kendo.default.min.css.

I am getting strange behavior when I turned off the autosuggest programmatically. 

The scenario is that I have a  KendoAutoComplete input box along with search button. The search result come from both typing characters and pressing the search button. The requirement is that autosuggest should work when user has type at least 3 characters in the input, but the search button should open autosuggest even if one character is typed.

 

In order to do that I used the following code below: 

var turnOffAutoComplete = function () {
        autocomplete.options.suggest = false;
        autocomplete.bind("open", function (e) {
            e.preventDefault();            
        });        
    };

    var turnOnAutoComplete = function () {
        autocomplete.unbind("open");
        autocomplete.options.suggest = true;        
    };

 

$("#input_text").keyup(function () {       
        if ($(this).val().length >= 3) {
            turnOnAutoComplete();
        }
        else {
            turnOffAutoComplete();
        }
    });

$("#search-button").click(function () {
        turnOnAutoComplete();
        var val = $('#input_text').val();        
        autocomplete.search(val);
    });

 

The code above is causing the screen to becomes blank when user clicks anywhere on the screen after typing one character (autosuggest data is being fetchedfor first time). I checked in console, and saw <body> having style "display:none". 

​

Anyone knows why this would be happening? Need help asap. 

 

Hi

In following example I am simulating (via timeout) the time my DB needs to collect the data I want to feed to the kendo grid.

http://dojo.telerik.com/aviLI

The datasource gets a variable filled with the data like this

datasource: { data: data }

This "data" item is filled with the data from my DB.

I want to draw the grid on the page and show a loading indicator until the data array has been filled (simulated by the timeout).

How could I go about this?

Many thanks

In SchedulerCustomerEditor sample related to resources and custom templates... Why do you include a resources section in the scheduler definition, but then not use those in the custom edit template?​ $(function () {
  $("#scheduler").kendoScheduler({
   date: new Date(2013, 5, 13, 0, 0, 0, 0),
   startTime: new Date(2013, 5, 13, 7, 0, 0, 0),
   height: 600,
   editable: {
    //set the template
    template: kendo.template($('#CustomEditorTemplate').html())
   },
   timezone: "Etc/UTC",
   resources: [
   {
    title: "Room",
    field: "RoomID",
    dataTextField: "Text",
    dataValueField: "Value",
    dataColorField: "Color",
   dataSource: [
    { Text: "Meeting Room 101", Value: 1, Color: "#6eb3fa" },
    { Text: "Meeting Room 201", Value: 2, Color: "#f58a8a" }
   ]
    },{
    title: "Attendees",
    field: "Attendees",
    multiple: true,
    dataTextField: "Text",
    dataValueField: "Value",
    dataColorField: "Color",
   dataSource: [
   { Text: "Alex", Value: 1, Color: "#f8a398" },
   { Text: "Bob", Value: 2, Color: "#51a0ed" },
   { Text: "Charlie", Value: 3, Color: "#56ca85" }
   ]
  }
 ],
...
 <script type="text/x-kendo-template" id="CustomEditorTemplate">
 ... other markup ...
  <div data-container-for="RoomID" class="k-edit-field">
   <input id="RoomID" name="RoomID" style="width: 200px" type="text"
    data-bind="value:RoomID"
    data-val="true"
    data-val-number="The field RoomID must be a number."
   data-source='[{"text":"Meeting Room 101","value":1},{"text":"Meeting Room 201","value":2}]'
    data-text-field="text"
    data-value-field="value"
    data-value-primitive="true"
    data-option-label="None"
    data-role="dropdownlist" />
  </div>


In the template, shouldn't the resources be referenced in a way that is similar to the following though in this case the resources[0] reference does not find the resource...

​<div data-container-for="sponsorid" class="k-edit-field">
    <input id="SponsorID" name="SponsorID" style="width: 200px" type="text"
           data-bind="value:SponsorID"
           data-val="true"
           data-val-number="The field SponsorID must be a number."
           data-source=resources[0].dataSource
           data-text-field=resources[0].dataTextField
           data-value-field=resources[0].dataValueField
           data-value-primitive="true"
           data-option-label="*No Sponsor"
           data-role="dropdownlist" />
< /div>

The above not finding resources[0] which is odd because it finds it from the following script:
< div class="k-edit-field" id="resourcesContainer" />
< script>
    jQuery(function() {
        var container = jQuery("#resourcesContainer");
        var resources = jQuery("#scheduler").data("kendoScheduler").resources;

        for( resource = 0; resource<resources.length; resource++)
        {
            if(resources[resource].multiple)
            {
                jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                  .appendTo(container)
                  .kendoMultiSelect({
                      dataTextField: resources[resource].dataTextField,
                      dataValueField: resources[resource].dataValueField,
                      dataSource: resources[resource].dataSource,
                      valuePrimitive: resources[resource].valuePrimitive,
                      itemTemplate: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField),
                      tagTemplate: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                  });

            } else {
                jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[resource].field))
                 .appendTo(container)
                 .kendoDropDownList({
                     dataTextField: resources[resource].dataTextField,
                     dataValueField: resources[resource].dataValueField,
                     dataSource: resources[resource].dataSource,
                     valuePrimitive: resources[resource].valuePrimitive,
                     optionLabel: "None",
                     template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                 });
            }
        }
})
< /script>

Hi,
I'm trying to bind a custom command using MVVM and having no luck yet. I'm binding the function on the model inside the data-columns attribute, but the function does not fire when I click the command button. instead it displays an jquery error "Uncaught TypeError: undefined is not a function", i've tried also removing the quotation marks from the click command property, because in other thread someone says: "The name should not be surrounded by quotation marks." but it does not seems to work either.

please someone help me!. I also reprodced the errero in jsfiddle here