I am running into some kind of deep recursion issue within the kendo library when trying to add a group shape to the layout.

I have simplified my code down to a very basic example in Dojo that still reproduces the problem:

http://trykendoui.telerik.com/iSIK

Thanks,
Gary

Hi ,

Can any one provide me a demo with a popup grid having columns(writerid(int);writername(string),agentname(string),writeractive(boolean)) and input for popup comes from a template  save; having WriterDropDownList  with "writerid" as value field ,"writername" as text field of dropdownlist  and  agentname as text field box on template with "writeractive" as checkbox filter.


Having "writerid" as fieldID for model.

Thanks,
Chatrapathi Chennam

Hi
  Is there a context menu in Kendo UI? I want to right click on an element and see my own menu options appear

The closest I've seen is in a post from 2012, time has passed so I was wondering in Telerik have taken it officially on board or made a better one?

http://www.telerik.com/support/code-library/popup-menu-for-any-html-element-including-tree-items

thanks

I'm experiencing some issues with the default "create" button to add a new empty row. Depending on what I enter for the grid column definition I get different htmlEncoding functions and they both fail.

 In the first case I use the complete object with a template for the field value, and in that function it should be encoded with at least data.Product, otherwise it will never be reachable because all the data is in data.
In the second case I tried only the value and this time I get at least a conditional on if it is null but it doesn't catch the case that Product might be null already.
Nullable option doesn't do anything to those.

Is there any way to get around this, since I'm unable to add new entries without errors.

