Questions on Kendo UI for jQuery Forum

3 answers

146 views

I have a tabstrip-like scenario

Page loads to an overview screen, when a button is clicked an iframe changes its src, then the overview div is hidden, and the div with the iframe is shown

Problem is the rangesplitters in the iframe all come out 1px wide...so then if I re-change the src via the JS console, it loads in fine (bypass the whole div\swap thing).

Splitter

answered on 25 May 2012

2 answers

114 views

[Solved] Nested splitters and timing...

I have a masterpage which has a script in document.ready to initalize the root splitter

I then have a child page where I'm initalizing a second splitter in one of the masterpages splitter panes....again in document.ready

The problem is the root one I don't think has finished rendering before the child one triggers so the child is small and not sized properly. Is there something I can do to fix that?

Splitter

answered on 25 May 2012

5 answers

284 views

ComboBox scrollbar does not work with IE 9

ComboBox scrollbar does not work with IE 9. The combobox is closed when trying to scroll. It work fine for Firefox and Chrome.

Please let me know your comments.

Thanks,
Frank

ComboBox

answered on 25 May 2012

1 answer

146 views

[Solved] Animation or timing?

I am wondering if there are any animation or timing settings for the splitter (or other controls).
The colapse is just a little too fast. It feels a bit jarring and I was hoping to be able to slow it down a bit. This being built on jQuery I would think it is possible.

Thanks,
Craig

Splitter

answered on 25 May 2012

1 answer

536 views

Grid Styling Part 2

Hi,

I asked a question earlier about styling the grid. I've read the documentation supplied and have been playing with firebug to get the styling options I need to mimic CRM.

I've got stuck trying to make the cells in the header smaller in height. Can anyone tell me where I'm going wrong? I've added the following styles (bold bit isn't doing what I'd like them to):

