Questions on Kendo UI for jQuery Forum

1 answer

639 views

How to access a kendo Grid Template row and remove an attribute from every field when the row is activated for editing

Hello,

I have a Kendo grid with the following edit template row:

@(Html.Kendo().Grid<CorpCAPPCards.Models.CAPPCard>()

            .Name("CardGrid")

            .ToolBar(t => { t.Create().Text("New Observation"); })

            .Editable(e => e.Mode(GridEditMode.InLine).Window(w => { w.Events(ev => { ev.Activate("killKendoValidation"); }); }))

            .Columns(columns =>

            {

                columns.Template(@<text></text>)

                       .ClientTemplate("<a class='k-button k-grid-edit k-button-icon'><span class='k-icon k-edit'></span></a><a class='k-button k-grid-delete k-button-icon'><span class='k-icon k-delete'></span></a>")

                       .Width(78);

                columns.Bound(p => p.Job);

                columns.Bound(p => p.EntryDate).Format("{0:MM/dd/yyyy}");

                columns.Bound(p => p.EntryUser);

                columns.Bound(p => p.ObservationDate).Format("{0:MM/dd/yyyy}");

                columns.Bound(p => p.Observer);

                columns.Bound(p => p.CBICode);

                columns.Bound(p => p.AllSafe).ClientTemplate("<input type='checkbox' disabled='disabled' #= AllSafe == true ? checked='checked' : '' #/>");

               

            })

            .Pageable()

            .Sortable()

            .Scrollable()

            .Filterable()

            .HtmlAttributes(new { style = "height:550px;" })

            .DataSource(dataSource => dataSource

                .Ajax()

                .PageSize(20)

                .Model(m => { m.Id("ID"); m.Field(f => f.EntryDate).DefaultValue(DateTime.Today); m.Field(f => f.ObservationDate).DefaultValue(DateTime.Today); })

                .Read(r => r.Action("GetCards", "Grid"))

                .Update(u => u.Action("UpdateCard", "Grid"))

                .Create(c => c.Action("AddCard", "Grid"))

                .Destroy(d => d.Action("DeleteCard", "Grid"))

            )

            .ClientDetailTemplateId("CardDetailTemplate")

            .Events(e => { e.Edit("setEditWindowTitle"); })

        )

   <script id="CardDetailTemplate" type="text/x-kendo-template">

            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Observation:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Observation#</textarea></div>

            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Root Cause:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: RootCause #</textarea></div>

            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Action:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Action #</textarea></div>

            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Communication:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Communication #</textarea></div>

            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Reviewed By:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: ReviewedBy #</textarea></div>

        </script>

        <script>

I would like to loop through the fields in this templated row when it is activated for edit and remove the RaedOnly attribute for every cell. How could I do this?

Am I even heading in the right direction for accessing the fields with the below code? How do I detect when the templated row is active in edit mode?

var dataItem = $("#Grid").data("kendoGrid").dataSource.get(2);
var row = $("#Grid").data("kendoGrid")
.tbody
.find("tr[readonly='true']");

Thanks

Grid

answered on 11 Jan 2016

3 answers

440 views

Bug in Adding new items to Multiselect using API in "Kendo 2015 Q2" build

Hi Please see my sample code Here (http://dojo.telerik.com/UViSA).

In this sample code, I'm trying to add new item to Multiselect by typing any word followed by "," (comma) into the Multiselect textbox. It works well in all the previous builds (2015 Q1, Q1 SP1 and Q1 SP2) but it doesn't work with "Kendo 2015 Q2"!

To reproduce the problem:

1. Run the above example with (Kendo 2015 Q1 SP2).

2. in Multiselect textbox, enter "test" and press "," (comma)

3. You can see the world "test" is added to the Multiselect items and also automatically is selected and displayed.

4. Now change to the (Kendo 2015 Q2) and repeat the above steps 1 and 2, you will see that although, the word "test" is added to the list but:
a) it cannot be selected automatically anymore.
b) the word "test," is no longer cleared automatically in the multiselect textbox
c) basically this.value("test"); is not doing its job anymore!

I would appreciate your support to review and let me know:

1. What's wrong that my code is not working with "2015 Q2"?

2. If there is a better way of doing the code.

Thank you.

My sample code is pasted below as well:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Kendo UI Snippet</title>

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

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

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

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

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

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>

</head>

<body>

<select id="multiselect"></select>

<script>

var data = [{TagText: "Albania", id: "Albania"},

{TagText: "America", id: "America"}];

var _savedOld = "";

