Questions on Kendo UI for jQuery Forum

1 answer

268 views

KendoUI DropdownList Change Selected Index

Hi,

     On Page load by default first Index is selected which in my case is not required. How to avoid this.
     I tired using

     $(document).ready(function() {
        $('#my_id').kendoDropDownList({
           index: -1
        )}
     but it didn't work. Any suggestion?

DropDownList

answered on 21 Mar 2012

0 answers

123 views

kendo mobile graph

can i apply kendo graph to my mobile application

NavBar

asked on 21 Mar 2012

2 answers

101 views

Dissappearing Page Numbers

I have a JSON remote data source that has 2379 rows (pageSize: 5). For a one second flash, I see page [1] as a button at the bottom of the grid, but then it dissapears, and my grid looks like pageable:false.

The JSON is long, but here is the beginning:

{"pageSize":2739,"results":[{"bbox":"SRID=4326;POLYGON((-70.684264 41.8879795,-70.6659898 41.8879795,-70.6659898 41.8741688,-70.684264 41.8741688,-70.684264 41.8879795))",

<!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>
    <title>Catalog Search</title>
    <script src="Kendo/jquery.min.js" type="text/javascript"></script>
    <script src="kendo/kendo.all.min.js" type="text/javascript"></script>
    <script src="Kendo/console.js" type="text/javascript"></script>
    <script src="SearchCatalog.js" type="text/javascript"></script>
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/SeachPageStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <select id="dropDownList">
            <option>Search</option>
        </select>
    </div>
    <p>
    </p>
    <div id="gridPane">
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            setup();
        });
    </script>
</body>
</html>

var catalogData;
var catalogGrid;
 
function buildModel() {
    catalogData = new kendo.data.DataSource({
        type: "json",
        pageSize: 5,
        transport: {
            read: {
                url: "http://ysg4206/CatalogService/CatalogService.svc/ViewBoston",
                dataType: "json"
            }
        },
        schema: {
            data: "results"
        },
        error: function (e) {
            alert("data error happened: " + e)
        }
    });
}
 
function layout() {
    $("#dropDownList").kendoDropDownList({
        open: function (e) {
            doSearch()
        }
    });
 
    $("#gridPane").kendoGrid({
        pageable: true,
        scrollable: true,
        height: 250,
        dataSource: catalogData,
        columns: [{
            field: "idx",
            title: "ID"
        }, {
            field: "classification",
            title: "classification"
        }, {
            field: "creator",
            title: "creator"
        }, {
            field: "date",
            title: "date"
        }, {
            field: "elevation",
            title: "elevation"
        }, {
            field: "datum",
            title: "datum"
        }, {
            field: "size",
            title: "size"
        }, {
            field: "type",
            title: "type"
        }, {
            field: "description",
            title: "description"
        }, {
            field: "dirLocation",
            title: "dirLocation"
        }, {
            field: "distributor",
            title: "distributor"
        }, {
            field: "egplDate",
            title: "egplDate"
        }, {
            field: "handling",
            title: "handling"
        }, {
            field: "product",
            title: "product"
        }, {
            field: "bbox",
            title: "bbox"
        }, {
            field: "uniqID",
            title: "uniqID"
        }
		]
    });
}
 
function setup() {
    buildModel();
    layout();
}

Grid

answered on 20 Mar 2012

1 answer

1.1K+ views

Line breaks in Grid Cell

Is there a way to show line breaks in Kendo Grid cells?

I've tried adding <br /> tags to the content but they are just displayed as text instead of showing up as line breaks.

Any help would be appreciated.

Grid

answered on 20 Mar 2012

3 answers

552 views

Submit button

I would like to Submit my page on click of a button. I am not able to figure out how I could do this, could you please help.

I had added the <form> tags and tried using the JS way of doing the submit:
function submitform() {
document.forms["myform"].submit();
}

But this is erroring out with the JS error

Uncaught Error: Syntax error, unrecognized expression: );
1. m.errorjquery-1.7.1.min.js:3
2. m.filterjquery-1.7.1.min.js:3
3. mjquery-1.7.1.min.js:3
4. c.querySelectorAll.mjquery-1.7.1.min.js:3
5. f.fn.extend.findjquery-1.7.1.min.js:3
6. c.Observable.extend._findViewkendo.all.min.js:9
7. c.Observable.extend.navigatekendo.all.min.js:9
8. c.Observable.extend._startHistory.e.changekendo.all.min.js:9
9. w.extend.triggerkendo.all.min.js:9
10. kendo.Observable.extend.navigatekendo.all.min.js:9
11. Jkendo.all.min.js:9
12. f.event.dispatchjquery-1.7.1.min.js:3
13. f.event.add.h.handle.i

I think I am doing something fundamentally wrong.

Application

answered on 20 Mar 2012

1 answer

97 views

[Solved] Stacking a Line Chart

I have been reviewing your demos here and believe I have found an error/typo: http://demos.kendoui.com/dataviz/api/index.html

Under Configuration > series > type="line" you have a "stacked" property that can be set. However, when I set this property to true my series do not stack. I noticed that under "View Code" that instead of a "stacked" property, a "stack" property is used. I changed my code to use "stack" instead of "stacked" and the series now stack as expected. Is this a typo under Configuration > series > type="line"?

Thanks,
Sara

Charts

answered on 20 Mar 2012

1 answer

330 views

override the styling ( textbox validation )

Hi

I'm trying to override this CSS for the Text box validation but it doesn't work and i dont know if im missing anything there.

.k-textbox .k-tooltip-validation

{

     margin-left: -20px !important;

thanks

Validation

answered on 20 Mar 2012

1 answer

71 views

"Skip" a cell, keeping the data in queue to render in next cell?

So here is my problem, I have a page design to work on that is, in theory a 3 x 3 grid like this...

X X X
X X X
X X X

Where each X is a thumbnail. So far, no problem! Except the grid REALLY looks like this....

* X X
X * *
X * X

Where the * is a empty space ( a blank placeholder graphic ). The pattern will never change. The question is how can I inject some smarts into the grid templating (native or combined with JQuery templating) that will "skip" an iteration but not gobble up the data intended for that space?

Ken

Grid

answered on 20 Mar 2012

1 answer

191 views

Multiple oData grids on one page

Hi,

I'm trying to put two (or more) Kendo Grids on my page; both grids use a separate oData request to load their data, i.e. with a data source of type:'odata'.

Having either of those grids on the page works fine, but having both of them in the same page does not work: the columns for both grids are shown, but neither grid has any data rows.

I noticed that both oData requests get the following querystring param + value: $callback=callback

I'm not entirely sure how the callback thing works, but shouldn't the values have been different? For example, $callback=grid1callback and $callback=grid2callback, respectively?

If this is indeed the problem, is there a way to override the $callback value?

Grid

answered on 20 Mar 2012

4 answers

548 views

Binding JSON data with Grid

Hi,
I am trying to bind JSON data with KENDO grid but can't figure out how to do it. following is the snippet of my code

height: 360, groupable: true, scrollable: true, sortable: true, pageable: true,

columns: [{field: "name",title: "Name"},{field: "number",title: "Number"},{field: "type",title: "Type"},
{field: "low",title: "Low"},{field: "high",title: "High"},{field: "status",title: "Status"}],

                        dataSource: {
                            transport: {
                                read: {
                                        // the remote service url
                                    url: "/DomainService/KendoDomainService.svc/json/GetSpt_values",
                                        // JSONP is required for cross-domain AJAX
                                    dataType: "jsonp"}}},

                                    schema: {
                                        // the data which the data source will be bound to is in the "results" field
                                        //data: "GetSpt_valuesResult"
                                    }});});

</script>

When i run above URL in my browser, i get data from json. So, i have data and i have the kendo grid. The data i am fetching from the MasterDB (SQL SERVER) SPT_VALUES table.

the data snippet is as follow:

{"GetSpt_valuesResult":{"TotalCount":2506,"RootResults":
[{"high":null,"low":null,"name":"rpc","number":1,"status":0,"type":"A "},
{"high":null,"low":null,"name":"pub","number":2,"status":0,"type":"A "},
{"high":null,"low":null,"name":"sub","number":4,"status":0,"type":"A "},
{"high":null,"low":null,"name":"dist","number":8,"status":0,"type":"A "}]}}

Could you please help my in binding data as i am really new to the jquery.

Kind Regards,
waseem

Grid

answered on 20 Mar 2012