I couldn't find an example of grid within a grid within a grid.   Is this even possible using razor syntax?  

I sort of remember .toClientTemplate() failing for the 2nd grid within grid.

I have a tabstrip that I am loading with some buttons (x for close etc.) in the tab, not the content area.

I need to be able to determine if the tab that contains the button that was clicked is the currently selected tab (because, I need to access the content of that tab for one of the button's functionality) and I would like to jump out of the javascript if the tab is not the currently selected one.

Here is the complete code I'm using to build my tabs.

    function loadTab(name, id, url, pinned) {

        debugger;

        if (name == "Log Out") {
            window.location(url);
            return;
        }
        //special case for logout redirect.  
        //replace puts the url in page history so the user cannot use the back button to navigate back to the application without logging in
        if (name == "Log Out") {
            window.location.replace(url);
            return;
        }
        
        var $item = $("#" + id).parents('li');

        if ($item.length != 0) {
            tabStrip.select($item);
        } else {
            var html = "<span id='" + id + "' class='k-button k-button-icon'>" +
                "<span class='fa fa-times fa-small fa-button'></span>" +
                "</span>" +
                "<span id='" + id + "-pin' class='k-button k-button-icon'>" +
                "<span class='fa fa-thumb-tack fa-rotate-90 fa-small fa-button'></span>" +
                "</span>" +
                "<span id='" + id + "-window' class='k-button k-button-icon'>" +
                "<span class='fa fa-caret-right fa-regular-lift fa-button'></span>" +
                "</span>";

            $.ajax({
                url: url,
                type: 'get',
                success: function (data) {
                    // Wrap the tab content's HTML with a div that has a style display:relative 
                    //so that ew can use wait dialogs.
                    var divData = "<div class='connect-tab-wait-dialog-wrapper'>" + data + "</div>";
                    
                    tabStrip.append(
                    {
                        encoded: false,
                        id: id,
                        text: name + html,
                        content: divData
                        
                    });
                    
                    $("#" + id).click(function() {
                            connect.shell.removeTab(this);
                    });

                    if (pinned === 'True') {
                        $("#" + id + "-pin").children("span").toggleClass("fa-rotate-90");
                    }

                    //The pin on the tab is used to set the app up to be automatically loaded on startup
                    //so when toggled, the event will make an ajax call to add/remove the app from the 
                    //OSD_USERS_APPLICATIONS_PINNED database table.
                    $("#" + id + "-pin").click(function () {
                        connect.shell.togglePin(this, id);
                    });
            
                    $("#" + id + "-window").click(function() {
                        connect.shell.loadWindow(this);
                    });
            
                    $item = $("#" + id).parents('li');

                    expandContentDivs($tabStripElement.children(".k-content").last());

                    tabStrip.select($item);
                },
                error: function (x, e) {

                    if (x.status == 404) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>404 - Not Found</div>", null, false);
                    }
                    else if (x.status == 401) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>401- Unauthorized</div>", null, false);
                    }
                    else if (x.status == 402) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>403 - Access Denied</div>", null, false);
                    }
                }
            });

            // Update the application use count so that the "Favorites" widget shows their most used applications
            $.ajax({
                url: 'Home/UpdateApplicationUseCount',
                type: 'POST',
                data: JSON.stringify({ applicationPk: id }),
                contentType: 'application/json;',
                success: function (result) {
                    if (result === true) {
                        
                    }
                },
                error: function () {
                }
            });
        }        
    }

The loadWindow function takes the content of the tab and pops it out into its own window.  When the tab is not the current tab, it gets the content from the wrong tab.

I tried setting the selected tab first, but that did not seem to work.

    function loadWindow(me) {
        tabStrip.select($(me).parents('li'));

        var innerHtml = $(tabStrip.contentHolder(tabStrip.select().index())).html(),
            win = window.open(),
            outerHtml = $.ajax({
                    type: "GET",
                    url: 'Home/Wrapper',
                    async: false,
                }).responseText;
        
        outerHtml = outerHtml.replace('[innerHTML]', innerHtml);
        
        win.document.open();
        win.document.write(outerHtml);

        try {
            win.document.close();
        } catch(e) {
            alert(e);
        }

        removeTab(me);
    }



 

Hi,

There seems to be a bug with the "Add new record" feature and virtual scrolling. Here is a demo showing the issue (happened in both the Q1 and Q2 2014 releases):

