Questions on Kendo UI for jQuery Forum

3 answers

645 views

Is there any way to assign a class to specific columns? Ideally this would be part of the column configuration, but I'm willing to consider alternative methods.

The reasoning for this is that I want to be able to style certain columns differently. For example, on a grid showing days, I want the weekend days to have a different background color.

Grid

answered on 02 Mar 2012

2 answers

130 views

method 'onShowStart'

When I try to call var app = new

kendo.mobile.Application(document.body);

I get error in chrome console and loading div is constantly showing

Uncaught TypeError: Cannot call method 'onShowStart' of undefined


I was check that all files was included in my javascript folder and they were included.

I use trial version so all my files are minified. Do you have any idea what was wrong?



This is my site code:




<!DOCTYPE html>
<html>
<head>
    <title></title>  
    <%= stylesheet_link_tag :application, "kendo.mobile.all.min" %>
    <%= javascript_include_tag "jquery.min", "kendo.all.min", "kendo.culture.hr-HR.min" %>    
     
</head>
<body>  
       <div data-role="header">Header</div>
     <div data-role="content">Hello world!</div>
     <div data-role="footer">Footer</div>
<script type="text/javascript">
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>



Sorry for my bad english.

Application

answered on 02 Mar 2012

7 answers

872 views

Extending the Grid control

I must say that KendoUI looks really good. It seems very solid. The features already existing is great, but my concern is about the features I need but which is not part of Kendo UI. For example I need the Grid control to show PrevPage and NextPage buttons instead of clickable page numbers like the KendoGrid does. How easy is it to extend/customize the controls? Is the kendo team willing to help with questions like that?

I have tried a little and managed to add the mentioned features to the KendoGrid control like this:

jQuery.fn.kendoCustomGrid = function (c) {

if (c.pageable === false) {

this.kendoGrid(c);

return;

}

c.pageable = false;

this.kendoGrid(c);

this.append(

"<div class='k-grid-pager'><button id='prevPage' class='k-button'>Prev</button><button id='nextPage' class='k-button'>Next</button></div>"

);

$('#prevPage').on("click", function (event) {

c.dataSource.page(c.dataSource.page() - 1);

});

$('#nextPage').on("click", function (event) {

c.dataSource.page(c.dataSource.page() + 1);

});

this.on("keydown", function (event) {

if (event.keyCode === 34) { //PgDn

c.dataSource.page(c.dataSource.page() + 1);

}

if (event.keyCode === 33) { //PgUp

c.dataSource.page(c.dataSource.page() - 1);

}

});

};

I can then use $(selector).kendoCustomGrid() instead of $(selector).kendoGrid()

Is this a good way to extend kendo controls? Or is there a better/preferred way?

Grid

answered on 02 Mar 2012

0 answers

104 views

Editable column , but not in Insert

We can make a column editable, or not editable. But is there a way to make a column not appear when inserting a new row?

A good example is the Active column. Often it is not desirable to have a user create a new row, and present them with the "Active?" check box.

Grid

asked on 01 Mar 2012

0 answers

95 views

Is it possible?

The scenario I'm trying to achieve is to have a hierarchy grid. The first grid will be an array of objectA and the nested grid will be an array of objectB. I will fetch the first array of objectA via ajax and use that array as the datasource.

That all seems simple enough, the tricky part is that I want to fetch objectB the same way as objectA but only if/when the user expands one of the objectA items. A and B have a one to many relationship, like a folder to a file. I want to use the ID of A to pull all the B's associated with A when the user expands the grid.

It's not realistic to simply grab every single B and figure it out later. There could be millions of records for both A and B. I'm only going to be displaying 250 A's per page but need every single B related to A to show up when A is expanded.

Hopefully that made sense... In short, I need to know if I can dynamically fetch and insert a datasource when the user expands an item.

Thanks

Grid

asked on 01 Mar 2012

1 answer

116 views

use Grid in Window

I have added a Grid to a kendo Window. However, the filter items appears behind the window.

Can you help?

Grid

answered on 01 Mar 2012

1 answer

173 views

Panel Bar With Remote Data

Hello...

It's possible to bind a PanelBar with remote data as webservice or restservice?. the rest service return a parent-child estructure..

Thks.

PanelBar

answered on 01 Mar 2012

2 answers