schema: {
            model: {
                id: "ProductId",
                fields: {
                    Product    : { type: "object" , nullable: true}
                }
            }

columns: [
            {
                field   : "Product",
                title   : "Product",
                width   : 110,
                template: #=Product['Name']#
                }
            }

(function(data
/**/) {
    var o, e = kendo.htmlEncode;
    with (data) {
        o = '<tr class="k-alt" data-uid="' + (data.uid) + '" role=\'row\'><td  role=\'gridcell\'>' + (Product['Name']) + '</td><td  role=\'gridcell\'><a class="k-button k-button-icontext k-grid-edit"  href="#"><span class="k-icon k-edit"></span>Bearbeiten</a><a class="k-button k-button-icontext k-grid-Loeschen"  href="#"><span class=" "></span>Löschen</a></td></tr>';
    }
    return o;
})


columns: [
            {
                field   : "Product['Name']",
                title   : "Product",
                width   : 110
                }
            }


(function(data
/**/) {
    var o, e = kendo.htmlEncode;
    with (data) {
        o = '<tr class="k-alt" data-uid="' + (data.uid) + '" role=\'row\'><td  role=\'gridcell\'>' + e(data.Product['Name'] == null ? '' : data.Product['Name']) + '</td><td  role=\'gridcell\'><a class="k-button k-button-icontext k-grid-edit"  href="#"><span class="k-icon k-edit"></span>Bearbeiten</a><a class="k-button k-button-icontext k-grid-Loeschen"  href="#"><span class=" "></span>Löschen</a></td></tr>';
    }
    return o;
})

Wondering where the MVC samples went to on the Kendo component demo pages?  

It was an excellent quick reference for the MVC Wrappers fluent syntax.

Also hopping this does not signify the beginnings of sun-setting MVC support, please confirm this is not the case!

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

I have a custom create and a custom destroy method in use. The create simply return a custom object that mirrors the schema of the grid with preset values. The destroy does two things, first it deletes the entry via rest and then it removes the row.

When I reload I can create a new entry and everything. When I delete an entry and try to add a new one i get the following error:

Uncaught TypeError: Cannot read property 'call' of undefined kendo.all.js:7386
(anonymous function)                                                                    kendo.all.js:7386
b.extend.Deferred                                                                         jquery_1.9.1.min.js:4
Observable.extend._promise                                                      kendo.all.js:7382
Observable.extend._send                                                            kendo.all.js:7416
Observable.extend.sync                                                               kendo.all.js:7208
Observable.extend._change                                                        kendo.all.js:7609
b.extend.proxy.b.isFunction.i                                                       jquery_1.9.1.min.js:4
Class.extend.trigger                                                                     kendo.all.js:179
Observable.extend.splice                                                            kendo.all.js:5021
Observable.extend.insert                                                             kendo.all.js:7043
Widget.extend.addRow                                                               kendo.all.js:36077
(anonymous function)                                                                   kendo.all.js:36138
b.event.dispatch                                                                           jquery_1.9.1.min.js:4
b.event.add.v.handle

The create function is similar to the following
create: function (options) {
                var createNewRow = {
                    unit: { Name: ""},
                    number: {},
                    Id: { Name: ""},
                    Quantity: 1
                };
                options.success(createNewRow);
                // options.success(options);
            }

And the delete pretty much looks like this
function deleteProduct(e){
        var grid                  = $("#grid").data("kendoGrid"),
              currentRow            = $(e.currentTarget).closest("tr"),
              currentRowData        = this.dataItem(currentRow);

        grid.removeRow(currentRow[0]);

        grid.dataSource.read();
        grid.refresh();
    }

I had to remove some CRM dependant parts

Hello,

I have a problem with kendo grid. When i press the ESC key , the cancel event is never fired.

I try to create keydown event for the grid, but i can't call the method cancel of the grid, the keydown is never fired neither.

I prepared a sample replicating the behavior: http://trykendoui.telerik.com/OvuT/4

How I can handle the cancel event when the user presses the esc key??

Thank you in advance.

Regards

Hello,

I have following situation:

Tabstrip

 @(Html.Kendo()
 .TabStrip()
 .Name("tabstripSvojta")
 .Events(events => events.ContentLoad("onTabContentLoad").Select("onTabSelect").Activate("onTabActivated"))
 .Items(tabstrip =>
 {
 tabstrip.Add()
 .Text("Sistematika")
 .Selected(true)                     
 .LoadContentFrom(Url.Content("/Catalog/Sistematika/Index/" + @Model));
 
  tabstrip.Add()
 .Text("Populacije")
 .LoadContentFrom("/Catalog/PopulacijaSvojte/PopulacijaSvojtePartial/" + @Model); 
 })
)

Inside every tabstrip content I have a few multiselect widgets.

The point is that I want a pager widget in bottom of multiselect widget. I do it like this:
 
 var multiselect = $('#' + '@multiName').data("kendoMultiSelect");
 
 var pager = $("#" + '@pagerID').kendoPager({
            dataSource: multiselect.dataSource,
            pageSize: 10,
            info: false,
            previousNext: false,
            buttonCount: 3,
            change: function (e) {

            }
        }).data("kendoPager");

$("#" + '@pagerID').appendTo($('#' + multiselect.element[0].id + '-list'));

It is working correctly and looks like this.


Image 

Whenever a tabstrip item is clicked I refresh the content like this:

var ts = $("#tabstripSvojta").kendoTabStrip().data("kendoTabStrip");
ts.tabGroup.bind('click', 'li', function (e) {                   
ts.reload(ts.select());
});

At this point I realised the problem. Every time content of tabstrip item is refreshed(reloaded), multiselect widgets from previous content (inside tabstrip content element) are not completely removed from the DOM. I am talking about animation part of multiselect widget.

I am talking about
<div class="k-animation-container" .... >
<div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
</div>

that the widget is creating on the end of body.

When the tabstrip item content is reloaded I get previous X 2. So:

<div class="k-animation-container" .... >
<div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
</div>
<div class="k-animation-container" .... >
<div class="k-list-container k-popup k-group k-reset" id="pre_IdOznakePopulacijePravilnik-list"...></div>
</div>

You can see now what is my problem? I get two element (of more, depending on how many reloads) with the same id. And when the JavaScript line ($("#" + '@pagerID').appendTo($('#' + multiselect.element[0].id + '-list'));) kicks in it kicks in on wrong element/position - on the position of the old animation element.

I figured that I could solve the problem with the change of javascript on reloading tabstrip content like this:

 var ts = $("#tabstripSvojta").kendoTabStrip().data("kendoTabStrip");
            ts.tabGroup.bind('click', 'li', function (e) {

//I am finding all multiselect widgets from the old content
                $(ts.contentElement(ts.select().index())).find('select').each(function () {
                   
                    var multiselect2 = $('#' + this.id).data("kendoMultiSelect");
                    
//removing old animation elements; 
//if we have previously focused on multiselect widget
                    $('#' + this.id + '-list').closest('.k-animation-container').remove();

//if we have not been focused on multiselect widget

                    $('#' + this.id + '-list').remove();

                    multiselect2.destroy;
                })
                $(ts.contentElement(ts.select().index())).find('select').remove();

                ts.reload(ts.select());
            });

It works. But it feels more like a hack (and not a good one) than a proper solution.

Any suggestions if i am doing something wrong or of some other solution?

Thx

I have a grid, That has 3 columns among which first column is combobox with options "List","boolean". My requirement is that when user select any value from combobox the template of second column based on this value should change. For example if user select "List" the second column convert to Combobox, if user select Boolean second column show checkbox in it.

I need to regenerate the grid second column on any combobox selection event. Is this possible?

Hi!

I use Splitter to separate the screen estate to create a top bar pane and a main content pane. The code looks like this:


So far so good. 

As you see, I want the top bar to be 50px high and not resizable/collapsible. The thing is that the top bar will hold several menu items (kendoMenu) that will slide down on mouse over to show its content. The problem is that the content gets cut off where the top bar pane ends. 

I thought it was simple to fix with z-index, so I put a z-index of 99999 on the menu container. This didn't help though. I can not figure out how to make something inside a pane to appear outside (e.g. tooltips, or menu items). How should this be done?