Questions on Kendo UI for jQuery Forum

1 answer

523 views

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

402 views

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

70 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

157 views

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

79 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

148 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

1 answer

87 views

JSON-RCP for DataSource? At least something that does batches?

Is there planned support for JSON-RCP for DataSource? At least something that does batches? Using REST is fine for example code, but otherwise can result in many connections, etc. While a bigger problem in mobile, it still makes a difference in desktop. ExtDirect and json-rcp both seem to fit the bill.

Data Source

answered on 25 May 2012

15 answers

1.7K+ views

Problem binding nullable value to dropdown in grid

Hello All,

I'm using a batch edit grid with an editor template that is very similar to the editor template demo on your site. I'm getting some strange behavior when editing the dropdownlist cell. The difference between my situation and the demo is that ProductID in the demo is a non-nullable numeric column, but in my case it is nullable. I am capturing the grid save event just to verify that something is happening. It works fine when editing a cell that already has a value selected for ProductID. But for new rows or for cells where there is no ProductID changing the value doesn't persist the change back to the grid. The save event doesn't fire in this case. If I update my model so that the property is non-nullable and returns a value of -1 where I would have been returning a null then it works. So it feels like there's some weird behavior with the DropDownList, but maybe there is something I'm doing wrong. Let me know if you have any ideas.

My source code is pretty messy right now, but I could try to hack up the editor demo to match my situation if that would help.

Thanks,
Brian

Grid

answered on 25 May 2012

12 answers

3.4K+ views

Filtering not working

I've enabled filtering on a few columns. However, I don't see how the filtering is supposed to work. There has been no change in the appearance of the header (or the headers of any other columns) and there is no apparent way to filter any columns. Am I doing something wrong or looking in the wrong place for filtering? Here's the code:

$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "Home/GetWorklist",
dataType: "json",
type: "GET",
contentType: "application/json; charset=1-8"
}
},
pageSize: 15,
schema: {
data: "data",
total: "total"
}
},
columns: [
{ title: "Part Number", field: "PartNumber", template: "#= PartNumber #" },
{ title: "Noun", field: "Noun", filterable: true },
{ title: "Procurement Code", field: "ProcurementCode", filterable: true },
{ title: "Cage Code", field: "CageCode" },
{ title: "Responsible", field: "Responsible" },
{ title: "SONIC Queue", field: "SonicQueue" },
{ title: "SONIC Status", field: "SonicStatus" },
{ title: "Priority", field: "Priority" },
{ title: "DIS", field: "Dis", width: 50 },
{ title: "QIS", field: "Qis" },
{ title: "Status", field: "Status" },
{ title: "Estimator", field: "Estimator" },
{ title: "Related Parts", field: "RelatedParts" }
],
pageable: true,
sortable: true
});

Grid

answered on 25 May 2012

0 answers

50 views

Can I manually append column after I init the Grid?

Grid

asked on 25 May 2012