function multiselect_change(e) {

var previous = _savedOld

var current = this.value();

var diff = [];

if (previous) {

//check for removed selected items

diff = $(previous).not(current).get();

if (diff.length > 0){

alert("Removed Item = "+diff);

}else{

//check for new selected items

diff = $(current).not(previous).get();

if (diff.length > 0){

alert("New Item = "+diff);

}

this.refresh();

}

_savedOld = current.slice(0);

}

function multiselect_filtering(e) {

//get filter descriptor

var filter = e.filter;

if (filter.value.indexOf(",") > 0){

var newtag = filter.value.replace(",","");

var values = this.value().slice();

this.dataSource.filter({});

//e.preventDefault();

this.dataSource.add({ id: newtag, TagText: newtag });

var add = [newtag];

if (values.length > 0) {

var merge = $.merge(add,values);

this.value($.unique(merge));

}else{

this.value(add);

}

this.trigger("change");

this.dataSource.refresh();

}

$("#multiselect").kendoMultiSelect({

dataTextField: "TagText",

dataValueField: "id",

filter: "contains",

dataSource: data

});

var multiselect = $("#multiselect").data("kendoMultiSelect");

multiselect.bind("filtering", multiselect_filtering);

multiselect.bind("change", multiselect_change);

_savedOld = multiselect.value();

</script>

</body>

</html>

MultiSelect

answered on 11 Jan 2016

2 answers

254 views

Responsive issue in KendoGraph

I'm using Kendo Pie Chart to render a pie chart in the DOM.Below is the code that has been used..

The chart is loading fine but is not responsive in different browser window.

As a solution I tried to refresh the chart on change in window size by doing

$(window).resize(function () {
showOnPie($scope.chartdATA);
});

but didn't find a perfect solution for the responsiveness.

Same goes for the bar chart where the x and y axis are hidden when the browser is minimized.Can anybody sufggest a fix for this issue.All the code has been done in AngularJs.

Calendar

answered on 11 Jan 2016

1 answer

361 views

[Solved] Change Event at the end of dragging (mouse release)

When you drag the slider, the Slide events are fired as expected. When you release the mouse, the following occurs:

- If the cursor is positioned within the drag handle, the Change is event is not fired.
- If the cursor is not positioned within the drag handle, the Change is event is fired.

This behavior can be seen in Slider/Events demo page. Start dragging the drag handle on one of the sliders and move the cursor up or down so it's outside of the drag handle. When you release the mouse, the Change event is fired. Now start dragging the drag handle and make sure the cursor is within in the drag handle when you release the mouse and you will see that the Change event is not fired.

Is this the expected behavior?

Slider

answered on 11 Jan 2016

4 answers

549 views

Setting focus to top of page (accessibility)

I'm making an app using Kendo and need to make it Section 508 compliant and accessible. One of the issues i'm having is that when a user navigates to a new page after clicking on a ListView item, the focus needs to change to the top title bar, but that's not working when I use ListView. I tell the focus to change in the data-after-show method of each page. It works if I go to the page via a KendoMobileButton or Kendo Tab bar button, but not for a ListView item. Here is my data-after-show method:

function setFocusToTop() {

//first, since header is dynamically generated,we need to find the current page title element.

var id = app.view().wrapper[0].attributes['id'].value;

var newId = id + "-hTitle";

//give it an ID so we're 100% sure we're only finding the right one...not necessary, but worth the attempt.

$('#' + id + ' .viewTitleStyle:visible').attr('id', newId);

//give it a tabindex since it's not an input control. this lets us focus it

$('#' + newId).attr('tabindex', '-1');

$('#' + newId).focus();

}

And here are my templates for my listview:

<script type="text/x-kendo-template" id="customListViewNoDescriptionTemplate">

<div class="km-listview-link noDesc" role="button">

<div class="graphic-container"><img class="item-photo" src="${image}" aria-hidden="true" /></div>

<h3 class="item-title">${name}</h3>

</div>

</script>

And here is how I create/bind the listview with that template:

$("#myHome-listview").kendoMobileListView({

dataSource: myDataSource,

template: $("#customListViewNoDescriptionTemplate").html(),

click: listViewLinkClick

});

I'm testing using Cordova on an iPhone using iOS9+ with VoiceOver turned on. Does anyone have any advice as to how to modify my ListView binding or template so that the focus event will work?

ListView (Mobile)

answered on 11 Jan 2016

1 answer

324 views

Kendo Grid display items issue

Hi All,

In my grid, I have the following script

myGridData.ds = new kendo.data.DataSource({
transport: {
read: function(options) {
var myData = [];
var myGrid = $("#grid").data("kendoGrid");
var pageSize = myGrid.dataSource.pageSize();
var currentPage = myGrid.dataSource.page();

var totalRtn = 0;

CallController(false, '/main/LoadData?from=' + $("#dateFrom").val() + '&to=' + $("#dateTo").val() + '&pageNumber=' + currentPage + '&pageSize=' + gridPageSize,
function(result) {
for (var i = 0; i < result.length; i++) {
...other code goes here...
};

totalRtn= result.length
};
};
});

options.success(myData);
}
},
serverPaging: true,
schema: {
model: {
id: "Id",
fields: {
...fields info goes here...
}
},

total: "totalRtn" // using this will give to "No items to display" and removing it will give me the attach screen shot.
},
pageSize: 500 //initial setting
});

