Questions on Kendo UI for jQuery Forum

1 answer

176 views

Customtoolbar not working with AngularJS

Hi,

below is an example of the editor with a custom toolbar. The custom toolbar is not working for the editor included via AngularJS. Maybe anyone has some hints, what's wrong here.

Thanks!

Example:

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.mobile.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>

<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="box">
<textarea kendo-editor k-tools="{{toolbar}}" ng-model="html"></textarea>
</div>
<hr / >
<div class="box2">
<textarea id="editor">Working Toolbar</textarea>
</div>
</div>
</div>

<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "Custom Toolbar not working :-(";

$scope.toolbar = [{name: "Cat", exec: function() {alert("Miau"); } }];
})

$(document).ready(function() {
$("#editor").kendoEditor({
tools: [{name: "Cat", exec: function() {alert("Miau"); } }]
});
});
</script>
</body>
</html>

Editor

answered on 12 Dec 2014

3 answers

323 views

[Solved] Navigatable, Virtual Scrollable - KB nav doesn't scroll grid

When we use navigatable and virtual scrollable, and then try to navigate by the keyboard, the cell that indicates current selection moves down beyond the visible page but the scroll bar doesn't scroll. Is there a configuration to have the scrollbar scroll?
Note, this doesn't have to do with paging. Page-Down works well for that. I'm referring to the current page when the rows extend beyond the visible "window" of the grid.

The below is essentially the "Virtualization of remote data" demo from the Grids demo area with the addition of "navigatable: true"

$("#grid").kendoGrid({

dataSource: {

type: "odata",

serverPaging: true,

serverSorting: true,

pageSize: 100,

transport: {

read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

}

},

height: 543,

scrollable: {

virtual: true

},

sortable: true,

navigatable: true,

columns: [

{ field: "OrderID", title: "Order ID", width: 70 },

{ field: "CustomerID", title: "Customer ID", width: 90 },

{ field: "ShipName", title: "Ship Name", width: 220 },

{ field: "ShipAddress", title: "Ship Address" },

{ field: "ShipCity", title: "Ship City", width: 110 },

{ field: "ShipCountry", title: "Ship Country", width: 110 }

]

});

Thanks,
--Ed

Grid

answered on 12 Dec 2014

1 answer

209 views

Export to Excel not working the second Time

Hi there,

I have this call to export Data from grid to Excel

$("#affectedDocGrid").data("kendoGrid").saveAsExcel()

When I make the call the first time, it works fine, when I call it the second time, it doesn't work. If I refresh the page and make the call, I get the file. Any clues why

$('#exportToExcelmyAffectedDocs').on('click',function(e){
$("#affectedDocGrid").data("kendoGrid").saveAsExcel()
})

Grid

answered on 12 Dec 2014

3 answers

863 views

Treeview total count

Hello,

I'm a bit confused about how to determine the total count of all nodes.
Using kendo with angular it seems if I remove a parent node the total() takes the childs into account after the remove-action.

Its simple reproducable by inserting a simple statement in Teleriks angular-example on http://kendo-labs.github.io/angular-kendo/#/TreeView

Please insert the markup within the h3-tags where you want inside the ng-controller: <h3>{{treeData.total()}}</h3>

        <div class="sidepane" ng-show="selectedItem">
          Selected: {{selectedItem.text}}
          <br /><br />
          <button class="k-button" ng-click="addAfter(selectedItem)">Add after</button>
          <button class="k-button" ng-click="addBelow(selectedItem)">Add below</button>
          <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
          <h3>{{treeData.total()}}</h3>
        </div>

take this action:
- run code/markup
- select node 'item 3'
- first unexprected behaviour: displayed total() takes childs NOT into account (number is 3 instead 5)
- click button 'Add below' (e. g. 5 times)
- click delete and remove all parents (dont delete the childs explicit)
- result: the displayed total() is > 0 (e. g. 5 if clicked 3 times on 'Add below')

