Questions on Kendo UI for jQuery Forum

1 answer

774 views

Change the value of cell depending on the value of another cell

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?

Grid

answered on 04 Jun 2014

10 answers

632 views

Splitter and the z-index

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:

$('#splitterTopBottom').kendoSplitter({

panes: [

{

size: "50px",

resizable: false,

collapsible: false

}

],

orientation: "vertical",

collapse: paneCollapseCallback,

expand: paneExpandCallback,

});

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?

Thanks in advance.

/Jacob

Splitter

answered on 04 Jun 2014

1 answer

899 views

Horizontal scrolling for Kendo Grid Column header not working

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.

Grid

answered on 04 Jun 2014

4 answers

1.4K+ views

Problem with updates using Kendo Grid with MVC 4 web api Controller

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:

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: " ", 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) };

}

},

Grid

answered on 03 Jun 2014

5 answers

91 views

drawer reacts to the keystroke in an input field. Why?

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.

Drawer (Mobile)

answered on 03 Jun 2014

1 answer

138 views

Editing of Parent and Children Records on One View

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

General Discussions

answered on 03 Jun 2014

2 answers

109 views

Lock vertical position while dragging

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

Scheduler

answered on 03 Jun 2014

3 answers

192 views

Expand mode not working in MVC project (.cshtml file)

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!

PanelBar

answered on 03 Jun 2014

3 answers

550 views

Lazy Loading In Kendo Grid issue

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.

Grid

answered on 03 Jun 2014

1 answer

566 views

Telerik Reporting HTML 5 Report Viewer: Error registering client instance

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

{"message":"An error has occurred.","exceptionMessage":

"Binary stream '0' does not contain a valid BinaryHeader. Possible causes are invalid stream or object version change between serialization and deserialization."

,"exceptionType":"System.Runtime.Serialization.SerializationException","stackTrace":

"   at System.Runtime.Serialization.Formatters.Binary.__BinaryParser.Run()\r\n   at System.Runtime.Serialization.Formatters.Binary.ObjectReader.Deserialize(HeaderHandler handler, __BinaryParser serParser, Boolean fCheck, Boolean isCrossAppDomain, IMethodCallMessage methodCallMessage)\r\n   at System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize(Stream serializationStream, HeaderHandler handler, Boolean fCheck, Boolean isCrossAppDomain, IMethodCallMessage methodCallMessage)\r\n   at System.Runtime.Serialization.Formatters.Binary.BinaryFormatter.Deserialize(Stream serializationStream, HeaderHandler handler, Boolean fCheck, IMethodCallMessage methodCallMessage)\r\n   at Telerik.Reporting.Services.Engine.CacheStorage.Deserialize[T](ICache cache, String key)\r\n   at Telerik.Reporting.Services.Engine.Client.Clear(Predicate`1 clearCondition)\r\n   at Telerik.Reporting.Services.Engine.Client.Expire()\r\n   at Telerik.Reporting.Services.Engine.ReportEngine.ClearExpiredSessions(ReportEngineState state)\r\n   at Telerik.Reporting.Services.Engine.ReportEngine.RegisterClient()\r\n   at Telerik.Reporting.Services.WebApi.ReportsControllerBase.RegisterClient()\r\n   at lambda_method(Closure , Object , Object[] )\r\n   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.<>c__DisplayClass10.<GetExecutor>b__9(Object instance, Object[] methodParameters)\r\n   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken)\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.Controllers.ApiControllerActionInvoker.<InvokeUsingResultConverterAsync>d__8.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()\r\n   at System.Web.Http.Controllers.ActionFilterResult.<ExecuteAsync>d__2.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.ApiController.<InvokeActionWithExceptionFilters>d__1.MoveNext()"

}

General Discussions

answered on 03 Jun 2014