<style>
   .k-grid { border-bottom: none; }
   .k-header { background-color:#F5F7F9;color:black;font-family:tahoma;font-size:11px; }
   .k-header.k-link { color:black; }
   .k-state-selected { background-color:#A7CDF0;background-image:none;color:black;}
   .k-alt.k-state-selected { background-color:#A7CDF0;background-image:none;color:black;}
   tr { font-family:tahoma;font-size:11px;color:black;border-bottom:solid 1px #DBDEE1;height:21px;}
   .k-alt { background-color:white; }
   .k-grid td { padding:0px 10px;margin:0px;border-bottom:solid 1px #DBDEE1; }
   .k-grid-header { padding:0px 0px;margin:0px; }
</style>

Grid

answered on 25 May 2012

4 answers

432 views

[Solved] Kendo & ASP.NET AJAX ScriptManager incompatibility?

Hi,
I've got an existing web application that uses your ASP.NET AJAX library. it includes a number of pages where I can see that adding charts generated by the Kendo DataViz components would be really useful.

I've tried creating a test page that incorporates the client-side code from your Kendo 'Basic usage column chart' demo and it works fine. However, as soon as I add a RadScriptManager control to the page (which is needed by other ASP.NET AJAX controls) it generates an error 'Error: Object doesn't support property or method 'kendoChart'.

I've included my test page below. If you remove the three lines starting '<asp:ScriptReference...' the Kendo chart works again. I appreciate there are two copies of the JQuery library being loaded but removing the <script type="text/javascript" src="../Scripts/jquery.min.js"></script> line doesn't help either.

Is it possible to use Kendo components with a page that uses the RadScriptManager and other ASP.NET AJAX controls?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <link href="../Styles/examples.css" rel="stylesheet"/>
   <link href="../Styles/examples-offline.css" rel="stylesheet"/>
   <link href="../Styles/kendo.common.min.css" rel="stylesheet"/>
   <link href="../Styles/kendo.default.min.css" rel="stylesheet"/>

   <script type="text/javascript" src="../Scripts/jquery.min.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.core.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.data.js"></script>
   <script type="text/javascript" src="../Scripts/kendo.chart.js"></script>
</head>

<body>
   <form id="form1" runat="server">
       <telerik:RadScriptManager ID="rsmMain" Runat="server">
           <Scripts>
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
               <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
           </Scripts>
       </telerik:RadScriptManager>

       <div id="chart"></div>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#chart").kendoChart({
                   title: {
                       text: "My Chart Title"
                   },
                   series: [
                               {
                      name: "Series 1",
                      data: [200, 450, 300, 125]
                               }
                       ],
                   categoryAxis: {
                       categories: [2000, 2001, 2002, 2003]
                   }
               });
           });
       </script>
   </form>
</body>
</html>

General Discussions

answered on 25 May 2012

1 answer

75 views

dataSource not working when resizable set to true for the latest release of 515

Hi,

Firstly KendoUI is a great js UI suit.
It's nice to have the feature of enabling the grid columns to resize or reorder, I am happy to see this feature in 2012.1.515.
My questions are :
1, It will be an advantage if the resizable attribute can work on a particular column as well as it works on the whole grid.
2, when I set the resizable attribute for my grid, the datasource attribute somehow was disabled, I mean the grid could not get the remote data through the datasource anymore.

did anyone meet a similar problem?
Anyone thinks it is an advantage of what I mentioned in q 1?

Thanks!

Grid

answered on 25 May 2012

6 answers

166 views

[Solved] Important Questions about kendoUI data methods and data conversion

We are considering about using kendo UI in our project. Here i came up with some problems:

$("#grid").kendoGrid({

dataSource: {

data:[

{"ProductID": "1","ProductName": "name01", "UnitPrice": ['$33.55','$55.55','$23.55']},

{"ProductID": "2","ProductName": "name02", "UnitPrice": ['xx','yy','zz']},

{"ProductID": "3","ProductName": "name03", "UnitPrice": ['aa','bb','cc']}

]

},

selectable: "row",

columns: ["ProductID", "ProductName", "UnitPrice"],

dataBound: function(){

$("#select").bind("click",function(){

var $row = $("#grid").data("kendoGrid").select();

var product = $("#grid").data("kendoGrid").dataItem($row).toJSON();

alert(JSON.stringify(product));

//what i got from alert is:

/*

{"ProductID":"1",

"ProductName":"name01",

"UnitPrice":{

"0":"$33.55",

"1":"$55.55",

"2":"$23.55",

"_events": {"change":[null]},"length":3}}

*/

});

}

});

As you see, from JSON.stringify(product), I get some Kendo added cruft like _events and change and length. On top of this, the value of UnitPrice has been converted to a dictionary/json object instead of its original array. What I really need is to obtain the original data structure for that row.

Reason for such a need is because we are using CouchDB and we really need the data structure to remain the same and not have KendoUI Grid convert it to something else.

Thank you in advance!

Grid

answered on 25 May 2012

1 answer

104 views

Potential bug or inconsistency - remote binding example

Referring to this example in the docs...

http://demos.kendoui.com/web/mvvm/remote-binding.html

The selectedProduct in the viewModel gets set when the dropdownlist value changes. If you change this example and replace the dropdownlist with an autocomplete then it doesn't work. The selectedProduct gets set to the value of the data-text-field (the product name). Is this a bug or an inconsistency? Either way, it really should be changed so that value is the data item from the datasource i.e. the product object. Should all widget binding work in this way?

M

MVVM

answered on 25 May 2012

1 answer

158 views

Grid in offline

Hello,

We need to create a grid using kendoui as kendoui gives output in html5 and works in offline mode.

Please suggest us documentation, videos by which we can get idea about grid development which works in offline mode.

Please check our requirements as below.

We need to develop a grid which at first time bind data from datasource but once when message received need to
update grid by adding rows to grid.

We are using signalR to acknowledge the browser regarding data received.

Also when user is in offline mode, need to acknowledge user regarding offline and once when user be on line, update
grid with all data available from server.

Please suggest us how should we go to accomplish this.

Thank you

General Discussions

answered on 25 May 2012