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?

Horizontal scrolling of Kendo Grid Column header is not working as expected.
I have 10 columns in my Grid. I have used the
          Columns.Bound(columns => columns.ID).Width(/*this is variable */)

 for every column. So the horizontal scroll appears now. But when I scroll to either Left or Right , the Column header section remains static i.e. does not move with the scroll. The following is what I tried :

   <link href="../../../../Content/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/kendo/kendo.all.min.js" type="text/javascript"></script>
 //// Also used this---  <script src="../../../../Scripts/kendo/2014.1.415/kendo.aspnetmvc.min.js" type="text/javascript"></script>

 @(Html.Kendo().Grid((IEnumerable<TelerikMvcApp.Areas.UIConfig.Models.GenericUIClass>)ViewBag.GridData)
      .Name("grid")
      .Columns(columns =>
      {
          foreach (string value in ViewBag.GridData)
          {
              columns.Bound(genericUI => genericUI.column).Width(500).Title(value);
          }
      })
     .Scrollable(s => s.Enabled(true)
    )

   The problem is similar to the thread below:
     http://www.telerik.com/forums/horizontal-scroll-bar-in-grid-but-not-working-for-header-
    
 I also tried what is suggested:
    http://docs.kendoui.com/getting-started/javascript-dependencies 

But still the problem persists.  Thank You.

I am trying to use the kendo Grid with an mvc 4 web api Controller using JSON.  I am using kendoui.web.2012.1.515.commercial.
The problem is that the updates from the grid are not pushed to the web service.

The script imports on the page are as follows:

<link href="/students/Content/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="/students/Content/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="/students/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/students/Scripts/Kendo/kendo.core.js" type="text/javascript"></script>
<script src="/students/Scripts/Kendo/kendo.web.js" type="text/javascript"></script>
<script src="/students/Scripts/Kendo/kendo.data.js" type="text/javascript"></script>
<script src="/students/Scripts/Kendo/kendo.grid.js" type="text/javascript"></script>

Here is the code for the grid:

 $("#grid").kendoGrid({
        dataSource: dataSource,

        height: 600,
        filterable: true,
        sortable: true,
        pageable: true,
        toolbar: ["create", "save", "cancel"],
       columns: [
       {
            field: "StudentID",
            filterable: false
        },

                            "FullName",
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                width: 100,
                                format: "{0:MM/dd/yyyy}",
                                editor: function (container, options) {
                                    $('<input id=\"' + options.field + '\" />').appendTo(container)
                                     .kendoDatePicker({ format: "MM/dd/yyyy" });

                                    var datePicker = $("#BirthDate").data("kendoDatePicker");
                                    // bind to the close event
                                    datePicker.bind('close', function (e) {
                                        // See what the datepicker is returning:
                                        var datepicker = e.sender.element.kendoDatePicker();
                                        var d = new Date(datepicker.val());
                                    });

                                }

                        },  {
                                field: "Gender",
                                title: "Gender"
                            },
                         { command: ["edit"], title: "&nbsp;", width: "210px"}],
                          editable: "inline"

    });

the code for the datasource is:

 var     dataSource = new kendo.data.DataSource(   
            transport: {
                read: { url: "/students/api/EmergData/GetStudentList/STARRGAY",
                    dataType: "json",

                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                update: {
                    url: "/students/api/EmergData/UpdateEmerStuds/",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"

                },

                parameterMap: function (options, operation) {
                    if (operation !== "read" && options) {

             //  return { models: kendo.stringify(options.models) };          
                       
   return kendo.stringify(options);
                    
                    }
                }
            },

            schema: {
             
                model: {
                    id: "StudentID",
                    fields: {
                        StudentID: { editable: false, nullable: true },

                        FullName: { type: "string" },
                        BirthDate: { type: "date" },
                        Grade: { type: "string" },
                        Gender: { type: "string" }
                    }
                }
            },
            pageSize: 30,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        });

first I tried inline editing.  When I edited a cell in the grid, I found that the set: method in kendo.data.js fired
and apparently set the dirty flag of the edited object:

that.dirty = true;

But then when I clicked update and the code in the sync: method in kendo.data.js fired, the data object in the underlying array had its dirty flag still set to false and the field that had been edited was still its orginal value.

I went back the set method and overrode it in this way:

