Questions on Kendo UI for jQuery Forum

5 answers

1.5K+ views

Binding ListView directly to a list of objects

I am trying to use the MVC extensions to bind directly to a list of objects. The data is part of the model that is passed to the view. I don't want the list view to make an extra call just to get data that is already available. I am trying to use a combination of BindTo() and ClientTemplateId(), but the resulting list is always empty.

ListView

answered on 17 May 2013

4 answers

253 views

chart example on a portlet problem

Hello. I'm Diego. I'm trying to add a chart example into a portlet. But, if i add more than one portlet, i only could see one chart. The other portlets are empty. Y change my jsp page (showing down) to rename the ids of the div chart in each portlet.
Thanks

kendoui.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="namespace"><portlet:namespace/></c:set>

<%
String height = (String)request.getAttribute("height");
String url = (String)request.getAttribute("url");

String divIdStr = "divKendouiPortlet_" + new java.util.Date().getTime();
%>

<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="<%=request.getContextPath()%>/kendoui/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="<%=request.getContextPath()%>/kendoui/js/jquery.min.js"></script>
    <script src="<%=request.getContextPath()%>/kendoui/js/kendo.dataviz.min.js"></script>
    <script src="<%=request.getContextPath()%>/kendoui/shared/js/console.js"></script>
</head>
<body>
         <div id="example<%=divIdStr %>" class="k-content">
            <div class="chart-wrapper">
                <div id="<%=divIdStr %>" style="background: center no-repeat url('<%=request.getContextPath()%>/kendoui/shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart() {
                    $("#<%=divIdStr %>").kendoChart({
                        title: {
                            text: "Site Visitors Stats /thousands/ - <%=divIdStr %>"
                        },
                        legend: {
                            visible: false
                        },
                        seriesDefaults: {
                            type: "bar"
                        },
                        series: [{
                            name: "Total Visits",
                            data: [56000, 63000, 74000, 91000, 117000, 138000]
                        }, {
                            name: "Unique visitors",
                            data: [52000, 34000, 23000, 48000, 67000, 83000]
                        }],
                        valueAxis: {
                            max: 140000,
                            line: {
                                visible: false
                            },
                            minorGridLines: {
                                visible: true
                            }
                        },
                        categoryAxis: {
                            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                            majorGridLines: {
                                visible: false
                            }
                        },
                        tooltip: {
                            visible: true,
                            template: "#= series.name #: #= value #"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible

           //alert("READY- <%=divIdStr %>");

                        createChart();

                        $("#example<%=divIdStr %>").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
            </script>
            <style scoped>
                .chart-wrapper, .chart-wrapper .k-chart {
                    height: 350px;
                }
            </style>
        </div>

</body>
</html>

General Discussions

answered on 17 May 2013

4 answers

195 views

Checkbox on IE8,9 and 10

Hello,

We are having some issues with checkbox on IE. (working correctly on Chrome and FF)

When we use IE, it always says that the "checkbox" is mandatory, as soon as we check/uncheck it.

Here is the code :
$("#grid2").kendoGrid({
dataSource: {
error: errorHandler,
transport: {
...
parameterMap: function(options, type) {
return JSON.stringify(options);
}
},
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
initials: { type: "string",
validation :{
required: true,
pattern : "\\w{0,5}",
"data-pattern-msg": "Maximum 5 chars"
}
}, active: {type: "boolean", defaultValue: true},
....
columns: [ {
field: "initials",
title: "${user_list_initials}",
width: "10%"
}, {
field: "active",
title: "${user_list_active}",
width: "10%",
template: "<input type='checkbox'#= active ? 'checked=checked' : '' # disabled='disabled' /> "
},

This happens with the JSP Wrapper, or when using javascript aswell.

Any hints why it does that ?

The only difference compared to one demo I've seen is that I override the template to display it as a read-only checkbox.

Thank you in advance

Validation

answered on 17 May 2013

2 answers

124 views

[Solved] Navigator display problem with negative values

Hi there,

I'm using he StockChart for displaying a line chart on top of the navigator. It generally works well, but when there are negative values within my Json data, the navigator doesn't mask the unselected data correctly and it overlaps the labels below. What can I do about it? Please see the attached images for an example.

Regards,
Robert

Charts

answered on 17 May 2013

1 answer

272 views

Hiding empty menu items

Hi,

I'm using the Kendo.Mvc.Menu with a site map and security trimming.
My problem is that when all sub items of a menu item are trimmed, the parent item is still being displayed.

I've found an answer to a similar question regarding the Telerik.Menu, on this thread.
However, I could not find the equivalent in the Kendo framework to this line:

<% var navAuthorization = Telerik.Web.Mvc.Infrastructure.ServiceLocator.Current.Resolve<Telerik.Web.Mvc.Infrastructure.INavigationItemAuthorization>(); %>

Best regards,

Assaf

Menu

answered on 17 May 2013

2 answers

458 views

Add a corporate logo to navbar

Hi - I have a requirement to show our corporate logo from every view, and their preference is to show it in the left-side area of the navbar. I have it showing up, but it is not vertically centered, and I have tried a number of things. I've tried vertical-align:middle, and margins:auto, but neither have worked so far:

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;vertical-align:middle;"/>
<span data-role="view-title"></span>
</div>
</header>

and...

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;margin: auto .3em auto .3em;"/>
<span data-role="view-title"></span>
</div>
</header>

What would be preferred approach approach for vertically aligning a logo image within the navbar area?
Thanks, Jim Wangler

NavBar

answered on 16 May 2013

1 answer

82 views

Edit button returns json but popup edit isn't working?

Hi all. I'm new to the JS/JQuery/AJAX world & new to Kendo controls as well.

Not sure what's going on and would appreciate any help. My grid displays with an edit and delete button. Both buttons hit the controller actions as expected and the delete does, in fact delete. However it, it returns to a blank page instead of a refreshed grid, and my edit button returns raw JSON to an empty view. I'm guessing I don't have the grid wired correctly so that it know's how to catch the pass. Here's the code in my partial view. I commented out some columns that I don't need to see until the edit screen.

Any ideas? TIA

@{

Layout = null;

}

@model IEnumerable<Nop.Plugin.Other.Rewards.Models.ReferralProgramModel>

@(Html.Kendo().Grid((IEnumerable<Nop.Plugin.Other.Rewards.Models.ReferralProgramModel>)Model)

.Name("kendoGrid")

.Columns(columns =>

{

//columns.Bound(p => p.Id).Width(0).Hidden();

columns.Bound(p => p.Name).Width(100).Title("Name");

//columns.Bound(p => p.ReferralDiscount).Width(20).Title("Friend Discount");

//columns.Bound(p => p.DiscountEventsPerReferral).Width(100).Title("Discounts per Referral");

columns.Bound(p => p.PointsAwardPerReferral).Width(100).Title("Points Reward on referral");

columns.Bound(p => p.MinimumPurchaseForAward).Width(100).Title("Min Purchase Amt");

//columns.Bound(p => p.RewardEventsPerReferredFriend).Width(100).Title("Discount Events");

//columns.Bound(p => p.CookieLifespan).Width(100).Title("Cookie Lifespan");

columns.Bound(p => p.InsertDateUtc).Format("{0:d}").Width(100).Title("Insert Date");

columns.Command(command => command.Edit());

columns.Command(command => command.Destroy());

})

.Editable(editable => editable.Mode(GridEditMode.PopUp)) //.TemplateName("ReferralEditForm")

.Pageable(pager => pager.PageSizes(new[] { 5, 10, 20, 50 }))

.Sortable()

.Selectable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => {

model.Id(p => p.Id);

model.Field(p=>p.Id).Editable(false);

})

.Read(read => read.Action("GetReferralPrograms", "Referrals"))

.Update(update => update.Action("UpdateRefferalProgram", "Referrals"))

.Destroy(destroy => destroy.Action("DeleteReferralProgram", "Referrals"))

.Create(create => create.Action("CreateReferralProgram", "Referrals"))

)

Grid

answered on 16 May 2013

5 answers

647 views

[Solved] Show multiple series value in a CategoryAxis CrossHair Tooltip.

Hi,
I've been able to create a chart that fits my need except for one requirement which is to show all the series value in a single tooltip (CategoryAxis CrossHairToolTip).

I have 4 series (Weight1, Time1, Weight2, Time2) and 1 category (Period). By default i can easily show the CategoryAxis value in the CategoryAxis CrossHair Tooltip, but what i want to do is show the value of Weight1, Time1, Weight2 and Time2 in that tooltip.

Here is the code that show the Category value. and in comment what i would like to show instead.

Thanks in advance for your help.

<%: Html.Kendo().Chart<Data.DonneeChart>()

.Name("chart")

.Title("Multiple Series Chart")

.DataSource(dataSource => dataSource

.Read(read => read.Action("Charts_Data", "Home")).ServerOperation(false)

)

.Series(series => {

series.Line(model => model.Weight1)

.Color("#ff1a1c")

.Name("Weight1")

.Axis("weight");

series.Line(model => model.Time1)

.Color("#ff0e00")

.Name("Time1")

.Axis("time");

series.Line(model => model.Weight2)

.Color("#73e100")

.Name("Weight2")

.Axis("weight");

series.Bar(model => model.Time2)

.Color("#007aff")

.Name("Time2")

.Axis("time");

})

.CategoryAxis(axis => axis

.Categories(model => model.Period)

.AxisCrossingValue(0,9999,9999)

.Justify(true)

.Crosshair(crosshair => crosshair

.Visible(true)

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("Category : #= value #") // Here i would like to show the value of Weight1,Time1,Weight2,Time2 instead of Period value !!!

.Format("{0:n1}")

))

)

.ValueAxis(axis => axis

.Numeric("weight")

.Min(0)

.Title("(Kg)")

.Max(8000)

)

.ValueAxis(axis => axis

.Numeric("weight")

.Color("#ffae00")

.Min(0)

.Max(35)

)

.ValueAxis(axis => axis

.Numeric("weight")

.Color("#007eff")

.Min(0)

.Max(1.1)

)

.Tooltip(tooltip => tooltip

.Visible(false)

)

%>

Charts

answered on 16 May 2013

1 answer

633 views

Create a blank first column in the kendo ui grid and hide a column

Hello,
I am new to using kendo ui grid. I have a requirement where I want to display data in the grid using kendo ui grid.

I have added a div and using kendo ui grid I am able to display the data in the grid.

All the data is dynamic. All the columns are created at runtime/dynamically.
What I want is to have a first column in the grid which will display an image with click event to it.

Also at the same time after the image column there will be ID column that I want to hide. I want to bind it to grid and hide it as I will require that particular columns value on row click event.

So, I want the first column in the grid to be displaying a image/icon and want to hide the second (next column after the image column).

Please help me on this.

Grid

answered on 16 May 2013

1 answer

108 views

[Solved] decode values displayed as series values on Chart

I have a column chart with series values of 0, 1,2,3,4.
Rather than display the numbers, I would like to decode the numbers to a string value, e.g. instead of 1 as a label display something like 'low', instead of 2 display 'medium' etc. I have tried to get this to work with templates but have been unsuccessful.

something like

series: [{
type: "column",
aggregate: "avg",
field: 'value',
labels: {
template: "#if(value == 4) { # ${'exceed'} # } else { # ${value} #} #"

}
}],

The chart ignores the template and just displays the numbers 1,2 etc.
Is it possible to do what I want to do.

Charts

answered on 16 May 2013