http://dojo.telerik.com/UloT

As soon as a record is added, scrolling in the grid breaks. In my own application, debugging the unminified .js showed that Kendo was going into a loop of calling DataSource.prefetch() endlessly until the stack overflowed. Not sure if that's happening in this demo as well but it seems to be the same problem.

Is this a known issue?

Thanks,
Nick

Hi, when you remove a column from the column menu, the remaing cols lose their width. That happens when you explicitly define column width for more than 1 column. You can see an example in http://dojo.telerik.com/AGaQ, taken from http://demos.telerik.com/kendo-ui/grid/column-menu, the only difference is that I set the column witdh for everycolumn and not only the first one.
Thanks.

I've seen some similar posts, but not exactly what I need.

I have two ListViews

Items can be dragged and dropped between them.

I need to be able to remove the dragged item from one list and add it to the other list.

This is how the ListView is created.

<div id="serversAll">
            <div data-role="scroller" style="background-color: gray; height: 300px; width: 370px; padding-top: 13px; padding-bottom: 17px;">
                <table data-bind="source: serversAll" data-template="templateServers" class="servers"></table>
            </div>
        </div>

var vmSevers = kendo.observable({
       isVisible: true,
       serversAll: new kendo.data.DataSource({
           schema: {
               model: {
                   id: "Id"
               }
           },
           batch: false,
           transport: {
               read: {
                   url: url
               }
           }
       })
   });

   kendo.bind($("#serversAll"), vmSevers, kendo.mobile.ui);

Hi,

Passing array as an argument to ObservableArray push does not work as expected. Would it not make sense to check if arguments contains a single array and use it as a parameter to  push.apply(this, items). Here is a sample.

var kendo = window.kendo,

    CHANGE = "change",

    isArray = $.isArray,

    push = [].push,

    stringify = JSON.stringify;

 

kendo.data.ObservableArray.prototype.push = function () {

    var index = this.length;

    var items = arguments;

 

    // if no args passed return length

    if (items.length === 0)

    { return index; }

 

    if (items.length === 1 && isArray(items[0])) {

        items = items[0];

    }

 

    items = this.wrapAll(items);

    var result = push.apply(this, items);

 

    this.trigger(CHANGE, {

        action: "add",

        index: index,

        items: items

    });

 

    return result;

};

When a splitter is hidden behind a ng-show, the splitter is in a bad state when it is shown.  In the code that i have linked to, I hide the splitter if $scope.tab is equal to 1. If you change $scope.tab to be 2, the splitter works fine.

Any help on this would be appreciated.

For an example of this happening look at
http://dojo.telerik.com/ubUB/2

I am attempting to us a drop down menu (bootstrap) treatment for inline grid commands, but am having difficulty making it work. Attached is a screen shot of the intended presentation.

For the screen shot I created a row template with the following code:


My intent was to bind the built-in commands to the appropriate drop down action, but can not figure out how to accomplish that.

Any recommendations?

I want you to have two buttons "hide" and "resize". How do I do this? 

Sorry for my english.


<div id="example">   
  <div ng-app="KendoDemo" ng-controller="MyCtrl">  
  <button ng-click="onButton1Click()">resize</button>
  <div id="gantt" kendo-gantt k-options="ganttOptions"></div>
  </div>   
</div>

....
$scope.onButton1Click = function() {
$scope.ganttOptions.height = 900; // ??? not work (
}

Dear Team

I have a application need to read a contract from server, when done with edit, need post back how contract back in one time.

let's say the data structure is :
Contract { contractID : string;
                   contractDate: date;
                  contractDetails[] {
                       contractDetailID: string;
                       contractQuantity: integer
                       }
                  }

now I managed to pull the json data from server by webservice.  but I can't bind to contractDetails to KendoGrid.

what I want is holding the instance of  this model in memory and bind the main data to textbox or combo, then bind the children(ContactDetails) to Kendo Grid 

with obeservable applied, the modified will effect this model in order to post back to server to save.

I know there is a way to use "kendo.bind" to bind to the html tag, but will be lack of convenient and style to use Kendo Grid.And there is a way to add to kendo grid manually. But it will lost the convenient of obeservable method.

Please help me, I am a new to Kendo UI and in evaluating stage.

With best regards

Jason