Questions on Kendo UI for jQuery Forum

0 answers

126 views

Grid Grouping Behavior - Not Collapsing and Shrinking First Column

Hi All,

I have a grid bound to local data, and am using a RowTemplate to render the results.

When I use the grouping functionality a few things happen:

I cannot collapse a group
The first column in the grid becomes very small, hiding the contents of that column.
In my real-world code the Group Name shows up as "undefined", but I can't reproduce that in the example.

I have attached a sample project. Try grouping by LastName to see what I mean.

Thanks in advance for any help!

EDIT: After a little more investigation, it seems that using the RowTemplate is causing the grouping behavior. If I take the RowTemplate out, the grouping works great (aside from the first column being shortened). In my scenario - I really think I need to use the RowTemplate. Is this a bug, or can I build my RowTemplate differently to avoid this grouping behavior?

Grid

asked on 03 Feb 2012

2 answers

500 views

Compare Old and New Values After Grid Refresh

I have a Grid instance that is being refreshed every X seconds and would like to compare the new data (remote) with the existing data, which then affect how the data is displayed within the grid. I have looked through the documentation and the forums but can't seem to find a way to compare the two. The "change" config seems to be for only inline editing... but maybe I am wrong. Any help/links would be appreciated. Here is an example of what is going on here (I would like to compare the values returned for "rate" and "high_rate"):

// KendoUI grid

var kgrid = $("#rate_grid").kendoGrid({

dataSource: {

data: get_rates(),

pageSize: 100

},

height: 360,

groupable: false,

scrollable: {

virtual: true

},

sortable: true,

pageable: false,

columns: [ {

field: "rate_name",

width: '65px',

title: "Name"

} , {

field: "rate",

title: "Rate"

} , {

field: "high_rate",

title: "High"

}],

rowTemplate: kendo.template($("#rowTemplate").html()),

dataBound: onDataBound

});

setInterval( function() {

// if KendoUI grid instance, update it

if (typeof kgrid !== "undefined")

{

$('#rates_load small').text();

var re_grid = $("#rate_grid").data("kendoGrid");

var new_grid_data = get_rates();

re_grid.dataSource.data(new_grid_data);

re_grid.refresh();

}

}, 5000);

Grid

answered on 03 Feb 2012

0 answers

173 views

Unable to bind TabStrip to DataSource

Hi all.

I've faced to the problem with TabStrip and DataSource. After binding TabStrip to some simple datasource, it displays nothing, but if I bind these data to the ComboBox - it works great. Here is the code:

<div id="variantTabs"></div>

<div id="comboBox"></div>

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="kendoUI/js/kendo.all.js" type="text/javascript"></script>

<script type="text/javascript">

function Variant(_name,_id,_content){

this.text=_name;

this.id=_id;

this.content=_content;

}

function VariantsViewModel(){

var VariantsList=[

new Variant("first","1",""),

new Variant("second","2",""),

new Variant("third","3","")

];

var localDataSource = new kendo.data.DataSource({data: VariantsList});

$("#variantTabs").kendoTabStrip({

dataSource:localDataSource

});

$("#comboBox").kendoComboBox({

index: 0,

dataTextField: "text",

dataValueField: "id",

dataSource:localDataSource

});

}

$(function(){VariantsViewModel();});

</script>

Any help would be appreciated.
Thanks.

TabStrip

asked on 03 Feb 2012

4 answers

135 views

Issues while rendering a grid with sortable attribute in FireFox

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SortingIssue.aspx.cs" Inherits="CMCKendoUI.Web.SortingIssue" %>

<!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>Sorting Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="js/kendo.all.js" type="text/javascript"></script>
<link href="styles/kendo.common.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {
var data = [], now = new Date();
for (var i = 0; i < 50; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
age = now.getFullYear() - birthDate.getFullYear();

data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
Age: age
});
}
return data;
}

var KendoGridModel = kendo.data.Model.define({ id: 'Id' });
$(document).ready(function ($) {
var ctlGrid = $("#gridDiv");
ctlGrid.kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 5
},
schema: { model: KendoGridModel },
selectable: true,
//sortable:false,
//sortable: { mode: 'single', allowUnsort: false },
pageable: true
});
});
</script>

<body>
<form id="form1" runat="server">
<div id="gridDiv" runat="server" />
</form>
</body>
</html>

For the above code, I cant get the grid rendered in FIrefox (10.0) till the time I comment out the sortable attribute. Its working fine in IE (7 to 9) But I want my grid to be rendered with the sortable attribute in addition to allowunsort attribute. Can you guide me how can I get the needed functionality?

Thanks & Regards,
Manoj Kapoor

Grid

answered on 03 Feb 2012

0 answers

81 views

window hyperlink from inside a template table

 hi,


I am using kendo template to display some fields data from the datasource into a table. I have a hyperlink on one of the elements that pops up a window.
Am able to pull the data propery, but the popup window doesnt popup- instead displays on same page at the top.
following is my code inside the td that has a link
  
<td> <a href="javascript:toggle5();" id="window5"  class="k-group Property " >
       #=name # 
    </a> </td>

What can i change to make the window popup.

thanks in advance.

Window

asked on 03 Feb 2012

1 answer

50 views

Issue with the chart column title with single codes in it

hi,

i have some thing like date d'échéance as column header title, then it is failing. I tried replacing the single codes with 96 & it is displaying correct. But, when i drag that column header for grouping, it is getting truncated to date d.

Please help me on this.

Globalization

answered on 03 Feb 2012

4 answers

329 views

HTML 5 local storage as backend

Hi.

Is it possible to use HTML 5 local storage as a backend of the Kendo UI datasource? I couldn't find any examples on how to do this.

If it isn't possible, is this considered in the roadmap?

Br,
Timo Westkämper

Data Source

answered on 03 Feb 2012

3 answers

827 views

Using save event from custom toolbar control

I have created a grid and I have needed to use a template to create the toolbar. I want to be able to batch edit then save back to the server.

If I weren't using a template I could simply use

  toolbar: ["create", "save", "cancel"],

To do what I need, however I need the template as I have a dropdown box in the toolbar and some other html.

How do I tap into these events from a control inside my custom toolbar?

Any help would be great!

Grid

answered on 03 Feb 2012

1 answer

176 views

Bind KendoGrid in Sharepoint from Sharepoint BDC model or BCS

I want to bind the data object written from the Sharepoint BCS to KendoGrid used in Sharepoint webpart. Also, according to my knowledge to bind kendo grid the data should be in json format. If this is correct then how to convert the data from BCS into JSON and then bind it to KendoGrid on client side?

Grid

answered on 03 Feb 2012

0 answers

423 views

Ajax call and kendo data source together

Hello
     I have a requirement where I ll do a $.ajax call and then store the ajax call response to a kendo datasource...like below
   $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                success: function (responsedatas) {
                     ///I got datas here..If i put debugger im able to see the datas
                     var KendoSource = new kendo.data.DataSource({ data: responsedatas});
                      $("#grid").kendoGrid({
                    dataSource: {
                        data: KendoSource
                    },
                    height: 360,
                    groupable: false,
                    scrollable: false,
                    sortable: false,
                    pageable: false,
                    columns: [{
                        field: "ContactID",

                        title: "ContactID"
                    }]
                });
                }
            });

If i do the above code...My grid doesn't have datas... If i give the responsedatas directly to the grid data..IM able to get the grid properly..But i wanna use kendosource..I was testing this kendosource to work..I have lots of requirements on kendosource...

Data Source

asked on 03 Feb 2012