I am using Angularjs in combination with bootstrap. The chart displays after the data has been retrieved using the ng-show="hasData()" option. I want the chart to fill the width of the parent element.

When the chart displays: the "g" element is only 400px wide while the "svg" has 100% width. In the controller constructor I resize the containing element when the window is resized, however, this doesn't happen until the window is resized.

I attached two pictures showing what I'm talking about.

Would like some assistance on improving performance using Kendo UI Grids.

I am writing my web pages in Domino Xpages. Using a Rest Service to return my data sets. 

My load times when I go from page to page (or when I have to refresh the page via a delete) are from 1.4 to 4.5 seconds. This really seems slow to me, as I only have 10 records or so. Almost all of the stylesheets and javascript is being cached, so I don't think that is the problem.

I have attached a screen shot the shows the page took 1.55 seconds to load, but the time on the right hand side only adds up to 57 milliseconds. Where is the other delay coming from.

Here is my code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex" createForm="false"
style="background-position:center left">

<xp:this.resources>
<xp:styleSheet href="/cc_CommonButtonPanel.css" />
<xp:styleSheet href="/cc_CommonDataView.css" />
</xp:this.resources>



<link rel="stylesheet" href="KendoUI/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="KendoUI/styles/kendo.bootstrap.min.css" />
<script src="KendoUI/js/jquery.min.js"></script>
<script src="KendoUI/js/kendo.all.min.js"></script>


<xp:div styleClass="container-fluid" style="margin-right:15.0px">
<xp:div styleClass="row" style="margin-bottom:15.0px" id="divGrid">

<xe:jsonRpcService id="jsonRpcService1"
serviceName="rpc1">
<xe:this.methods>
<xe:remoteMethod name="buildPC">
<xe:this.arguments>
<xe:remoteMethodArg type="string"
name="docUNID">
</xe:remoteMethodArg>a</xe:this.arguments>
</xe:remoteMethod>
<xe:remoteMethod name="deleteDoc">
<xe:this.arguments>
<xe:remoteMethodArg type="string"
name="docUNID">
</xe:remoteMethodArg>
</xe:this.arguments>
<xe:this.script><![CDATA[var db = session.getCurrentDatabase();
var doc:NotesDocument = db.getDocumentByUNID(docUNID);
doc.remove(true);]]></xe:this.script>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
<xc:cc_CommonButtonPanel>
<xp:this.facets>
<xc:cc_CommonSearchBar xp:key="facetRight"></xc:cc_CommonSearchBar>
<xp:span xp:key="facetLeft">
<xp:button value="Add New PC To Inventory" id="button2" styleClass="btn-primary dashBtn">
<xp:this.rendered><![CDATA[#{javascript:
return userBean.canCreateDocs;
}]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/xpFormPC.xsp" target="newDocument" />
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button1"
styleClass="btn-primary dashBtn" value="Build PC">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/xpFormPC.xsp"
target="newDocument" />
</xp:this.action>
<xp:this.script><![CDATA[var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem == null)
{alert("You must select one document")}
else
{rpc1.buildPC(selectedItem.docUNID)
}]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button value="Delete" id="button3"
styleClass="btn-danger dashBtn">
<xp:eventHandler event="onclick"
submit="false">
<xp:this.script><![CDATA[var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem == null)
{alert("You must select one document")}
else
{rpc1.deleteDoc(selectedItem.docUNID)
$('#grid').data('kendoGrid').refresh();
}]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:span>
</xp:this.facets>
</xc:cc_CommonButtonPanel>
</xp:div>
<div class="row" id="grid">
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready( function() {


// Double Click On row
$("#grid").on(
"dblclick",
" tbody > tr",
function() {
var grid = $("#grid").data("kendoGrid");
var row = grid.dataItem($(this));
window.open(
"xpFormPC.xsp" + "?OpenDocument=" + row.docUNID,
"_self");
});


// Add hover effect
addExtraStylingToGrid = function() {
$("table.k-focusable tbody tr ").hover( function() {
$(this).toggleClass("k-state-hover");
});
};


// Search
$("#search").keyup( function() {
var val = $('#search').val();
$("#grid").data("kendoGrid").dataSource.filter( {
logic : "or",
filters : [ {
field : "serialNumber",
operator : "contains",
value : val
}, {
field : "officeLoc",
operator : "contains",
value : val
}, {
field : "model",
operator : "contains",
value : val
} ]
});
});


// Grid
grid = $("#grid").kendoGrid( {
dataSource : {
transport : {
read : "rsPC.xsp/PC1"
},
     pageSize : 20
},
columns : [ {
field : "serialNumber",
title : "Serial Number"
}, {
field : "officeLoc",
title : "Office Location"
}, {
field : "model",
title : "Model"
} ],
change : onChange,
edit : onEdit,
reorderable : true,
scrollable : true,
pageable : true,
sortable : true,
groupable : false,
filterable : true,
selectable : true,
dataBound : addExtraStylingToGrid
});


// Edit
function onEdit(e) {
}


// Change
function onChange(args) {
var model = this.dataItem(this.select());
ID = model.ID;
}
;


});]]></xp:this.value>
</xp:scriptBlock></div>
</xp:div>
</xp:view>

