Hello,

I am developing an AJAX MVC web application with DB first entity model and am really struggling to get entities (and relationships) converted to Json objects to be displayed in a grid.

I have come up with a solution (as described below) which seems to be working, but I am looking for ideas or improvements on this solution.

I have explained the scenario using a simplified example below.

Simple Entity model

Application
ID
CountryID
Code
Name

Country
ID
Code
Name

ApplicationListVM

Contains properties to be displayed in the grid

    public class ApplicationListVM
    {
        public int ID { get; set; }
        public string CountryCode { get; set; }
        public string CountryName{ get; set; }
        public string ApplicationCode { get; set; }
        public string ApplicationName { get; set; }
    }

My grid declaration (razor)

@(Html.Kendo().Grid<ApplicationListVM>()
    .Name("Grid_Ajax")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ReadApplicationList", "Application")) // Set the action method which will return the data in JSON format
    )
    .Columns(columns =>
    {
        columns.Bound(application => application.ID);
        columns.Bound(application => application.CountryCode);
        columns.Bound(application => application.CountryName);
        columns.Bound(application => application.ApplicationCode);
        columns.Bound(application => application.ApplicationName);
    })
    .Pageable()
    .Sortable()
)

ApplicationController

Controller with action method to return data to be displayed in the list

        public ActionResult ReadApplicationList([DataSourceRequest]DataSourceRequest request)
        {
            using (var businessEntities = new Entities())
            {
                businessEntities.Configuration.LazyLoadingEnabled = false;
              
                var dbApplications = (from application in businessEntities.Applications
                                    select new
                                    {
                                        ID = application.ID,
                                        CountryCode = application.Country.Code,
                                        CountryName = application.Country.Name,
                                        ApplicationCode = application.Code,
                                        ApplicationName = application.Name
                                    }).ToList();

                List<ApplicationListVM> applications = new List<ApplicationListVM>();

                foreach (var dbApplication in dbApplications)
                {
                    applications.Add(new ApplicationListVM
                        {
                            ID = dbApplication.ID,
                            CountryCode = dbApplication.CountryCode,
                            CountryName = dbApplication.CountryName,
                            ApplicationCode = dbApplication.ApplicationCode,
                            ApplicationName = dbApplication.ApplicationName
                        });
                }

                return Json(applications.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
        }



This appears to be working and the grid is loading data via AJAX as expected.

I tried loading just the Application entity in the action method, thinking that the related entity (Country) will be automatically loaded and returned in the Json string but the Country property was null!

Therefore, I tried to get around the entity relationships by using a ViewModel which combines the properties from various entities into a single class.


For sure there has to be a better and more efficient way of doing this instead of creating View Models to combine properties from various entities into a single class? How can I improve the solution above?


Thanks in advnace
JB

I can not get Kendo to load am an using coding from a demo but I get an error in the Javascript console.
Here is the error:
"Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container. kendo.all.min.js:32k.extend.initkendo.all.min.js:32s.extend.initkendo.all.min.js:33(anonymous function)kendo.all.min.js:33cjquery.min.js:3p.fireWithjquery.min.js:3b.extend.readyjquery.min.js:3H"

Any help would be great.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_main" Runat="Server">
<link href="./includes/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="./includes/Kendo/js/jquery.min.js"></script>
<script src="./includes/Kendo/js/kendo.all.min.js"></script>

     <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Sources
            <ul>
                <li><a href="#secondview">Local View</a></li>
                <li><a href="../../content/mobile/view/remoteview.html">Remote View</a></li>
            </ul>
        </li>
    </ul>

    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Types
            <ul>
                <li><a href="#stretchview">Stretched View</a></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding: 50px 0; text-align: center;"><p>Hi, I'm a local view.</p></div>
</div>

<div data-role="view" id="stretchview" data-layout="mobile-view" data-title="Stretched View" data-stretch="true">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding-top: 50px; text-align: center;"><p>Hi, I'm a stretched view.</p><p>Use me for full screen content that doesn't need scrolling.</p></div>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</asp:Content>

hey all 
ive got a dataseries here which looks like this


the chart works great
EXCEPT: feb, oct and nov drop down to 0
and dec doesnt even show up

which is odd since all the other months look great
and the data looks consistent

any ideas?

you can see the chart here:
www.the-agora.com

and the chart markup looks like htis

Hello!

I have chart with 2  axes.
Prior to data being pumped  into chart those 2 axes looked really jammed (see attach).
Once data is bound and chart is ploatted in looks perfect.  

Any recommendations how can I avoid  this creepy UI effect?

Here is chart definition:

 $("#chartISPbar").kendoChart({
                    title: {
                        text: "ISP latency and user distribution"
                    },
                    dataSource: ispDataSource,
                    autoBind: false,
                    legend: {
                        position: "bottom"
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "AVG responce time",
                        field: "AVG_ISP_ResponseTime",
                        axis: "responses"
                    },
                            {
                                name: "Number of requests",
                                field: "NumberOfRequests",
                                axis: "requests"
                            }

                    ],
                    categoryAxis: {
                        field: "ISP",                      
                        majorGridLines: {
                            visible: false
                        }

                    },
                    valueAxes: [
                        {
                            name: "responses",
                            title: { text: "latency (response time)" }
                        },

                    {
                        name: "requests",
                        title: { text: "users (# requests)" }

                    }
                    ],
                    tooltip: {
                        visible: true,
                        format: "N0",                    
                        template: "#= series.name #: #= value #",
                        padding: {
                            left: 100
                        }
                    }
                });

KendoUI ver: 2013.1.319
Browsers: FireFox 20.0.1, Chrome 26.0.1410.64 m

I have a grid with an edit template specified and withing that grid I'm trying to use either render partial or renderaction. Both i've gotten to work with the actually editing and adding that is not my problem. The problem is the data for my partial inside my edittemplate is not being populated with data. Here is my edit template.

How do I get my renderpartial or renderaction to work or is there some other way to use partials in kendo edittemplates for grids.

I have a viewmodel that binds a strongly typed model to the view's controls:

Example: <input type="text" placeholder="Address 1" id="CurrentAddress1" data-bind="value: account.CurrentAddress.Address1"> and <input type="text" placeholder="Address 1" id="PermanentAddress1" data-bind="value: account.PermanentAddress.Address1">

I need functionality, that if a checkbox for "Same As" is checked, the Permanent values in other controls get copied over from the Current values as the user enteres them.

Seems that I need to override either the dataSource or the model bindings, but as a new Kendo developer I am wondering how this would be possible. THanks!

Welcome. I tested PHP wrappers for KendoUI. I found a problem / bug.

If you use AutoComplete control to retrieve data about the elements, such as a telephone, social security number, tax ID, ID, ID card number, barcode, etc are DataSourceResult-> Read () does not return any result.
The problem is the WHERE clause.

Should pay attention to excerpt:
At the time of transmission by the AutoComplete type information '90080800418 '(Social Security) is used in an incorrect set of operators.

The indicator provides information and an operator that has been used is startswith is not in the $operators.
I leave the matter to think about. It was enough to add operators to the $operators, but it is possible that you will want to develop something else.

Is there any way to programmatically scroll the listview to the top?
I have a listview where I change the contents dynamically and afterwards I would like to scroll to top.

In  my case of Kendo grid, datasource is from JSON data. and part of data feed is like following:
"User": {
...
"FirstName": "Joe",
"LastName": "Doe",
"Phone": null,
...
}

And I need to display full name  in column of "Name" in kendo grid
  columns: [
                { field: "User.FirstName+' '+ User.LastName", title: "Name"},
                ...
   ]
and I also set sortable to be true for this grid. And that works well, the grid shows cell as "Joe Doe"

However, the grid doesn't sort by "Name" column and when I tried to click header of column "Name",  it returns error on kendo.core.min.js 
"(function($,undefined){function Class(){}function compilePart(e,t){if(t)return"'"+e.split("'").join("\\'").split('\\"')......."

Could you let me know where I did wrong? Thanks,