kendo.data.Model.fn.set = function (field, value, initiator) {
    var that = this;
    if (that.editable(field)) {
        value = that._parse(field, value);

        if (value != that.get(field)) {
            that.dirty = true;

            for (var i = 0; i < data.length; i++) {
                if (data[i].id === that.id) {
                    data[i].dirty = true;
                    for (var prop in data[i]) {
                        if (prop == field) {
                            data[i][prop] = value;
                        }
                    }
                }
            }
           // ObservableObject.fn.set.call(that, field, value, initiator);
        }
    }
}

Now when I clicked the update link, my update was sent to the web api method, but I got a model binding error.
I changed the code in the parametermap property of the gird from the form I had gotten from the inline demo:

parameterMap: function (options, operation) {
                    if (operation !== "read" && options) 
                  //  return { models: kendo.stringify(options.models) };
                        return kendo.stringify(options);        
                    }
                }
            },

I found that the models property was always null, but that the options object itself was the javascript object that represented the data of the row. 

Now my updates got posted correctly to the the web api method and the database got updated.
I then tried to switch this over to the batch updating but for some reason this did not work.

So it seems that the statement in the set method is not working for me:

ObservableObject.fn.set.call(that, field, value, initiator);

I do notice that the initiator object is always null when this method gets called but I am not sure if this is a problem or not.

Any ideas what is going on? or how I can get this working for inline without the hack?  or how I can get this to work at all with bach editing?

Thanks,
Alec von Brand
MCPS

 

 

 

 

 

 

 

function (options, operation) {

 

 

 

 

 

if (operation !== "read" && options) {

 

 

 

 

 

var data = kendo.stringify(options);

 

 

 

 

 

var json = JSON.stringify(options);

 

 

 

 

 

// return { models: JSON.stringify(options.models) };

 

 

 

 

 

return kendo.stringify(options);

 

 

 

 

 

// return { models: kendo.stringify(options.models) };

 

 

 

 

 

// return { models: ko.toJSON(options.models) };

}

}

},

 

 

 

 

 

 

 

 

 

function (options, operation) {

 

 

 

 

 

if (operation !== "read" && options) {

 

 

 

 

 

var data = kendo.stringify(options);

 

 

 

 

 

var json = JSON.stringify(options);

 

 

 

 

 

// return { models: JSON.stringify(options.models) };

 

 

 

 

 

return kendo.stringify(options);

 

 

 

 

 

// return { models: kendo.stringify(options.models) };

 

 

 

 

 

// return { models: ko.toJSON(options.models) };

}

}

},

 

 

 

 

 

 

 

 

 

function (options, operation) {

 

 

 

 

 

if (operation !== "read" && options) {

 

 

 

 

 

var data = kendo.stringify(options);

 

 

 

 

 

var json = JSON.stringify(options);

 

 

 

 

 

// return { models: JSON.stringify(options.models) };

 

 

 

 

 

return kendo.stringify(options);

 

 

 

 

 

// return { models: kendo.stringify(options.models) };

 

 

 

 

 

// return { models: ko.toJSON(options.models) };

}

}

},

 

 

 

 

Hello,

Right on the View - As soon as I want in a texbox write something, the drawer-event is fired and the drawer is opened suddenly. Why? But that only happens on iOS6 Iphone. In the picture you can see a simulation to this problem.

Does anyone have a good example of editing a parent record and it's children records on one view?  I am using the latest KendoUI, MVC 5 Razor & Entity Framework. For example I want the user to be able to bring up a single page that has contact info where the address is stored on the parent record and n phone numbers are stored in a child table. The user would edit all information and save it with one post.An AJAX example would also be beneficial. Thank you 

Hi

I have a scheduler with horizontal grouping (rooms in my case). Kendo already gives the ability to move an event from one resource column to an other (move events between rooms). But is there a way to lock the element in vertical (time) position while dragging? The events only give me the slot and scheduler element and not the currently dragged entry. Sure, I could do a repositioning by comparing moveStart and moveEnd, but keeping the element in the same time range during dragging would be the better behavior. Any advice?

Regards,
Patric

I've created an accordion style panel bar system in a View in an MVC project. I tried to set the expand mode to "single", but all of the panel bars load as automatically expanded and refuse to collapse/expand--not to mention ignore the "single" expandMode command. I've attempted the exact same code in jsfiddle with all the kendo css/js files and it works fine. Can someone please explain how to get around this bug? Thank you!

In my application there is a Kendo  grid which is being populated by data coming from a webservice call.
The requirement is to display 20 data per scrolling and I want every time user scroll through the grid the service will be called to fetch the data.

We can see the similar functionality in the social media site like Facebook.
I have done it in the following way but it is not working I mean in each scrolling the webservice call is not happing.

Please any one help me. I have attached the file herewith.