Questions on Kendo UI for jQuery Forum

2 answers

187 views

Hi all,

any idea why this wouldnt work (all include and link paths checked)
I'm a newby and so lost! i'm getting the data (one record) into the array in the function createRandomData.
But i cant generate the gridview after that.
Can anyone see where i'm going wrong?

V

<!doctype html>
<html>
    <head>
        <title>Admin: Users</title>
        <link href="styles/kendo.black.min.css" rel="stylesheet"/>
        <link href="styles/kendo.default.min.css" rel="stylesheet"/>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.core.js"></script>

        <script src="js/kendo.validator.js"></script>
        <script src="js/kendo.model.js"></script>
        <script src="js/kendo.data.js"></script>
        <script src="js/kendo.pager.js"></script>
        <script src="js/kendo.sortable.js"></script>
        <script src="js/kendo.draganddrop.js"></script>

        <script src="js/kendo.groupable.js"></script>
        <script src="js/kendo.grid.js"></script>
        <script src="js/kendo.binder.js"></script>
        <script src="js/kendo.editable.js"></script>
        <script src="js/kendo.popup.js"></script>
        <script src="js/kendo.calendar.js"></script>

        <script src="js/kendo.datepicker.js"></script>
        <script src="js/kendo.numerictextbox.js"></script>
		<script>
function createRandomData(count) {
		var data = [];
		data = {"account_recs":[{"FirstName":"Graham","SecondName":"Fourie"}],"totals":1};
		return data;
}
</script>
    </head>
    <body>
        <a href="../index.html">Back</a>
        <div class="description">Basic usage</div>

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(1)
						}
                        navigatable: true,
                        pageable: true,
                        height: 400,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "SecondName",
                            { field: "FirstName", width: "100px" },
                            { command: "destroy", title: "&nbsp;", width: "110px" }],
                        editable: true
                    });
                });
            </script>
        </div>
    </body>
</html>

Data Source

answered on 02 Mar 2012

1 answer

400 views

Debug datasource read url

Is there a method or property that returns what url the read method will query ?

Suppose I have
  transport: {
   read: {
    url: window.dataEmitterURL + "/GetStoresTable",
    dataType: "xml",
    data: {
     mainid: getParameter('mainid') ,
     idset: function() { return window.selectedIdset; }
    },
    cache: false
   }
  },

Data Source

answered on 02 Mar 2012

2 answers

75 views

Charts hosted in .aspx pages not working in IE

Hi,

I have been working on migrating my Silverlight application to HTML5 using Kendo UI. It is working very good.
But have a problem with the charts when hosted in aspx pages. The page throws javascript error when viewed in Internet Explorer.
Where as the same thing works in Firefox or Chrome. Please can anybody help ??
I need to get this working in IE as well.

Thanks,
Nikhil

Charts

answered on 02 Mar 2012

0 answers

141 views

Using image in Grid column

Hi ,
How can I use and image in grid column ?
Is there any way to set custom css class in grid column ?
Thanks.

Grid

asked on 02 Mar 2012

3 answers

167 views

Doesnt Refresh

Hi,

Im using this expander panel and the problem is if i have a dynamic fields and if i want to collapse the panel and then expand it back it will always stay to that height and never change so now if i want to pick something else from the Dropdown and if it has more fields depending on my selection it will be hidden or overlapping.

Thanks

PanelBar

answered on 02 Mar 2012

3 answers

673 views

Assign class to column

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

142 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

917 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

117 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

121 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