So here my question: how to determine the true number of currently existing nodes? Perhaps its obvious for somebody. For me its not - im fightig to the same time with angular and with kendo, because both is new to me.
Thanks a lot.

TreeView

answered on 12 Dec 2014

4 answers

2.0K+ views

Need to remove the decimal points in the value.

Hi,

I have a Kendo NumericTextBox which displays the percentage value. I need to display "10" and not "10.00" if the input is "10". Below is my code and i used Format(P0). but when user tries to input the value it accepts in the format like 0.01 for 1%.

@(Html.Kendo().NumericTextBox<int>()
.Name("FlexUp")
.Format("#")
.Min(0)
.Max(100)
.Step(1)
.Decimals(0)

Thanks for the help in advance.

NumericTextBox

answered on 12 Dec 2014

5 answers

556 views

Check Box with Dynamic column Grid

Hi ,
Grid fields are fetched from Database as dynamically. Now I want to add the check box for each row in dynamically generated Grid.

For ex : (1) Id (2) Name (3) Age (4)Phone Number .. These columns are fetched from Database and these are displayed as dynamically.
Now i want to add the check box for each row.

Any body share your suggestions .Thanks in Advance.
Sriram Nagasundharam

Grid

answered on 12 Dec 2014

1 answer

206 views

Typescript Function Undefined

I'm new to Typescript but we were hoping to implement it in our new project. I'm having trouble just getting a simple grid to work. I have set up references to jquery and the kendo.all.d.ts files. KendoGrid shows up in my Intellisense but when I attempt to load the page I'm recieving and error of undefined isn't a function when it hits the kendoGrid function. Could it be something conflicting with jquery versions?

Here is my code.

/// <reference path="jquery.d.ts" />
/// <reference path="kendo.all.d.ts" />

$(document).ready(function () {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});

Thanks,

Grid

answered on 11 Dec 2014

1 answer

172 views

[Solved] reference detail grid

Hello,

I have a hierarchical grid with 2 hierarchies, Projects>Requests>Jobs. Jobs grid has a checkbox column. Users should be able to select multiple jobs from multiple requests/projects. I need to loop through the jobs grids and get the selected jobIds. How can accomplish this? Thanks!

Here is how the grid is defined

@(Html.Kendo().Grid<ViewProject>()

.Name("Projects")

.Columns(columns =>

{

columns.Bound(m => m.ProjectId).Visible(false);

columns.Bound(m => m.ProjectNumber).Width(120);

columns.Bound(m => m.ProjectName).Width(125);

columns.Bound(m => m.CustomerNumber).Width(125);

columns.Bound(m => m.CustomerName).Width(125);

columns.Bound(m => m.Division).Width(100);

columns.Bound(m => m.DueDate).ClientTemplate("#= kendo.toString(DueDate, 'MM/dd/yyyy') #").Width(90);

columns.Bound(m => m.CreatedBy).Width(90);

columns.Bound(m => m.CreatedDate).ClientTemplate("#= kendo.toString(CreatedDate, 'MM/dd/yyyy') #").Width(90);

columns.Bound(m => m.UpdatedBy).Width(90);

columns.Bound(m => m.UpdatedDate).ClientTemplate("#= kendo.toString(UpdatedDate, 'MM/dd/yyyy') #").Width(90);

})

.Sortable()

.Pageable()

.Scrollable()

.ClientDetailTemplateId("template")

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Batch(true)

.ServerOperation(false)

.Model(model => model.Id(p => p.ProjectNumber))

.Read(read=>read.Action("ReadData","SummingeReports")

.Data("ReadData"))

)

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

@(Html.Kendo().Grid<ViewRequest>()

.Name("Requests_#=ProjectNumber#")

.Columns(columns =>

{

columns.Bound(o => o.RequestID).Width(150).ClientTemplate("<a href='javascript:showJob(\\#=RequestID\\#)'>\\#=RequestID\\#</a>");

columns.Bound(o => o.RequestName).Width(110);

columns.Bound(o => o.Description).Width(110);

columns.Bound(o => o.CreatedBy).Width(110);

columns.Bound(o => o.CreatedDate).Width(110).ClientTemplate("\\#= kendo.toString(CreatedDate, 'MM/dd/yyyy') \\#"); ;

columns.Bound(o => o.UpdatedBy).Width(200);

columns.Bound(o => o.UpdatedDate).Width(200).ClientTemplate("\\#= kendo.toString(UpdatedDate, 'MM/dd/yyyy') \\#");

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => model.Id(p => p.RequestID))

.Read(read => read.Action("GetProjectRequests", "SummingeReports", new { projectId = "#=ProjectId#" })

.Data("ReadData"))

)

.Pageable()

.ClientDetailTemplateId("jobstemplate")

.Sortable()

.ToClientTemplate()

)

</script>

<script id="jobstemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ViewJob>()

.Name("Jobs_#=RequestID#")

.Columns(columns =>

{

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' \\#= Select ? checked='checked':'' \\# class='chkbx' />")

.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this, #=RequestID#)'/>").Width(30);

columns.Bound(o => o.JobNumber).Width(150).ClientTemplate("<a href='javascript:showJob(\\#=JobNumber\\#)'>\\#=JobNumber\\#</a>");

columns.Bound(o => o.JobName).Width(110);

columns.Bound(o => o.Status).Width(110);

columns.Bound(o => o.SubmittedBy).Width(110);

columns.Bound(o => o.SubmitDate).Width(110).ClientTemplate("\\#= kendo.toString(SubmitDate, 'MM/dd/yyyy') \\#");

columns.Bound(o => o.Division).Width(200);

columns.Bound(o => o.ProjectNumber).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => model.Id(p => p.JobNumber))

.Read(read => read.Action("GetRequestJobs", "SummingeReports", new { requestID = "#=RequestID#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

Grid

answered on 11 Dec 2014

1 answer

215 views

Dashed line to indicate missing data?

Hi,

I'm using line charts for some of our weekly and monthly data. What we would like to do is to show whether or not data in a series is null or missing. For example, if I have an array of data with seven days worth of data, but thursday is null, I would like to show the part of the line from wednesday to friday as a dashed line. Is that sort of thing possible?

Thanks,

Eric

Charts

answered on 11 Dec 2014

1 answer

311 views

Adding Multiple Subtotal Rows on a 2-dimensional Grid

Hi,

We are building a 2-dimensional Grid using the Multicolumn feature and have done some customization to achieve the Y-axis headers as shown on the picture attached. Basically, we just set the class attribute of the y-column to 'k-grid-header'. The data is already aggregated beforehand and we are not using the aggregation feature of the kendo grid.

So, the problem now is that we want to display a dynamic row for Subtotal, per the example, for Brushes (first 2 rows), Cat Food, etc. below the last row for each group. See the second attached file for an edited picture for our desired output. I say dynamic because depending on how our data is set up, the subtotal can be for each column, like this:
Phone Chat
Qty Cost Qty Cost
Brushes 1 2 2 1
Brushes 3 1 2 4
Subtotals: 4 3 4 5

OR it can be a subtotal spanning throughout all the groups on the X-Axis, like this:
Phone Chat
Qty Cost Qty Cost
Brushes 1 2 2 1
Brushes 3 1 2 4
Subtotals: Qty: 8 Cost: 8

By the way, the subtotals are already computed beforehand as well. It is hard to insert a custom row, like just inserting a <tr> tag and just set the class and all, because the data coming in is dynamic. Here's the jsfiddle where the grid column and data is being built from a raw json that our server spits out. The outputs are in the console log. The first array in the console log output is the columns while the second array is the data.

Is there anyway to do this in a Kendo Grid? I'm thinking that this might be beyond what the Grid can support but maybe there is a workaround that might use or a feature that the grid has that supports such scenario.

Thanks

Grid

answered on 11 Dec 2014