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.

Hi, 

I'm having an issue with the HTML 5 report viewer. The initial POST request  to create a client Id fails: 

http://thoitrangkv.localhost.com/api/reports/clients

And it happens for every reports though they used to be working. I have not made changes to the report code, so I suspect the issue may have something to do with my build process. 

Please assist. Thank you

I am trying to do a multi-leveled diagram using a layout of layered type and radial subtype with my items coming from a datasource and my template based of the one in the demo example. The chart itself does display and the items are connected properly as to their relation but using straight connectors under 90° angle separation (0, 90, 180, 270) and not how I expected from what I've seen in the picture within the API documentation.

Is there something else I have to do to achieve this kind of connectors instead of the classic rigid structure?

Including my code for better reference on what I have so far:

    function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;
            
            var bgcolor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);


            g.append(new dataviz.diagram.Rectangle({
                width: 100,
                height: 100,
                stroke: {
                    width: 0,
                    color: "black"
                },
                background: bgcolor
            }));
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.name,
                x: 10,
                y: 25,
                color: "white"
            }));
            g.append(new dataviz.diagram.TextBlock({
                x: 10,
                y: 45,
                text: dataItem.ref_no,
                color: "white"
            }));

            g.append(new dataviz.diagram.TextBlock({
                x: 10,
                y: 65,
                width: 100,
                text: dataItem.level,
                color: "white"
            }));
            return g;
        }

        function createDiagram() {
            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    transport: {
                        read: {
                            url: "ashx/hierarchicalDiagram.ashx",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
                layout: {
                    type: "layered",
                    subtype: "radial",
                    startRadialAngle: 0,
                    endRadialAngle: 60,
                    iterations: 500,
                    nodeDistanc: 80,
                    grid: {
                        width: 900,
                        height: 800,
                        componentsGridWidth: 900,
                        offsetX: 0,
                        offsetY: 0 
                    }
                },
                shapeDefaults: {
                    visual: visualTemplate,
                    editable: false,
                    rotatable: false,
                    resizable: false
                },
                shapes: {
                    content: {
                        align: "center"
                    },
                    rotation: {
                        angle: 15
                    }
                },
                connectionDefaults: {
                    hover: {
                        stroke: {
                            color: "red"
                        }
                    },
                    stroke: {
                        color: "black"
                    }
                }
            });

            var diagram = $("#diagram").getKendoDiagram();

            diagram.bringIntoView(diagram.shapes, {align: "center"});
        }

        $(document).ready(createDiagram);

Currently I'm working on a Kendo UI Grid which has Autocomplete functionality in the cell of one column via the custom editor method. The Autocomplete dataSource is an array of objects that was received from a REST endpoint. When select an autocomplete entry, a create is fired to the REST endpoint and I also receive the created entry back. My problem is now, I need to use that new data to populate the cells of the grid so that the update method on all the cells works consistant, otherwise the Id that is necessary for the update is missing and I receive an error. The objects the Autocomplete searches in are different from the one that are necessary to populate the grid.
Is there any way to manipulate the dataSource of the Grid from the select method of the Autocomplete within a cell of the grid?