I have a tab strip in AngularJS where I am saving the user's last viewed tab and then trying to programmatically select that tab when they return to the page using ng-class and a scoped variable. This worked in a previous version of kendo UI, but I recently upgraded to the latest version and it no longer works. Here is how it is setup:

 <div kendo-tab-strip="tabStrip" k-content-urls="[null, null]">
        <ul>
            <li ng-class="selectedTab == 'Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Surveys')">Surveys</li>
            <li ng-class="selectedTab == 'Assigned Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Assigned Surveys')" >Assigned Surveys</li>          
        </ul>

     <div>Tab1</div>

     <div>Tab2</div>

</div>

The tab will show that it is selected, but the div content does not display. Any suggestions on an possible workaround?

Hi!

I have bee through a lot of threads regarding this but I'm not able to find a dependable working solution. My case is that

• It is pure JS grid
• The grid is bound to local JS array
• It is not in batch mode
• The toolbar only allows adding new record
• Once a row is added, it is in full edit mode and the command buttons read: Update and Cancel
• Once I press update to save the row, it leaves edit template and the commands read: Edit and Delete

Here is the basic code to create the grid.

I still see UPDATE, CANCEL, DELETE, and EDIT text. I have tried the following:

• http://www.telerik.com/forums/how-to-show-image-only-button-for-destroy-command-button#nZn3GJ0jUUmKUCnHtaZp5Q
• http://www.telerik.com/forums/image-only-on-command-buttons#-HlVbGjcFUKCnJ9Elngmew
• https://onabai.wordpress.com/2012/09/05/kendoui-grid-toolbar-button-with-icon-only/

Using AngularJS I have a grid that I can drag the header from and place into an input field.

What I would like to do is drag and place this header in the same fashion that DataTransfer.setData() works, this will allow me to keep adding information to the input field in whichever order I would like.

Here is a plunker with an example of what I am trying to achieve though some reason the kendo header won't populate the input in plunker but it does work on my local project.

Thanks, any help on this would be great as I really want to use the kendo grid for this

Hi!

I have the following code:

<div id="main-section-header" class="row">
    <h2 id="team-efficiency" class="col-xs-3">Security Groupings</h2>
    <div style="clear:both;"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

    });

    function addClick(e) {
        e.preventDefault();

        var dialog = $("#addGrouping").data("kendoWindow");
        dialog.center();
        dialog.open();
    }

    function getSelectedIndex() {
        var selectedIndex = $("#securityGroupings").data('kendoDropDownList').select();

        if (selectedIndex == -1)
            selectedIndex = 0;
        alert("blablabla")
        var expandedNode = $('#expandedNode').val();
        return { selectedGroup: selectedIndex, selectedNode : expandedNode}
    }

    function onDropDownChanged(e) {
        var treeView = $('#treeView').data('kendoTreeView');
        treeView.dataSource.read();
        alert('treeview refreshed');
    }

    function onDataBound(e) {
        var dropDown = $("#securityGroupings").data('kendoDropDownList');

        var selected = dropDown.select();
        alert('onDataBoundCalled: ' + selected);
        if (dropDown.select() == -1)
        {
            this.select(0);
            this.trigger("change");
        }
    }

    function onExpanded(e) {
        var tree = $('#treeView').data('kendoTreeView');
        var data = tree.dataItem(e.node);
        $("#expandedNode").val(data.id);
    }

</script>

<div class="panel panel-default">
    <h1> Select a security grouping</h1>
    <p>

        @(Html.Kendo().Button()
              .Name("addButton")
              .Content("<i class='fa fa-plus rd-k-med-icon'></i> Add")
              .Events(e => e.Click("addClick")))

        @(Html.Kendo().DropDownList()
              .Name("securityGroupings")
              .DataTextField("Name")
              .DataValueField("Id")
              .SelectedIndex(0)
              .Events(e => e.Change("onDropDownChanged"))
              .Events(e => e.DataBound(("onDataBound")))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetSecurityGroupings", "SecurityGrouping");
                  });
              })
              .HtmlAttributes(new {style = "width: 50%"})

              
              )
    </p>

    @Html.Hidden("expandedNode")

    @(Html.Kendo().TreeView()
        .Name("treeView")
        .DataTextField("Name")
        .Events(e => e.Expand("onExpanded"))
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("GetRootGrouping", "SecurityGrouping").Data("getSelectedIndex")
            )
        )
        .Checkboxes(checkboxes => checkboxes
                .Name("checkedFiles")
                .CheckChildren(false))

    )
</div>

@(Html.Kendo().Window()
    .Name("addGrouping")
    .Title("Security Grouping")
    .Actions(a => a.Clear())
    .LoadContentFrom("OpenNewGrouping"))

I am populating the contents of a TreeView with the contents of a DropDownList. The function onDropdownChanged works as expected if the TreeView is at the root level but if a node is expanded then it just returns the children of the old root and ignores the newly selected root.

Any help is appreciated :)

If you use the below - r is not passing the valid state

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").value("r");
    sheet.range("A1").validation({
        from: "r",
        comparerType: "equalTo",
        dataType: "text",
        messageTemplate: "Not Valid."
    });

I have just started integrating kendoui components with my angular js app. Here I am having hard times figuring out the angularjs compatible attributes for the grid. 

It would have been much relief if there was/is any link which could highlight all the necessary attributes and their usage. By attribute I mean : k-options, k-placeholder, k-filter etc.

I have the following grid:

There are other fields but "RateType" is the one I have a question about. The field is an object and I'm using the template so the Name property is displayed in the grid.

When I attempt to filter by that column I get the following javascript error:

My question is, how do I get it to filter by the Name property instead of the object? I tried searching the forums and found this post: http://www.telerik.com/forums/inline-grid-filtering---column-bound-to-property-object

In that post, Plamen provided a sample (http://dojo.telerik.com/@zdravkov/ApiJU/2) which has the Category column setup the same way my RateType column is setup. In that sample, when I try to apply a filter on the Category column, I get the same javascript error:

Is this a bug? How can I get the filter to compare against the Name property that I'm using in the template?

The cascading is not working in IE11 when filtering is enabled. The sample below is taken directly from "Edit this example" for http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

I have enabled the filtering on the first dropdown box. In IE11 the child dropdown is not enabled to continue the filtering once an option is selected in the first dropdown. The expected behaviour works fine in Chrome and Firefox.

Sample:

http://dojo.telerik.com/umAjIW/2

Single line added at 06 to enable filter:

IE Version: 11.0.9600.18427

Windows 8.1 Enterprise x64

There are two custom button on kendo scheduler one for show horizontal grouping and another for vertical grouping.
                                                How we write grouping method programmatically? We not implement grouping function in scheduler initialization.

Thanks 

Ranu Verma