Questions on Kendo UI for jQuery Forum

2 answers

397 views

Hi again all. How can this be converted to a ClientTemplate inside a Kendo Grid?

columns.Bound(document => document.Revisions).Template(@<text>
                @if (item.Revisions.Count <= 1)
                {
                    <div>
                         
                    </div>
                }
                else
                {
                    @Html.Raw(string.Format("<text><a id='img' class='icon' href=\"{1}\"><img src=\"{0}\" alt='' style='border:none;' /></a></text>", Url.Content("~/Images/docrev1.png"), Url.Action("ViewRev", "ViewRevisions", new { id = item.OriginalQRCodeID })));
                }

</text>).Title("").Width(25);

My problem right now is that "Revisions" is an IEnumerable<T> type bound from the server. How do I get its count from client side? Is this even possible? Thanks very much for all the help and I look forward to the response(s).

Romel

Grid

answered on 09 May 2014

3 answers

114 views

[Solved] Custom validation broken in latest kendo release.

I have a custom validation method configured for my grid column which is now broken in the latest release.

Here is the source for my validation method:

validnamevalidation: function (input) {

if (input.is('input[data-bind="value:Name"]')) {

input.attr("data-validnamevalidation-msg", "A team already exists with that name.");

var passed = false;

var currentDataItem = $("#teamsGrid").data("kendoGrid").dataItem($(input.context));

var currentId = currentDataItem.Id;

if (currentId == "") currentId = -1;

$.ajax({

async: false,

url: currentViewModel.crudServiceBaseUrl + "CheckTeamNameBeforeAdd?teamId=" + currentId + "&name=" + input.val().trim(),

success: function (result) {

if (result == "False") passed = false;

else passed = true;

},

error: function (jqXHR, textStatus, errorThrown) {

alert(errorThrown + '. ' + jqXHR.responseText);

},

complete: function (jqXHR, textStatus) {

}

});

return passed;

}

return true;

},

In the latest release, the input.context variable (which I use to obtain the current data row to be validated) is now undefined.

Is this a bug?
Is there a workaround?

Validation

answered on 09 May 2014

2 answers

268 views

Tooltip callout not positioned correctly in Bootstrap theme

We are using the Kendo bootstrap theme. When a Kendo Tooltip is displayed on the right or left, the callout triangle does not appear centered next to the tooltip. It appears lower than it should, and looks particularly bad when the tooltip contains only a single line of text. Please see the following for an example: http://trykendoui.telerik.com/@CodinAndHaulin/AYAs
You'll notice that if you change the Kendo theme in the example (to default or moonlight, etc), the tooltip callouts look proper.
Is there a way I could style the tooltip in Bootstrap theme correctly?

ToolTip

answered on 09 May 2014

5 answers

361 views

Slice with Nested Observable Array

I am trying to use the slice method on my Observable Array. Each item in my array has another observable array. The slice works great, as the objects returned are prefect "copies", but the Observable Arrays in each object are not copied, and therefor still reference the observable array from the item it was copied from. How can I do a true deep copy for my items with any nested items that item may have?

Thanks and sorry if this sounds confusing.

MVVM

answered on 09 May 2014

4 answers

318 views

[Solved] Programatically Trigger seriesClick

Is there a way to programatically trigger the click event on a chart series? I'm trying to setup a unit test to test the seriesClick function and haven't been able to see anything. In a somewhat desperate attempt I tried to trigger the click event on everything to see if I got something to trigger the event but it appeared as though nothing hit it; I have some console output as soon as the function runs. I used this line of code to try to execute the event.

$('*').each(function(){

$(this).click();

});

Charts

answered on 09 May 2014

4 answers

267 views

[Solved] Details causes main grid to refresh?

I can't figure out what is going on here. I'm trying to make a custom directive for grids and will use element attributes to customize a given instance. In doing so i've made two files

grid-controller.js

