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.

Hi there,

How do I commit changes made to rows in grid back to data source, which doesn't use any service. i.e. grid is just binded to an array. Calling saveChanges method does not result in propagating changes back to an object which representation was modified. Please, note that I'm using kendoGrid together with KnockoutJS, though it seems make no difference if binded to plain objects.

Thanks

Hello, ThemeBulder does not have support for the grid column menu item. If you create a new style is nei icons are displayed in this element.

Edit: In addition, I have a question. Where did I download the current less template for Kendo?

Standard Silver style:

.k-icon, .k-tool-icon, .k-grouping-dropclue, .k-drop-hint, .k-callout, .k-progress, .k-progress-status, .k-column-menu .k-sprite {background-image: url("Silver/sprite.png");}<br>.k-icon, .k-column-menu .k-sprite {opacity: 0.8;}

ThemeBuilder:

.k-grouping-dropclue,.k-drop-hint,.k-callout,.k-progress,.k-progress-status{background-image:url('Silver/sprite.png');}


Hi,

I want to use DataSource to connect to a REST API. But when I use DataSource to post raw data the body is changed just before the HTTP request, which fails due to bad request format. When I do the same with JQuery there is no problem. Here is a code snippet that illustrate that:


I attach a screenshot of Firebug showing the results. "jqueryPost" post my raw data unchanged but "kendoPost" convert it before sending the HTTP request.

So I dig the kendo source code with firebug and I find where this happens. It's in "setup" method of the RemoteTransport class, at the following line:
At this point "data" contains the raw data which is a string and not an object. And when a string is given to "extend" it is seen as an object, i.e. an array of characters, which is then converted to an object. Example: the call "$.extend({}, 'str')" returns {0: 's', 1: 't', 2: 'r'}.

So to ensure my raw data is not convert before the POST, I have modified the "setup" method for RemoteTransport class in kendo.web.js:

This way DataSource POST works as I expect.

But am I missing something? Is there another way to do what I want? Or is this a missing feature?

Thanks!

I'm working on our mobile app, and right now I have a list view of all of our products. When you click on each product, it takes you to a new view/html file with all the product information. Each product has 3/4 tabs. It works great when you go to the first product, but when you go to the second, it displays just a bulleted list instead of the tabs. If you hit refresh on the page it displays them correctly, but when you hit back, then on a new product, it does it again. I've attached images of the normal and incorrect views. Any suggestions? Or ways to automatically refresh the page when it loads to avoid this?