Questions on Kendo UI for jQuery Forum

1 answer

174 views

How can I share one validation message between two controls?

I'm using MVC.

I have two fields - both IntegerTextBoxes (Html.Kendo().IntegerTextBoxFor....)

These two values are to be validated so that the value in field 1 has to be <= the value in field 2. I've got a custom validator for this.

So supposing I specify 5 in both fields.
I then change field 1 to equal the value 6 and tab off. The error is shown against field 1.
I then enter field 2 and tab off. The error is also shown against field 2 now. So both fields are showing the error.
If I adjust field 1 to equal 5 again and tab off, the error message disappears against field 1 but it remains against field 2 until I tab in and out of that too.

Is there an easy way to link these into one validation with one validation message?

Validation

answered on 22 Jan 2014

3 answers

306 views

How to set type on fields in XML datasource?

I have a grid that is getting its data from XML. I want to define types (numeric, date, etc.) on the fields. How do I do this? I've tried defining my model fields like CARD: { value: 'CARD/text()', type: 'number' } but that doesn't seem to work.

var xml = '<ROWS><ROW id="1"><CARD>1</CARD><LLINE>1</LLINE></ROW><ROW id="2"><CARD>1</CARD><LLINE>2</LLINE></ROW></ROWS>';

$(document).ready(function() {

$('#gridDiv').kendoGrid({

columns: [

{

field: 'CARD',

title: 'Card',

width: 60

},{

field: 'LLINE',

title: 'Line',

width: 60

}

],

dataSource: new kendo.data.DataSource({

type: 'xml',

data: xml,

schema: {

type: 'xml',

data: '/ROWS/ROW',

model: {

id: 'id',

fields: {

id: '@id',

CARD: 'CARD/text()',

LLINE: 'LLINE/text()'

}

})

});

Data Source

answered on 22 Jan 2014

1 answer

71 views

Style issues on a local MVC application

Does anyone have Grid style issues?
I'm running a local MVC application using IIS express (VS 2012)

Once in a while (seems random) when I refresh the page the grid comes up with no styles (see screenshots)
I'm using the inline editing example with minor changes... not loading any other javascripts...

Grid

answered on 22 Jan 2014

1 answer

91 views

Create grid using kendoUI mobile

Hi All,

I wanted to create a grid in my mobile project. Let me know the procedure to create a grid in Kendoui mobile. There is no direct example for this , please guide me on this.

Thanks

Gaja Naik

General Discussions

answered on 22 Jan 2014

4 answers

158 views

drag from external panel bar to google maps

I am looking to drag a panelbar item and drop it on a google map. a marker would then be created at that position.

See screenshot

I have the drag working fine but I need the pageX, and pageY coordinates where the item is dropped .

Currently I just create a marker at the center of the page after the drop.

Any info would be appreciated.

thanks
dco

Drag and Drop

answered on 22 Jan 2014

1 answer

129 views

Grouped Column rather than Group Header

The viewmodel my grid is bound to has 3 levels of hierarchy, so I end up with 2 nested grids. In the middle level, I have grouping in place. I need to display 3 different links for the group. Currently, I am taking advantage of the grouping header option. However, I would rather have an additional column in that grid with a rowspan to cover the group rather than the header. Is there any way to accomplish this without overriding multiple aspects of the kendo framework or completely moving away from kendo?
jsfiddle: http://jsfiddle.net/jJRsr/2/

Grid

answered on 22 Jan 2014

2 answers

237 views

Chart not showing data

Hello everyone!

So I have a mysql database. From here I get my json.php file. This will echo this:

{"cols":[{"label":"Weekly Task","type":"string"},{"label":"Percentage","type":"number"}],"rows":[{"c":[{"v":"SLEEP"},{"v":30}]},{"c":[{"v":"Watching Movie"},{"v":10}]},{"c":[{"v":"job"},{"v":40}]},{"c":[{"v":"Exercise"},{"v":20}]}]}

My main php code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">

</head>
<body>
<header>

</header>

<div role="main">

<div id="chart">
</div>
</div>
<footer>

</footer>

<script src="jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.dataviz.min.js"></script>

<script>

jQuery(document).ready(function($) {
$("#chart").kendoChart({
theme: "metro",
dataSource: {
transport: {
read: {
url: 'json.php',
dataType: 'json'
}
}
},
series: [{ name: "Name", type: "Age"}],

categoryAxis: [{ field: "OptionTitles" }],
line: { visible: true }

});
});
</script>

</body>
</html>

But no data is loading on the chart! Any help will be much appreciated!

Thank in advance!

Charts

answered on 22 Jan 2014

2 answers

117 views

data-views prevents drawer from opening

So this code is identical to code I have on my other views. The only thing I can't figure out, is why inlcuding data-views PREVENTS the window from opening up on in this view. The data-views path is correct. I can even copy paste code that works perfects with other views I have that also uses data-views, include the view I want to open on and it still won't work.

Why would data-views prevent the drawer from opening on a page that has been added to data-views? And more so, why does it not work here, but work everywhere else I use it.

<div id="drawerAccounts"
     data-role="drawer"
     data-views='[
    "/View/Account/AccountDefaultView.htm" //This is the correct file path and this is the view where the drawer is located.
    ]'
     data-show="accountListDrawerController.showEvent"
     data-model="accountListDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            [Person Name]
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Back to Person</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerAccounts');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

Here is a sample of my code from a view that works correctly.
Snippet<div id="drawerEditPerson"
     data-role="drawer"
     data-views='[
    "/view/editPerson/editPersonDefaultView.htm",
    "/view/editPerson/widget/editPersonStatusView.htm",
    "/view/editPerson/widget/editPersonDetailsView.htm",
    "/view/editPerson/widget/editPersonNameView.htm",
    "/view/editPerson/widget/editPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonElectronicContactView.htm",
    "/view/editPerson/widget/viewPersonContactNumbersView.htm",
    "/view/editPerson/widget/viewPersonAddressesView.htm",
    "/view/editPerson/widget/EditPersonRemarksView.htm",
    "/view/editPerson/widget/ViewPersonCompaniesView.htm",
    "/view/editPerson/widget/ViewPersonGroupsView.htm",
    "/view/editPerson/widget/viewPersonNotesView.htm",
    "/view/editPerson/widget/viewPersonRelationshipsView.htm",
    "/view/editPerson/widget/viewPersonCampaignsView.htm",
    "/view/editPerson/widget/viewPersonDocumentsView.htm",
    "/view/editPerson/widget/viewPersonActivitiesView.htm"
    ]'
     data-show="peopleEditDrawerController.showEvent"
     data-model="peopleEditDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            Contact Info
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Preview</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonNameView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Name</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonStatusView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Status</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDetailsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Details</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDisciplinesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Disciplines</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonElectronicContactView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Electronic Contact</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonContactNumbersView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Contact Numbers</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonAddressesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Address</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/EditPersonRemarksView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Remarks</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/ViewPersonGroupsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Groups</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonNotesView.htm?id=#id#&includeGeneral=true&includeActivity=false&includeDocument=false&includeGroup=false&includeAccount=false" data-bind="idLink: id" data-transition="none">Notes</a></li>
                <li><a href="#" data-link="/view/Account/AccountDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Accounts</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerEditPerson');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm?id=#id#" data-bind="idLink: id" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

Drawer (Mobile)

answered on 22 Jan 2014

1 answer

268 views

Using the mobile drawer in _Layout in MVC

I am getting an 'object reference not set to an instance of an object' error on the mobile drawer when trying to add it to the _Layout.cshtml of my application. Are you allowed to use the mobile drawer in the _Layout without setting up any mobile views or mobile layouts? If so, could you provide an example or show me where I am going wrong. Below are code snippets from my _Layout.cshtml file:

Below are my CSS and JS files in the head section of _Layout.cshtml:

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/bootstrap/bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/bootstrap/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.3.1119/kendo.all.min.js")"></script>

Below is where I am creating my mobile drawer inside of the body tag in my _Layout.cshtml file:

@(Html.Kendo().MobileDrawer()

.Name("my-drawer")

.HtmlAttributes(new { style = "width: 270px" })

.Content(obj =>

Html.Kendo().MobileListView().Type("group")

.Items(root =>

{

root.Add().Text("Navigation");

root.Add().Text("Account");

})

)

<div class="container">

<div class="row">

<div class="col-xs-12">

@RenderBody()

</div>

And below is my JavaScript that I have at the bottom of my body tag in _Layout.cshtml:

script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>

<script type="text/javascript">

var app = new kendo.mobile.Application(document.body,

{

skin: "flat",

initial: @Url.Action("Index", "Home")

});

</script>

Drawer (Mobile)

answered on 22 Jan 2014

1 answer

197 views

Recalculate group aggregates after updating dataitems in dataSource

We're dynamically updating values in the dataSource of a grid using it's dataSource.data() method and whilst the Total aggregate seems to work, the group aggregates don't update.

Is there a way to force these calculation to be executed after the data() method is called?

Thanks,
Jacques

Grid

answered on 22 Jan 2014