157 views

Title with start and end data values

I have a line chart (hourly data) that is generated by user selected criteria. Because the user can select a large time range and IE8 gives a slow script error when too much data is queried, I've configured the web service to only return a maximum of one-week worth of hourly data at a time. I have next and previous buttons to allow the user to page through the data and update the graph accordingly. Currently, categoryAxis doesn't support step, resulting in overlapping labels, so I have visible set to false and it is difficult to tell the time range of the chart. I have the date and value set to show as a tool tip, but would like to show the start date/time and end date/time as a subtitle, so the user can quickly see what week they are viewing as they page back and forth.

Is it possble to show the first and last categoryAxis data value in the Title, so I have something like this for the chart title that will update when the dataSource is read:

Main Title of Chart
Start Date - End Date

Charts

answered on 01 Mar 2012

0 answers

132 views

Data source with web service

Hi,
I have a problem in the chart with data source and web service. The chart isn´t creating. Can anybody help me?
Thanks.

Obs: I use the Framework 3.5.

The code:
$("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "Metro",
    dataSource: {
        transport: {
        type: "odata",
        read: {
            url: "JSON.asmx/GetDashboard", //I tried to put "http://localhost:17844/WEB3/JSON.asmx/GetDashboard" too, but don´t created the chart
            dataType: "json"
        }
}
    },
    title: {
        text: "Rentabilidade",
        font: "<B>"
    },
    legend: {
        visible: false
    },
    chartArea: {
        background: "#e6e6e6",
        margin: 0
    },
    seriesDefaults: {
        type: "bar",
        labels: {
            visible: true,
            position: "center",
            format: "{0:P2}"
        },
        color: "#3B894E"
    },
    series:
                [{
                    field: "VlValor",
                    name: "Rentabilidade (%)"
}],
    categoryAxis: {
        field: "DsFuncionario",
        labels: {
            rotation: 0,
            padding: { right: 60 }
        }
    },
    valueAxis: {
        labels: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        format: "{0:P2}",
        font: "<B>"
    }
});

And the web service return a string: [{"DsFuncionario":"DIRECAO","VlValor":10135.33},{"DsFuncionario":"EDIR","VlValor":3201.59},{"DsFuncionario":"EMERSON ","VlValor":-76703.79},{"DsFuncionario":"FABIO","VlValor":3868.37},{"DsFuncionario":"SANDRO","VlValor":974631.58}]

Charts

asked on 01 Mar 2012

3 answers

1.0K+ views

sorting numbers (dollar amt and percentage) not working

case study is as below:
######################################################################################################
<table id="grid" >
<thead>
<tr>
<th style="width:90px;" data-field="fc_saledate">SaleDate</th>
<th style="width:100px;" data-field="fc_price">Price</th>
<th style="width:80px;" data-field="fc_perval">%ofVal</th>
</tr>
</thead><tbody></tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr id="list_${fc_pid}">
<td style="width:90px;" >${ fc_saledate }</td>
<td style="width:100px; text-align:right" >${ fc_price }</td>
<td style="width:80px; text-align:right" >${ fc_perval }</td>
</tr>
</script>

$("#grid").kendoGrid({
rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [
{
field: "fc_saledate",
title: "SaleDate",
template: '#= kendo.toString(SaleDate,"dd MMMM yyyy") #'
},
{
field: "fc_price",
title: "Price",
format: "integer"
},
{
field: "fc_perval",
title: "%ofVal"
}
],
dataSource: {data: app_list.get_list_content()},
height: 350,
scrollable: true,
sortable: true,
pageable: false,
dataBound: function(e){ app_filter.hide_ids_on_sort(app_filter.hidden_ids_for_kendo_sort);}
});

######################################################################################################
The result table looks like this

SaleDate Price %ofVal
Feb - 20    $50,000   25%
Feb - 23    $90,000 5%
Feb - 24    $60,000   2.5%
Feb - 25    $10,000   50%
Feb - 28    $1,100,000   50%

On sorting these columns specially 'Price' and '%ofVal' they don't sort good. looks like it is sorting as string and sort only by first digit not by number as whole.

Where do i specify the sorting type like integer/string/date/decimal etc to force it sort according to this formates? Also please give the list of all sorting format type.

Thanks!

Grid

answered on 01 Mar 2012