Questions on Kendo UI for jQuery Forum

7 answers

1.3K+ views

[Solved] ListView not working properly after refreshing bound dataSource.

I have an example of this here: http://jsfiddle.net/RodEsp/hjbSz/
Using jsfiddle echo to simulate a remote datasource.

Basically, if the dataSource is initialized with data from the beginning (un-comment the //url: "/echo/json/", line) then everything works perfectly and the listview's <li> elements get initialized properly.

But, if you keep the dataSource empty from at the beginning and then change it by pressing the Refresh button on the navbar, the listview is populated and shows up correctly, but the listview's <li> elements do not get initialized the way they should. They have no data-uid property.

Is this a bug, or am I doing something wrong?

(In my real application this happens when the JSON retrieved for my datasource is an empty array and then is refreshed and recieves a non-empty array)

ListView (Mobile)

answered on 25 Aug 2012

0 answers

149 views

Problem with drag and drop in treeview

Hi,

I am using two kendoui treeviews

when i am using drag and drop selected item from left-treeview to right-treeview and right-treeview to left-treeview, the dropped item is showing like undefined,

As shown in uploaded tag please once check it,

here i am displaying the parent/child items dynamically.

In treeview script i have written code in this way:-

var treeview1 = $('#treeview-left').kendoTreeView({

select: onSelect,

checkboxTemplate: kendo.template($(

"#treeview-checkbox-template").html()),

dragAndDrop: true,

dataSource: parent,

expanded: true,

dataTextField: ["parentName", "childName"]
});

So can you please provide me solution where i have done wrong.

Thanks in Advance.

TreeView

asked on 25 Aug 2012

0 answers

41 views

New to this product

Just wanted to know about your products

General Discussions

asked on 25 Aug 2012

3 answers

284 views

[Solved] Saving the MVVM model

Can someone tell me whats the best way to send a rather complex MVVM object up through an $.ajax call to be saved?

...this?

data: "{'data':'" +JSON.stringify(_mydata) +"'}",

MVVM

answered on 25 Aug 2012

5 answers

377 views

[Solved] Populating a grid via jsonp

Hi I am making a cross domain call to get some json data and using that to populate a grid control. In order to do that, fist, i am creatinga datasource like so:

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: 'http://' + hostAddress + '/Customer.svc/getcustomersbyname?axid=999&name=',

dataType: "jsonp"

}

},

pageSize: 5

});

Then I populate the data grid:

$("#customergrid").kendoGrid({

dataSource: dataSource,

scrollable: true,

sortable: true,

pageable: true,

selectable: "row",

columns: [

{

field: "Name",

title: "Name"

},

{

field: "Id",

title: "Id"

},

{

field: "AxId",

title: "AxId"

}

]

});

When I run it, I do see the data coming back but i get a crash in kendo.grid.min.js with the error: Microsoft JScript runtime error: DOM
Exception: NOT_FOUND_ERR (8)

Do I need to define a schema or something?

btw, where it crashes is at:

b.table[0].replaceChild(h,b.tbody[0])

line 11, col 22102 in kendo.grid.min.js

thanks,
Jas

Grid

answered on 24 Aug 2012

0 answers

159 views

How can I remove a child node of subnode ?

$("#treeview").kendoTreeView({

template: kendo.template($("#treeview-template").html()),

checkboxTemplate: kendo.template($("#treeview-checkbox-template").html()),

dataSource: [{

id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [

{

id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [

{ id: 3, text: "about.html", spriteCssClass: "html" },

{ id: 4, text: "index.html", spriteCssClass: "html" },

{ id: 5, text: "logo.png", spriteCssClass: "image" }

]

},

{

id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [

{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },

{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },

]

},

{

id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [

{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },

{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },

{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }

]

}

]

}]

});



 I use Treeview findbyUid find a child node of subnode and remove it , but nothing happened

TreeView

asked on 24 Aug 2012

0 answers

124 views

Grid DataRow double click event

Hello,

Does kendo support the double click event? I don't find it in the doc.

Thx,
David

Grid

asked on 24 Aug 2012

1 answer

183 views

Display Grid's Editor DropdownList Default Selection In Cell View

Find below a very simplified example derived from an application I'm currently developing. In the real application the data source comes from an AJAX RESTFUL service call, but I have no issues with that part of the code.

The editor function on the ApplicationLogLevel works correctly from a pure editing point of view. When I click on the cell the kendoDropDownList default selection is bound to the cell current value and if I change the current value the cell is updated with the appropriate new value and marked as changed.

