Questions on Kendo UI for jQuery Forum

1 answer

154 views

I have a mobile tabstrip which has 5 tabs. All the tabs except one will show a different view. The last tab (more), I would like to show a custom slide up menu. To get this to work, I tied to bind a data-click event to that one tab, which does not work. I tried binding the even in my scripts, that did not work. I tried the data-select event, but that even only fires once for the same tab, so I can't use that event since I can't hit the same tab again to hide my menu. I am also using MVVM. Is there anyway to bind an event to a single tab.

Thanks,
Joe

TabStrip (Mobile)

answered on 18 May 2013

3 answers

79 views

Defining of editable columns from Grid

Hi there,

I have an unusual use case where we have two tables (Table A and Table B) sharing a single datasource. Both tables has different number of columns which can be editable, e.g. Table A has columns 1-5 editable, while Table B only has column 2 being editable.

Form my understanding, whether a column is editable or not is controlled via the datasource's model. Is there any undocumented configurations where we could define the editable columns when we are defining the Grid? If not, will you be considering it for future updates?

Currently, my workaround is to define a custom editor for these columns, where my editor essentially blocks editing.

Thank you!

Grid

answered on 17 May 2013

1 answer

431 views

"All" Option in "Items Per Page"?

Is there a way to specify an "All" option in the "Items Per Page" drop down feature? Simply setting the last option to a number above the total record set is not what the client wants. They would like to see an "All" option.

Thanks..

Grid

answered on 17 May 2013

1 answer

123 views

"Select All" checkbox inside the Kendo Grid - Not working

"Select All" checkbox inside the Kendo Grid is not working properly , when the options “Selectable” and “Scrollable” are enabled .please suggest any solution to this issue

Grid

answered on 17 May 2013

6 answers

206 views

Issues with Grid Multiselect Editor Function using knockout bindings

So I've got a model passed in like so:

public class MainViewModel{

public IList<SubViewModel> SubViewModels;

}

public class SubViewModel{

public Guid Id;

public string Name;

public IList<Guid> CategoryIds;

public IList<CategoryType> CategoryTypes;

}

public class CategoryType {

public Guid Id;

public string Type;

}

Now in my javascript I take my model and convert:

var initialData = @Html.Raw(JsonConvert.SerializeObject(Model, new JavaScriptDateTimeConverter()));

var mainViewModel = new MainViewModel(initialData);

function MainViewModel(data) {

var mapping = {

'SubViewModels':

create: function(options) {

return new SubViewModel(options.data);

}

ko.mapping.fromJS(data, mapping , this);

}

function

SubViewModel(

var self = this;

ko.mapping.fromJS(data, mapping , self);

self.CategoryMultiSelect: function (container, options) {

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

.appendTo(container)

.kendoMultiSelect({

autoBind: false,

dataTextField: "Type",

dataValueField: "Id",

dataSource: options.model.CategoryTypes

});

}

}




ko.applyBindings(mainViewModel, $("#MainViewModel")[0]);

Now when I call the editor function in the grid:

<div id="subviewModelGrid" data-bind="kendoGrid: {

data: $data.SubViewModels,

sortable: true,

scrollable: false,

           editable: true,

pageable: { pageSize: 10, input: false },

columns: [{

field: 'CategoryIds',

title: 'Categories',

width: '300px',

editor: $data.CategoryMultiSelect

}]}"/>

After click on the column I get the following error:

Uncaught TypeError: Object f7ae02dc-c8a7-f112-e043-991018ace7d8 has no method 'get' kendo.web.min.js:12

S.widget.value.m.extend.refresh kendo.web.min.js:12

F.extend.bind kendo.web.min.js:11

v.extend.applyBinding kendo.web.min.js:12

v.extend.bind kendo.web.min.js:12

o kendo.web.min.js:11

s kendo.web.min.js:11

d.extend.refresh kendo.web.min.js:22

d.extend.init kendo.web.min.js:22

(anonymous function) kendo.web.min.js:9

p.extend.each jquery-1.8.2.min.js:2

p.fn.p.each jquery-1.8.2.min.js:2

e.fn.(anonymous function) kendo.web.min.js:9

T.extend.editCell kendo.web.min.js:17

r.incell.r.update.n.wrapper.on.on.n.timer kendo.web.min.js:17

p.event.dispatch jquery-1.8.2.min.js:2

g.handle.h

Which is referring to the only id in the array of 'CategoryIds'. I'm putting this question in Multiselect because I am using editor functions for several other columns and not having this issue. Any thoughts?

MultiSelect

answered on 17 May 2013

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

216 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

137 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

104 views

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

253 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