Questions on Kendo UI for jQuery Forum

4 answers

973 views

At least that is what I am assuming. I have a datasource bound to a grid. It is a delayed binding, so the url is set later, but I do get the expected data. When I select the filter item for price I get the following on the console:

d.Price.toLowerCase is not a function
predicate = filter = new F...", "return " + compiled.expression); kendo.all.js (line 4144)

Thanks for your help.
Randy

Data Source:

var myQuotes = new kendo.data.DataSource({
    transport: {
        read: ""
    },
    schema: {
        data: "d",
        schema: {
            model: {
                fields: {
                    Carrier: { type: "number" },
                    ErroMsg: { type: "string" },
                    Key: { type: "string" },
                    Price: { type: "number" },
                    Service: { type: "number" },
                    Sig: { type: "number" },
                    WeightLbs: { type: "number" },
                    WeightOz: { type: "number" }
                }
            }
        }
    }
});

Grid:

    myQuotes.transport.options.read.data = "d";
    myQuotes.transport.options.read.url = 'ws/srvQuickQuote.svc/Quote';
    myQuotes.fetch(function () {
        $("#grid").kendoGrid({
            dataSource: myQuotes,
            height: 600,
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: true,
            columns: [
                {
                    field: "Carrier",
                    type: "number",
                    title: "Carrier"
                },{
                    field: "Service",
                    type: "number",
                    title: "Service"
                },{
                    field: "Sig",
                    type: "number",
                    title: "Signature"
                },{
                    field: "Price",
                    type: "number",
                    title: "Price"
                },{
                    field: "ErrorMsg",
                    type: "string",
                    title: "ErrorMsg"
                }
            ]
        }
 
        );
    });

Grid

answered on 29 Dec 2011

4 answers

269 views

Fail to set Kendo UI Widget selection/value in document.ready

If I use below way to set Grid selection:
$(document).ready(function () {
}

$(document).ready(function () {

$("#grid").kendoGrid(...);

var grid = $("#grid").data("kendoGrid");

//alert(1);

var selection = grid.tbody.find(">tr").eq(1);

grid.select(selection);

}

row selection will not succeed, if uncomment "alert()", row selection is working.
So I only can use below way to implement row selection in document.ready without "alert":

$(document).ready(function () {

var grid = $("#grid").kendoGrid(...

dataBound: function() {

var selection = grid.tbody.find(">tr").eq(1);

grid.select(selection);

}

).data("kendoGrid");;

}

But for DropDownList, it is not so lucky.
DropDownList hasn't dataBound event, if I need to set its value during loading as below:

$(document).ready(function () {

$("#DDL").kendoDropDownList(...);

//alert(1)

DDL.value(1);

}

It fails.
Could you figure out a way to implement setting DDL's value in loading?

btw: all these UI Widget are in Kendo Tab.

General Discussions

answered on 29 Dec 2011

1 answer

129 views

Translating Data Source

I have a webservice that returns a list of objects. Most of the fields are enums, or rather integers when they show in the grid. Is there a way to process that field and display it as a more human readable format? I figure I will have to maintain a integer to string conversion function that matches the enums of the webservice, but how can I get that function to be called?

The only way I can see it working now is to create a new object and copy the rows over one by one translating as I go. I am hoping for something easier.

Thanks
Randy

Grid

answered on 29 Dec 2011

0 answers

167 views

Problem on kendogrid datasource and wcf service

Hi,

I had quite some trouble to get the grid to bind to json data returned by a WCF service hosted on IIS 7. The following works for me:

                $.ajax({
                    dataType: 'json',
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: '{}',
                    url: 'api/dsl',
                    success: function (data) {
                        $("#grid").kendoGrid({
                            dataSource: {
                                data: data,
                                pageSize: 10
                            },
                            height: 750,
                            groupable: true,
                            scrollable: true,
                            sortable: true,
                            filterable: true,
                            pageable: true,
                            autobind: true
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("error: " + textStatus + ": " + jqXHR.responseText);
                    }
                                });

It seems i need to specify contenttype and data in order to have jquery play nice with IIS 7 (this post helped me: http://encosia.com/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/). It all started to work for me then when I set those properties on the ajax call.

Now I would like to use the datasource property in the kendogrid rather than using the ajax success callback. Is there any way to achieve this?

Kind regards,

Roel Hans

Grid

asked on 29 Dec 2011

4 answers

204 views

Using AutoComplete With RadEditor AJAX

Hi,

What reference do I use in this line of code to reference the content area of RadEditor?

Thanks,

Donald

$("#autoCompleteInput").kendoAutoComplete({

AutoComplete

answered on 29 Dec 2011

3 answers

321 views

return json data?

hi all:
i want use other jsp page return json object as follows ["Item1", "Item2", "Item3"];
,so i Should how to change the code?

$("#autocomplete").kendoAutoComplete({
   minLength: 3,
   dataTextField: "Name", //JSON property name to use
   dataSource: new kendo.data.DataSource({
       type: "odata", //Specifies data protocol
       pageSize: 10, //Limits result set
       transport: {
           read: "http://odata.netflix.com/Catalog/Titles"
       }
   })
});

i want use json data,not odata,pls help me ,thanks.

AutoComplete

answered on 29 Dec 2011

1 answer

201 views

Close window after "save"

Is it possible to have a cancel button that closes the window?

Window

answered on 29 Dec 2011

4 answers

249 views

call json service group data and bind to graph

I am having some troubles binding my chart. I am trying to create a datasource that is bound to my mvc3 controller

Basically I am trying to dynamically bind the series. As I dont know what the values are going to be.

The controller is called and the json is returned however nothing is shown in the graph.
What am I doing wrong? I am not getting any javascript errors.

<script>

$(document).ready(function () {

setTimeout(function () {

createChart();

}, 400);

$(document).bind("kendo:skinChange", function (e) {

createChart();

});

function createChart() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/MyService/GetGraph",

dataType: "json"

// additional parameters sent to the remote service

// data: {

// q: "html5"

// }

},

group: {

field: "TransactionTypeName",

dir: "asc"

}

});

dataSource.read();

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: { data: dataSource },

title: {

text: "Transaction Details"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "column"

},

series:

[{

field: "TransactionAmount",

name: "Transaction Name"

}],

categoryAxis: {

field: "MonthString",

labels: {

rotation: -90

}

},

valueAxis: {

labels: {

format: "{0:N0}"

}

},

tooltip: {

visible: true,

format: "{0:N0}"

}

});

}

</script>

Charts

answered on 29 Dec 2011

0 answers

108 views

Selecting a row + accessing attributes

I'm creating a table and have applied HTML5 Data tags to each table element like this:

<tr data-sku="SOME DATA HERE">

To determine what was clicked, I have a function that handles the change events of my grid:

function onGridClick(arg) {

var selected = $.map(this.select(), function (item) {

return $(item).text();

});

// do something

}

Doing something like this doesn't work?

$(item).attr('data-sku')

When debugging my JS script in Visual Studio, viewing all the properties for 'item', there is no mention of the data tag mentioned? Are they being removed by Kendo?

Grid

asked on 29 Dec 2011

2 answers

76 views

Grid ships with a visual flaw

If you take a look at http://demos.kendoui.com/web/grid/toolbar-template.html, you can see the bottom of the grid where the paging controls live that the line on the bottom is absent.

This only happens when using the toolbar in a grid.

Does anyone know how to fix this?

Grid

answered on 28 Dec 2011