I am having trouble getting ng-click to work. 

Here is a dojo of what I would like to do. 

http://dojo.telerik.com/IFuRE/2

I don't really need to use buttons or templates in my case, I would like to be able to click anywhere on a tile and have that trigger a function with the dataitem that was clicked.

I did find this example here:

http://dojo.telerik.com/@SiliconSoul/uMORu

But this is not really the angular way to do this, I would like to use a function on my controller and have the scope come through etc.

Regards,

Ivan

Just wondering why the effects and animations are using inline style to be created?

Is there not an option to use css classes?

The only problem I am having was that I wanted to extend and create some custom effects however because they are currently using inline styles it will overwrite any styles I apply via a class.

For example: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist

If it was simply adding a class of .fadeIn and .fadeOut then I could create a custom css class for the transitions and change fadeIn to .mycustomclass 

However is it not switching class style it is adding inline styles and I can't locate where the JS is that adds these inline styles and 'fadeIn' is declared. Are you able to advise where these are being set at all so worst case I can just copy one of them and rename the effect and set the inline styles that would ideally be a class

When migrating from Kendo UI from v 2014.3.1316 to 2015.2.624 hidden grid columns became visible and layout was defected.

Please see attached image for differences. 

No other code was changed in the migration besides using the following new version: (*note: same problem with 2016.1 version)

http://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js

Hi everyone, I searched for a long time for that issue, and that's why I am telling the solutions to everyone.

We need to enable and disable grouping dynamically.  

Also, when grouping is enable, we need to change the pageSize because grouping doesn't work well with small page size if your data cover more than 1 page.

These are the non-working solutions: 

That is the working solution: (you absolutely need to set BOTH)

If you call

If you really want to do that "1 shot", you need to set both.
You can test it there: http://dojo.telerik.com/aJEkA/6

Maybe Kendo can fix the setOptions to check if the "other" variable needs to be updated as well, to make it work like dataSource.pageSize() method.

I believe this function can work using k-denied but still not very good with the JS for the tool suite. I have two treeviews. I'm working on a screen where once a treeview is persisted to the DB, a user could go back and update it with new nodes, a reordering of nodes or deleting the nodes.

How can I validate that if a node is dragged from the left tree to the right tree, that if the ID (identified by ext_model_id) exists, don't drop on the tree? How can I see if the node is even there? Do I use the data-uid?

 Help would be appreciated.

 I am working with the Gantt and I'm to try implement the Event "edit" for prevent edition in something tasks.... (using  e.defaultPrevent() )

The problem is... the function show an error in my project BUT also in the Example ONLINE...



You can repeat in:

http://dojo.telerik.com/oyaFU   (The gantt online in dojo.telerik.com)

You have add the event edit:...

edit: function (e) {
                e.preventDefault();
}



And you have open the Console of the Browser and at do clic... and show this...  (added a image)



I am to do something wrong?.. Or is a something Bug?  I used Google Chrome...

I need your help..



Thanks!!