I am sure I am missing something here, but I can't find how to set the PageSize in the grid using the MVC wrappers.  Snippet from setting the datasource.

    .Pageable(pager => pager
                .PageSize(20) //  This fails.
                .PageSizes(true)               
                .PageSizes(new int[] { 10,20,30 }))

Hi, we recently moved the widgets in our open-source application from jQueryUI to KendoUI Web for various reasons including support for touch devices. As your site says "All Kendo UI Web widgets provide full support for touchscreen devices" however in the latest build this isn't working for some widgets, as mentioned here.

That thread addresses the calendar widget but we were unable to get the suggested fix working for the datepicker.

There is some pressure to move to a more mature widget library with touch support, so if you could let me know when to expect a fix in the stable branch I can hopefully keep KendoUI in our stack for launch. In the mean time if you could point me to the edge/unstable source I might be able to patch it for now.

Thanks in advance for your help, and thanks for your great work with KendoUI.

This applies to both ComboBox and DropdownList. When the input's width is set using % to be fluid, the dropdown itself does not stay in sync once the page is rendered and then the containing size changed. In other words, the dropdown width never updates once initially rendered.

I do not believe I am overlooking anything. It also doesn't seem to matter if setting width via CSS or adding style directly to input element. See the following basic demo link as a test. Resize the window (bigger or smaller) to see the dropdown list width remain static. Note, I only tested this in Chrome: http://jsfiddle.net/4uCHx/5/ 

Thanks,
Mike 

I'm trying to get sorting working on a grid that is bound to a WebAPI controller, but I am having trouble getting sorting to work right.  I have defined a grid using Kendo's MVC extensions as follows:

        @(Html.Kendo().Grid<DailyTotalsViewModel>()
              .Name("Grid")
              .Columns(cols => {
                    cols.Bound(p => p.Date).Width(60);
                    cols.Bound(p => p.Quantity)
                        .HtmlAttributes(new {style = "text-align: right"})
                        .Width(60);
                    cols.Bound(p => p.Note)
                        .Width(100);
              })
              .Pageable()
              .Sortable()
              .Scrollable()                        
              .DataSource(dataSource => dataSource.Ajax()                      
                    .Read(read =>  read.Type(HttpVerbs.Get).Url({service url here}))
                    .ServerOperation(true)
                    .Sort(s => s.Add(x => x.Date))
                    .PageSize(5)
              )
        )

And have been able to get that grid to load data from the following WebAPI method:
public class GridApiController : ApiController
{
[HttpGet]
public DataSourceResult GetDailyTotalGridRows(int? page, int? pageSize)
        {
{Retrieve DataSourceResult Here}
}
}

How do I get the sort information included in the request?  I've tried the following signatures:

public DataSourceResult GetDailyTotalGridRows(int? page, int? pageSize, SortDescriptor[] sort) 
public DataSourceResult GetDailyTotalGridRows(DataSourceRequest request)  
public DataSourceResult GetDailyTotalGridRows([DataSourceRequest] DataSourceRequest request)   

I have also tried using HttpPost instead of HttpGet, but haven't been able to get SortDescriptor data to my controller method.  

Hello,

I was wondering how I would go about changing the background color of the selected tab (not the contents of the tab, the tab heading itself, when I hover over it it turns grey but then goes back to normal once I click the tab, I want it to stay grey). I was also wondering how to change the font and font color of the tab heading once selected.

Please let me know if you need any other information, I'm not really sure how much more specific I can get without taking screenshots but I will if needed.

Hi,

I am using Telerik ASP.NET MVC dropdown list. I would like to display this dropdown list as Label with the selected value set to the label based on some role based authorization scenario.

1. How would I extend/implement custom render method for Telerik ASP.NET MVC dropdown list.

2. Also If I would like to add additional properties to the telerik dropdown list by extending it. How would I achieve this.

Your time and help is highly apprciated.

Thanks,
tnr

Hello All,

I wonder if someone could describe how to architect and organize a large Web application with Kendo framework. I use EXTJS (Sencha) a lot for commercial projects. The latest version of EXTJS ( 4) has finally implemented very solid, MVC based architecture. I personally enjoy working with it.

I also work on the nonprofit projects where I mainly employ jQuery. Lately I came across Kendo UI, which I am hoping to use for the jQuery-based projects. Going through the documentation I found many examples how to deal with various Kendo widgets, but could not locate a document which would describe how to organize a large-scale Web application

I would greatly appreciate any constructive input. A tutorial with working example would be perfect

Thank you

VS

I have a editable grid which has a list view in it. List view is getting populated properly but when i when i select a listview item within editable grid, All the fields get updated except the listview items.
Below is the code:

