Questions on Kendo UI for jQuery Forum

5 answers

369 views

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

157 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

120 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

177 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

45 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

393 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

1 answer

224 views

Custom width of individual bars and columns

I'm trying to use a stacked bar chart and need to change the width of the bars to match other elements on the page, I have it pretty close just by changing the size of the chart but if I make it any smaller, the labels wont display correctly. Is there anyway to set bar/column widths? Thanks!

Edit: Added a photo of what I'm talking about, changing the height of the chart got the bars to the width they are at now, which worked out because it made the labels match the spacing of the rest of the page. If I go any smaller on the height of the chart then the labels start stacking on top of each other. Is there any way to make the bars that thin?

Charts

answered on 24 Aug 2012

1 answer

111 views

Editor in Tabstrip does not work in ie9

Hi

adding an Editor to a tabstrip does not work in ie9, but works in chrome 21.0.1180.79 m and in firefox 14.0.1.

In ie9 the text area of the Editor does not have the correct height.

Attached a sample html document.

Is there any work around for this issue?

Thanks

Frank

TabStrip

answered on 24 Aug 2012

2 answers

766 views

How save a uploaded image in a specified folder

Hi,

I written the following line to upload images.

<div style="width: 45%">
        <input name="files" id="files" type="file" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#files").closest(".k-upload").find("span").css("width", "300px");
            $("#files").kendoUpload({
                localization: {
                    "select": "Upload New Image",
                    "cancel": "Cancel",
                    "retry": "Retry",
                    "remove": "Remove",
                    "uploadSelectedFiles": "Upload files",
                    "dropFilesHere": "drop files here to upload",
                    "statusUploading": "uploading",
                    "statusUploaded": "uploaded",
                    "statusFailed": "failed"
                },
                async: {
                    saveUrl: "here what?",
                    removeUrl: "remove",
                    autoUpload: true
                }
            });
       });

    </script>

I have two questions

1. can you explain about saveUrl? How to save a selected image in specified local drive folder?
2. How to show a selected image in img tag?

i couldn't find any example from download kit kendoui.complete.2012.1.515.trial
can any one please help about this kendo upload

Thanks for you assistance

Upload

answered on 24 Aug 2012

1 answer

125 views

Exporting

Hi Kendo Support,

We are already Telerik customers and satisfied with the support.

We are trying out Kendo UI and really excited about the Grids performance.

However there is one feature that I cannot find in Kendo Grids which is the Exporting feature. We really need this feature or any alternative solution.
I have checked some samples in the Code Library that will not work for my case because they are written for MVC project and not for ASP .NET AJAX project.

Please let me know how can I export the filtered data to PDF format in a Kendo Grid using ASP .NET AJAX.

Your help is highly appreciated.

Thanks,
Bilal Ghalayini

Grid

answered on 24 Aug 2012