Is it possible to build a Chart in the MVC Control and pass it to the View in the Model?  I want to do this so that I can dynamically display a chart based on the desired dashboard layout.  So I want the View to dictate where the charts are displayed but I want the View to be ignorant of the reports content.  Let me know if I haven't explained what I want to do well enough or if there is a better way.  I plan to have the dashboard layouts and which reports those contain stored in a database.

This is a "mark up"
View

@model ChartCollection

@{

    ViewBag.Title = "Dashboard";

}

<h2>

    Dashboard

</h2>

@Html.Partial("_Report1", Model["ValidationResults"])

@Html.Partial("_Report2", Model["ClientComponents"])

ChartCollection(Model)
Controller

Hi

I discovered an issue when use a Scroller with ListView mobile control. The following example might help to better explain the problem.

In this example there is a <div> area followed by the Scroller that contains a ListView control and list view items are populated in JavaScrip.
If I try this as it is, when scroll the items in the list view it also scrolls the <div> above the scroller and pushes the Search box outside of the screen.
The fix to this problem is to set a "Height" for the scroller but problem is that I want the list covers the rest of the screen on the device and height of the screen depends on the type of the device and I cannot specify a fixed height for the scroller that works on all types of the devices.
Is there any way to have this working without setting a fixed height?

Thanks
Ron

I need to change the decimal separator to "," or, even better, apply a globalization-setting like 'de-DE' in a mobile environment, just
like the globalization demo for web applications: http://demos.kendoui.com/web/globalization/index.html

But when i try e.g.

  $("#amount").kendoNumericTextBox({
      format: "c2" //Define currency type and 2 digits precision
  });

i only get: '$("#amount").kendoNumericTextBox' is not a funtion. what should i do?

TIA Peter

Hello,

I would like the tree view to be much bigger to be used with more ease on mobile.
What is the recommended way to increase the font size and preserving the features like drag & drop, and selected items.

Thank you

is there any possibility to add multiple drop down list (cascade drop down list)to editor template as resources. 

For some reason I seem to be unable to get any more than the following in the Kendo UI Grid:

HTML: 
This is the JSON as the browser sees it:


I think I'm really close but can't make the last step to getting it working.  All I get is a blank grid after the spinner runs.

Hi, we need to know if there is a way to identify if the dataBound event was triggered because a filter was applied or a pagination action was perform. Please someone that can help us.

Thanks in advance.

Dear Members, 

I am using Grid load tons of listing under Kendo Grid where Ajax  Pre-loader is important.  It stopped working when  we bind anything with Grid. 

When you use data-bind with Grid the Ajax  Pre-loader is lost but it fetches data after sometimes. My wont wait until they see a Ajax  Pre-loader.

Can anyone share any code sample to show  Ajax  Pre-loader for Grid with bind example under MVVM framework.   

Hello, 

I have used your example and I have found a problem with the button "back".
In your example on the left side of the screen there are categories. When is chosen a category, a list of products appears.
If I want to see the categories again, I have to press the button “back”.
The issue appears when I press the button "back" twice and after that I chose a category. When I chose a category, appears a list with products, but when I press the button “back” the button doesn’t work.
Steps:
1. Chose a category
2. Press the button "back" twice
3. Chose category again
4. See products
5. Press the button "back"
Result: User cannot go back in categories .

How could be avoid this case?

Hi – I have a grid where one of the columns is a lookup (dropdown list) – I set the editor and template properties as shown here and everything was working.

However now I am attempting to use requirejs and I receive the following error on the template property when the grid is loading - Uncaught ReferenceError:
getFullName is not defined.

Here is the relevant code:
 
Invitations.htm
<script data-main="/js/invitations" src="/js/lib/require.js" type="text/javascript">
</script>
...
<div id="gridInvitations">
</div>

Invitations.js
require(['/js/common.js'], function (common) {   
    require(['app/mainInvitations'], function(main) {
        /* Must read the query string '?eventId=x' */
        var qryString = location.search;
        var eventId = qryString.substr(qryString.indexOf("=") + 1);       
       main.initGrid(eventId);
    });
});