app.controller('gridController', ['$scope', function ($scope ) {

//Initilization code

$scope.gridOptions = {

//Setup options

};

$scope.detailOptions = function (e) {

console.log('winning');

return {

dataSource: {

transport: {

read: {

url: "/detail" + e.OrderNumber + ".json",

dataType: 'json'

}

},

error: function (e) {

console.log(e);

},

pageSize: true,

serverPaging: false,

serverFiltering: false,

serverSorting: false,

},

columns: [

{

field: "ItemCode",

label: "lblItemCode",

title: ""

}, {

field: "ItemDesc",

label: "lblItemDesc",

title: ""

}, {

field: "QuantityOrdered",

label: "lblQuantityOrdered",

title: ""

}

],

scrollable: false,

sortable: true

};

}

grid-directive.js

app.directive('grid', function () {

return {

// Restrict E for element

restrict: 'E',

// Here we setup the template for the code we want to replace our directive

template: "<div> \n\

<div kendo-grid='grid' \n\

k-options='gridOptions'\n\

k-data-source='dataSource'>\n\

</div> \n\

<script type='text/x-kendo-template'\n\

id='details'>\n\

<div kendo-grid >\n\

</div>\n\

</script>\n\

</div>",

replace: true,

scope: {

},

controller: "gridController",

link: function (scope, element, attrs) {

//Gather some attribute data and set it to the gridOptions object

if(scope.$eval(attrs.detailsGrid))

{

scope.gridOptions.detailTemplate = kendo.template($("#details").html());

scope.gridOptions.detailInit = scope.detailOptions;

}

//More customization code

scope.dataSource = new kendo.data.DataSource({

//Setup dataSource options for main grid

});

}

};

});

For sake of brevity i've excluded a lot of the extra code.My problem is whenever I try to open the details of a row the row opens...closes...and the grid appears to refresh. It almost looks like something is crashing and the main grid is refreshing as a result.Here is the associated plunkr with the commented portions fleshed out.

Grid

answered on 09 May 2014

1 answer

135 views

Listview getting small on binding

Hello Team,

I have a project in which I have used list view to show the data. But When I bind the data first time, it works properly, but when bind the data again then it gets small.

I am using the below code :

<div id="tabstrip-sales-dashboard" data-role="view" data-title="Sales dashboard" data-model="app.loginService.viewModel" data-show="mobileSalesViewInit" data-stretch="false" >

            <div>
                <div data-role="content" class="view-content">

                    <ul id="salesperiod" data-role="buttongroup" data-index="0" style="font: bold 0.76em HelveticaNeue,sans-serif;">
                        <li>Today</li>
                        <li>Current Week</li>
                        <li>Current Month</li>
                    </ul>
                </div>
            </div>

            
                <span id="spMsg"></span>
                <p id="paraspMsg"></p>
                <ul id="ulToday">
                </ul>
            

        </div>

In above code I am binding data to ' <ul id="ulToday"></ul>'.

This occurs in android. Just I have investigated briefly and I found that when we bind data to listview it creates <div class="listview-wrapper"> and I think It has padding and I think this is why it is causing problem.

Any help would be appreciated.

Thanks

ListView (Mobile)

answered on 09 May 2014

1 answer

372 views

How to right align a button in a listview item

I have a button inside a listview item, and I do not want it to occupy the whole width of the item. I want to fix the width and right align the button.
I have tried using data-align="right" but that does not help, the button remains left aligned

Here is my code

<ul>

<li><a data-role="button" data-rel="modalview" href="#modalview-loanamount" id="modalview-open-button">Help</a></li>

</ul>

<style scoped>

#modalview-open-button {

width:5em;

}

</style>

Button (Mobile)

answered on 09 May 2014

2 answers

331 views

Resize all Charts on the page

Hello,

I am trying to set the height of all the charts on the page to half of the window size. However I keep getting the following error: Uncaught TypeError: undefined is not a function

The code I have is as follows:

$(window).resize(function () {

// for any chart or gauge widget

$(".k-chart").each(function () {

// get the instance of the chart/gauage

var chart = kendo.widgetInstance($(this), kendo.ui);

var c = $(this).data("kendoChart");

// make sure transitions are off

//chart.options.transitions = false;

console.log($(window).height() * 0.4);

c.height($(window).height() * 0.4);

// redraw the chart/gauge

if (chart && chart.redraw) {

chart.redraw();

}

});

The error pops up with the c.height($(window).height() * 0.5); statement.

Any idea what I am doing wrong? I am running the 2014.1.318 version

Thank you

Charts