(function ($) {
    // UpdateAPI url
    var UPDATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
    // Create API url
    var CREATEUSER_API_URL = '/api/UserManagement/PostUpdateUser';
    // Delete API url
    var DELETEUSER_API_URL = '/api/UserManagement/DeleteUser';
    // Search API url
    var GETUSER_API_URL = '/api/UserManagement/GetUser';
    // Search By Id API url
    var GETUSERBYID_API_URL = '/api/UserManagement/GetUserById';
    // Get Role url
    var GETROLE_API_URL = '/api/RoleManagement/GetRole';

    var isCreating = false;

    $(function () {

        userSource =
            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: GETUSER_API_URL,
                        dataType: "json"
                    },
                    update: {
                        url: CREATEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        dataType: "json",
                        type: "POST"
                    },
                    destroy: {
                        url: DELETEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        type: "DELETE",
                        dataType: "json",
                    },
                    create: {
                        url: CREATEUSER_API_URL,
                        contentType: 'application/json;charset=utf-8',
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        //console.log(operation);

                        if (operation == "destroy" && options.models.length > 0) {
                            return JSON.stringify(options.models[0]);
                        }
                        else if (operation !== "read" && options.models.length > 0) {
                            return JSON.stringify(options.models[0]);
                        }
                    }
                },
                batch: true,
                pageSize: 10,
                schema: {
                    model: {
                        id: "UserProfileId",
                        fields: {
                            UserProfileId: { editable: false, nullable: true },
                            Password: {
                                type: "string", validation: {
                                    required: true,
                                    password: function (input) {
                                        input.attr("data-password-msg", "Password cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            Username: {
                                validation: {
                                    required: true,
                                    username: function (input) {
                                        input.attr("data-username-msg", "Username cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            FirstName: {
                                type: "string", validation: {
                                    required: true,
                                    firstname: function (input) {
                                        input.attr("data-firstname-msg", "Firstname cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            LastName: {
                                type: "string", validation: {
                                    required: true,
                                    lastname: function (input) {
                                        input.attr("data-lastname-msg", "Lastname cannot be greater than 50 characters!");
                                        return input.val().length <= 50;
                                    }
                                },
                            },
                            EmailAddress: { nullable: false, validation: { required: true } },
                            IsSuperUser: { type: "boolean", validation: { required: false } },
                            RoleName: { validation: { required: true } },
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: userSource,
            pageable: true,
            height: 400,
            toolbar: ["create"],
            columns: [
                "Username",
                { field: "Password", title: "Password", width: ".1px" },
                "FirstName",
                "LastName",
                { field: "EmailAddress", title: "Email Address", width: "170px" },
                { field: "IsSuperUser", title: "SuperUser", width: "90px" },
                {
                    field: "RoleName", title: "Roles", width: "150px", editor: role_editor
                },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
            editable: "popup",
            edit: function (e) {
                debugger;
                if (isCreating) {
                    var window = e.container.data("kendoWindow");
                    window.title("Add new record");
                    e.container.find("a.k-grid-update").html('<span class="k-icon k-update"></span>Create');
                    //reset the flag
                    isCreating = false;
                }
                else {
                    //e.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
                    //e.model.container.find("k-input k-textbox").html('<input type="text" class="k-input k-textbox" name="Username" disabled="true"/>');
                    document.getElementsByName("Username")[0].disabled = "true";
                }
            }
        });
        $(".k-grid-add").on("click", function (e) {
            debugger;
            isCreating = true;
            document.getElementsByName("Username")[0].disabled = "false";
        });     
    });

    function role_editor(container, options) {
        $(function () {

            $("div[data-container-for=" + options.field + "]").kendoListView({
                dataSource: {
                    type: "json",
                    transport:
                        {
                            read: GETROLE_API_URL,
                        }
                },
                pageable: true,
                selectable: "multiple",
                navigatable: true,
                editable: true,
                template: "<li>${RoleName}</li>",
                editTemplate: '<li><input type="text" data-bind="value:RoleName" name="RoleName" required="required"/></li>'
            });
        });
    }
})(jQuery);


Function written for binding the listview within the grid is marked in bold. While updating/creating any record, i am not able to insert/update the listview items in the database.

Can someone enlighten me if Kendo UI can be used with Java based framework like Apache Click? Our current application is being developed using Click and we are extremely impressed with the look and feel of the UI Widgets of Kendo. Only concern is the amount of work that will be involved in porting the Click Widgets to Kendo? Has any one done this sort of a thing here? Please let me know. 

Hi there,

Is there a way to specify context for a template? I do not use kendo viewmodels, but only its widgets. For binding view models I use KnockoutJS, and from time to time there is a need to execute a certain function to, say, do a formating. So far as I see you can only execute functions that are available on the dataitem binded or window object. How can I pass parent view model as a context for a template for a dataitem?

Thanks.