Common.js
require.config({
    baseUrl: "/js/lib",
    paths: {
        app: '../app',      
        jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        js: '..',       
       kendo: '../kendo/kendo.web.min'
    },
  shim: {
       kendo: {
      deps: ["jquery"]
        }
   },
    deps: ['js/utils', 'js/json2'],
    callback: function () {
    }
});

MainInvitations.js
define(['app/mainInvitations', "js/utils", "jquery", "kendo"], function (main, utils, $, k) {

    $(document).ready(function () {
    });

    var contactList = [];
    var gridDataSource;

    function initGrid(eventId) {

        $("#gridInvitations").kendoGrid({
            autoBind: false,
            editable: { mode: 'inline' },
            toolbar: [{ name: "create"}],
            columns:
                [
                    { field: 'invitationId', title: 'invitationId', width: "100px", hidden: true },
                    { field: 'eventId', title: 'eventId', hidden: true },
                    { field: "contactId", title: "Contact", width: "225px",
                        editor: contactDropDownEditor,
                        template: "#=getFullName(contactId)#",
                        footerTemplate: "Total:  #=count #"
                    },
                    { field: 'inviteType', title: 'Invite Type' },
                    { field: 'inviteSentDate', title: 'Invitation Sent', format: "{0: yyyy-MM-dd HH:mm:ss}" },
                    { field: 'rsvpStatus', title: 'RSVP', hidden: false },
                    { field: 'rsvpDate', title: 'RSVP Date', format: "{0: yyyy-MM-dd}" },
                    { field: 'rsvpComments', title: 'RSVP Comments' },

                    { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
                ],

            dataSource: createGridDataSource(eventId),
            selectable: 'row',
            sortable: true,
            filterable: true
        });


        /* Get list of contacts and assign them to grid column */
        $.ajax({
            url: utils.getBaseServicesUrl() + "/wcfDataServices/contacts.svc/contacts_getList",
            dataType: "json",
            success: function (result) {

                contactList = result.d;
                gridDataSource.fetch();
                console.log(contactList);
            },
            error: function () {
                alert('Error fetching contactList');
            }
        });

    }

    function createGridDataSource(eventId) {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {

                    $.ajax({
                        url: utils.getBaseServicesUrl() + "/wcfDataServices/invitations.svc/tblEvents(" + eventId + ")/tblInvitations",
                        dataType: "json",
                        success: function (result) {
                            options.success(result);
                        }
                    });
                } 

            },
            /*
            parameterMap: function (data, type) {
            return JSON.stringify(data);
            },
            */
            schema: {
                data: "d",
                model: {
                    id: "invitationId",
                    fields: {
                        invitationId: { type: "number", editable: false },
                        eventId: { type: "number", editable: false },
                        contactId: { type: "number" },
                        inviteType: { type: "string" },
                        inviteSentDate: { type: "date" },
                        rsvpStatus: { type: "string" },
                        rsvpDate: { type: "date" },
                        rsvpComments: { type: "string", validation: { required: true} },
                        lastUpdated: { type: "date" },
                        lastUpdatedBy: { type: "string" }
                    }
                }
            },

            aggregate: { field: "contactId", aggregate: "count" }

        });

        gridDataSource = dataSource;
        return gridDataSource;

    }




    function contactDropDownEditor(container, options) {

        $('<input data-bind="value:' + options.field + '"/>')

        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "FullName",
            dataValueField: "contactId",
            dataSource: contactList,
            optionLabel: ""
        });


    }

    
    function getFullName(contactId) {
        for (var idx = 0, length = contactList.length; idx < length; idx++) {
            if (contactList[idx].contactId === contactId) {
                return contactList[idx].FullName;
            }
        }
    }
    
    
    return {

        initGrid: initGrid, 
        getFullName: getFullName
    }

});


It took me a while to finally get the lookup column working in the grid and I'm now stuck on this problem - any suggestions would be greatly appreciated.  As I mentioned, this line is causing the problem: template: "#=getFullName(contactId)#",

Thanks a lot

Brian