What I want to do though, is instead of having the cell's actual numeric value displayed I want the cell to display the default selection from the kendoDropDownList when initially loading the cells contents into the grid. If the value is changed then the default selection of the kendoDropDown should be re-bound to the newly selected value and then displayed with the new selection shown within the cell.

What would be the best way to accomplish this task?

<body>
<div id="grid"></div>
    <script type="text/javascript">

        var simpleAvailableLevels = [{text: "Level -1 = Undefined", value: "-1"},
                                                      {text: "Level 0 = No Logging", value: "0"},
                                                      {text: "Level 1 = Critical", value: "1"},
                                                      {text: "Level 2 = Error", value: "2"},
                                                      {text: "Level 4 = Warning", value: "4"},
                                                      {text: "Level 8 = Informational", value: "8"},
                                                      {text: "Level 16 = Verbose", value: "16"}];

        var simpleDS = [{ "ApplicationLogLevel": -1, "ApplicationName": "AjaxServer.java", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-01T10:24:33", "IsActive": false, "IsSecure": false, "MachineName": "Host 1", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 8, "ApplicationName": "AjaxServer.java", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-01T10:24:33", "IsActive": true, "IsSecure": false, "MachineName": "Host 2", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 8, "ApplicationName": "AjaxServer.java", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-09T15:07:20", "IsActive": true, "IsSecure": false, "MachineName": "Host 3", "ModifiedBy": null },
                                       { "ApplicationLogLevel": 16, "ApplicationName": "AjaxServer.java", "ConfiguredLogLevel": -1, "CreatedDate": "2012-08-03T11:04:05", "IsActive": true, "IsSecure": false, "MachineName": "Host 4", "ModifiedBy": null}];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: simpleDS,
                columns: [{
                    width: 150,
                    field: "ApplicationName",
                    title: "Application Name"
                }, {
                    width: 150,
                    field: "MachineName",
                    title: "Host Name"
                }, {
                    width: 100,
                    field: "IsActive",
                    title: "Active"
                }, {
                    width: 125,
                    field: "ApplicationLogLevel",
                    title: "Current Log Level",
                    editor: function (container, options) {
                        $('<input name="' + options.field + '"/>')
                      .appendTo(container)
                      .kendoDropDownList({
                          value: options.field,
                          dataTextField: "text",
                          dataValueField: "value",
                          dataSource: simpleAvailableLevels
                      });
                    },
                    editable: "inline"
                }, {
                    width: 100,
                    field: "ModifiedBy",
                    title: "Modified By",
                    nullable: true
                }],
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                pageable: {
                    pageSizes: [10, 25, 50]
                },
                editable: { update: true },
                toolbar: [{ name: "save", text: "Save These Record" },
                              { name: "cancel", text: "Cancel"}]
            });
        });
    </script>
</body>

Grid

answered on 24 Aug 2012

0 answers

46 views

Submit Model doesn't send attributes that have functions

I have a viewModel model that has the following type characteristics:

Broker: "",

BondProceeds: function(){

return this.get("UnderlyingPar") * (this.get("UnderlyingPrice")/100) + this.get("UpfrontFees");

},

When I submit using Create on a datasource Broker will get sent but not BondProceeds. I suspect because there is a function. How do you work around this?

Data Source

asked on 24 Aug 2012

2 answers

399 views

Pager Configuration

I have a pretty simple grid

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

dataSource: {

pageSize: 10,

type: "json",

transport: {

read: {

url: queryurl,

dataType: "json"

}

},

schema: {

data: "data",

total: "total"

}

},

detailInit: detailInit,

selectable: true,

sortable: true,

filterable: true,

columnMenu: true,

columns: [ {

field: "PackageID",

width: 90,

title: "Package ID"

} , {

width: 50,

field: "Installations",

title: "Installations"

} , {

field: "InstalledPackage",

width: 100,

title: "Installed Package"

} , {

width: 100,

field: "ApplicationName",

title: "Application Name"

} , {

width: 100,

field: "Windows7Certified",

title: "Win7 Certified"

} , {

width: 120,

field: "RecommendedVersion",

title: "Recommended Version"

}

],

pageable: {

numeric: true,

previousNext: true,

refresh: true,

pageSizes: [ 10 , 25, 50 ]

},

});

}

}).data("kendoComboBox");

works well however I am confused about the pager bar

even the most basic grid in the demos show more information than mine.
all I see are the page numbers themselves and the ellipse to indicate more than 10 pages

I have tried setting the messages: but that doesn't work either

How can I get the prevnext page x of x totals rows etc... to show? like...

pageable: {

numeric: true,

refresh: true,

pageSizes: [ 10 , 25, 50 ],

previousNext: true,

input: true,

info:true

},

Grid

answered on 24 Aug 2012