var grid = $("#grid").kendoGrid({
dataSource: myGridData.ds,
scrollable: true,
columnMenu: true,
groupable: true,
sortable: true,
resizable: true,
reorderable: true,
filterable: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: [200, 500, 1000, 5000, 10000]
},
columns: [
{
field: 'xxxx',
title: 'yyyy',
}, etc...

]

The problem that I'm facing is whenever I changed the 'items to page' to display; the total items is the same as my pageSize. If I hard code the pageSize to max value (10000) it will be fine, but wouldn't that beat the purpose of having the serverPaging set to true. Any help is appreciated or provide some explanation of how I could achieve this issue?

TIA

Grid

answered on 11 Jan 2016

3 answers

754 views

[Solved] grid not getting kendo.culture messages

This is not urgent enough to be a ticket.

I am setting the culture for each user at login. At least the datePickers get the culture as I can see the dates formatted with it.

But, the grids do not have the messages. The globalization overview says all widgets that support date or numeric formatting also depend on current culture. These widgets are the more complex ones like Grid, ListView, Charts and etc.

Am I missing something?

Thanks,

Rick

<!DOCTYPE html>

<html style="height:100%;width:100%;">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Menlo Park Project</title>

<link rel="stylesheet" href="../styles/kendo.common.min.css">

<link rel="stylesheet" href="../styles/kendo.default.min.css">

<style type="text/css">

.k-grid tr { max-height:1.5em !important; overflow:hidden !important; }

.k-grid td { max-height:1.5em !important; overflow:hidden !important; }

.k-grid-header th.k-header { padding-bottom:0.2em !important; padding-top:0.2em !important; }

.k-tabstrip .k-content { padding-left:0.3em !important; padding-right:0.3em !important; }

.k-button { line-height:1.25em !important; }

.my-data-columns li { display: block; float: left; text-align: right; height: 22px; line-height:1.25em; }

.options-2-columns li { display: block; float: left; width: 50%; height: 22px; line-height:1.25em; }

.options-3-columns li { display: block; float: left; width: 33%; height: 22px; line-height:1.25em; }

.options-4-columns li { display: block; float: left; width: 25%; height: 22px; line-height:1.25em; }

.k-window, .k-window-content.k-content{ background-color: rgba(255,255,255,0.01); }

</style>

<script src="../js/jquery-1.9.1.js"></script>

<script src="../js/kendo/kendo.all.min.js"></script>

<script src="../js/cultures/kendo.culture.en-US.min.js"></script>

<script src="../js/cultures/kendo.culture.fr-FR.min.js"></script>

<script src="../js/cultures/kendo.culture.de-DE.min.js"></script>

<script src="../js/cultures/kendo.culture.it-IT.min.js"></script>

<script src="../js/cultures/kendo.culture.es-ES.min.js"></script>

</head>

var loginButton = loginWindow.element.find("#LoginButton").kendoButton({

click: function(e) {

viewModel.dataSource.filter( { field: "TeamMemberEmail", operator: "eq", value: email });

viewModel.dataSource.fetch( function (e) {

var view = viewModel.dataSource.view();

if (view.length == 1) {

window.LoggedIn.TeamMember = view[0];

kendo.culture(window.LoggedIn.TeamMember.LocaleKey);

createApplicationWindow();

loginWindow.destroy();

} else {

alert(" Email/Password combination not found. Is your CAPS LOCK key on?")

}

});

}

}).data("kendoButton");

Grid

answered on 10 Jan 2016

2 answers

681 views

MVC5 app - kendoNotification is not a function

I have a MVC razor view that I want to define a notification on

@(Html.Kendo().Notification() .Name("popupNotification") )

Just starting at this point, I get an error such as

Uncaught TypeError: jQuery(...).kendoNotification is not a function

There are other kendo widgets on the page (grid etc), they work as expected and the layout template is referencing the 2013.3.1324/kendo.all.min.js library.

Whats the deal with notification?

Notification

answered on 08 Jan 2016

3 answers

450 views

Intellisense in Visual Studio 2015

I would like to have intellisense in JS files for Kendo UI but I can't get it to work in Visual Studio 2015.

I've tried all the help files, I have BOTH kendo.web-vsdoc.js and kendo.web.min.intellisense.js in my project. I have references in _references.js to kendo.web.min.js. I even added references to the top of my JS file. No intellisense. Any ideas?

General Discussions

answered on 08 Jan 2016

7 answers

862 views

Can't sum, when doing group by column on grid

Hi,
I have a grid with two columns ie Type & Size. I want to sum of all sizes on group header when I want to do group by type. Please see my sample code below.

Type                  size
gif                        10
gif                        20
PNG                   30
PNG                 15

Result after doing group by Type :

Gif   (Sum of sizes) --30
PNG (Sum of sizes) --45
Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
       <script src="Scripts/jquery.min.js" type="text/javascript"></script>

             <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
                <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
      <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="grid"></div>

    var dataSource = new kendo.data.DataSource({
        data: pictures
    });

    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: dataSource,
            columns: [
            {
                field: "type",
                aggregates: "count",
                groupHeaderTemplate: "Type: #= value # Count: #= count #"
            },
        {
            field: "size",
            aggregates: ["count", "sum"],
            groupHeaderTemplate: "Grouped by size: #= value # Count: #= count #, Sum: #= sum#"
        }
        ],
            groupable: true
        });
    });

    </script>
</body>
</html>

Grid

answered on 08 Jan 2016