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?

Hi,

I have updated my project with new version of kendo.mobile.ui files (v2012.2.710). Previous version I was using was v2012.1.515.
However, I have a problem with ScrollView scrolling and it was working in previous version.

I use .content() method to set ScrollView HTML content from JavaScript. Scrolling between pages (horizontal scrolling) is working, but if page content height is greater that screen size, vertical scrolling is not working. When I try to scroll down, scroller is shown on the right (with correct size) but content is not scrolled.

Please help. Demo project that reproduce issue is attached. I am using Google Crome as test browser.

Best regards,
Ivan

I have a grid that is using a data source with server filtering and sorting turned on. And I am using virtual paging, how can I show a total row count in a footer similar to what it does for the non-virtual paging version? Just to get something like "10,230 rows" so when they filter it they know how many rows they filtered down to?