Questions on Kendo UI for jQuery Forum

1 answer

99 views

Hi ,I have been trying to generate map ,From the database lat,lon I want to create map dynamically ,how to do it I want to use MYSQL & JAVA .Also have attached a map digram please find

Map

answered on 12 Dec 2014

3 answers

496 views

KendoGrid Scrolling issues in Mobile Browser

I want to capture the scroll-end event of the grid to fire my custom load more results functionality. It works fine on desktop's after i attach the scroll event to k-grid-content div. But on mobile browsers the scroll event does not get fired.
Appreciate your help in advance

Grid

answered on 12 Dec 2014

1 answer

179 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

328 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

218 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

873 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

563 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

211 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

189 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