Telerik Forums
Kendo UI for jQuery Forum
7 answers
805 views
Two questions:

  1. Legend tooltips: Is it possible to get a tooltip to appear when mousing over an item in the legend? Basically the same tooltip functionality you provide when mousing over pie slices or bars but for a legend?
  2. Legend template: Is the "template:" feature supported in the legend section? I am trying to format the text displayed in the legend with a function:
    dataSource: {
            transport: {
                read: {
                    url: JsonPath,
                    dataType: "json"
                }
            }
        },
        legend: {
            position: LegendPosition,
            visible: LegendVisible,
            template: "#= FormatLongText(value, 1) #",
            font: '8px Arial'
        },


My FormatLongText() function is NOT called in the "legend" section. Is template not supported in the legend section?

Thanks
Ron DeFreitas
Top achievements
Rank 2
 answered on 06 Nov 2012
0 answers
74 views
I'm trying to get my Grid to stay a static size no matter how many elements are visible on the page. Currently my first page of the grid looks lile this:
http://imgur.com/RAWx6

And my last page of the grid looks like this:
http://imgur.com/zL9na

I'm using the following code:
var gridDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "mysite",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            data: function () {
                return {
                    param: value
                };
            }
        },
        parameterMap: function (options) {
            return JSON.stringify(options);
        }
    },
    schema: {
        model: {
            id: "id",
            fields: {
                name: { type: "string" },
                domain: { type: "string" },
                lastSeen: { type: "date" },
                os: { type: "string" }
            } // End of fields
        }, // End of model
        data: "Entries",
        total: "TotalCount"
    },
    sort: {
        field: "name",
        dir: "asc"
    },
    pageSize: 14,
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true
});
 
var devicesDataGrid = $("#devicesGrid").kendoGrid({
    selectable: "row",
    dataSource: gridDataSource,
    autoBind: false,
    columnMenu: true,
    filterable: true,
    scrollable: false,
    sortable: true,
    resizable: true,
    height: 500,
    columns: [ { title: "Name", field: "name", template: "<a href='/GridVision/EditOrganizationDevice?organizationDeviceId=#= organizationDeviceId #'>#= name #</a>" },
                { title: "Domain", field: "domain" },
                { title: "Operating System", field: "os", template: '<div class="ellipsisCell" title="#= os #">#= os #</div>' },
                { title: 'Last Seen', field: 'lastSeen', template: "#= kendo.toString(lastSeen, 'MMMM dd yyyy, h:mm tt') #" }
                ],
    pageable: { input: true, numeric: false, info: true },
}).data("kendoGrid");
 
gridDataSource.read();

Any suggestions on how I can make the grid stay the same height no matter how many elements there are?
Kyle
Top achievements
Rank 1
 asked on 06 Nov 2012
0 answers
134 views
Attempting to use the Kendo DataSource object to call a WebAPI controller in another project. This is a cross-domain call. I am able to get this to work when using $.ajax directly but it get a "access is denied" error when using the DataSource. Here's the setup:

jQuery.support.cors = true;
 
function sendRequestKendo(url) {
    ds = new kendo.data.DataSource({
        transport: {
            read: {
                url: url,
                type: "GET"
            }
        },
        change: onDataChanged,
        error: function(response) {
            alert(response.errorThrown);
            $("#loginError").show();
        }
    });
    ds.read();
}
 
function onDataChanged() {
    $("#results").html(kendo.stringify(ds.view()));
}

I have the following in the web.config of the API project to allow cross-domain calls:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://mydomain.com" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

The error handler is called and the response.errorThrown is "Access is denied". I can get around this by changing the security setting in IE Internet Options / Security / Internet Zone / Custom Level / Miscellaneous / Allow data sources across domains. However, this will NOT be allowed in production. It works okay in Chrome and Firefox but not IE9.  Again, if I do a straight ajax call it works:

$.ajaxSetup({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
});
$.ajax({
    url: url,
    success: function() {
    },
    error: function(response, status, err) {
        $("#loginError").show();
        $("#errorMessage").html(err);
    }
});

Any ideas?

Dave
Top achievements
Rank 1
 asked on 06 Nov 2012
1 answer
52 views
I have an object with some properties that will appear in the grid, but one of the properties is a list that will generate other columns. Its doing this?

Thanks
Caio
Top achievements
Rank 1
 answered on 06 Nov 2012
0 answers
145 views
I just set up a Grid with a date column. When I change the culture to eg. danish "da-DK" the value of the date is changed.

Eg. 2012-11-05 is change from "Mon Nov 05 2012 00:00:00 GMT+0100 (Central Europe Standard Time)" to "Tue Dec 20 2011 00:00:00 GMT+0100 (Central Europe Standard Time)"

This is clearly a bug. The date from the data source is in ISO 8601 format (2012-11-05T00:00:00), and even in danish this means 5th November 2012 ;-)

This will reproduce the error:

<div id="grid"></div>
<script src="/kendoui/kendo.web.min.js"> </script>
<script src="/kendoui/cultures/kendo.culture.da-DK.min.js"> </script>

<script>
    $(document).ready(function() {
        kendo.culture("da-DK");

        $("#grid").kendoGrid({
            dataSource: {
                data: [{ "Date": "2012-11-05T00:00:00" }],
                schema: {
                    model: { fields: { Date: { type: "date" } } }
                },
            },
            columns: [{ field: "Date", width: 200 }
            ]
        });
    });
</script>
Thomas
Top achievements
Rank 1
 asked on 06 Nov 2012
3 answers
938 views
Hello,

I am new to kendo and MVC3,
could you please know how to bind the drop-down list based on the radio button value selected.

Thanks in advance.

Regards,
Ravi
Ravi
Top achievements
Rank 1
 answered on 06 Nov 2012
2 answers
210 views
  1. I need help with Kendo Upload. This is my problem:
  2. I have a partial view which displays a ListView of Company object. In the Edit EditorTemplate, I have a Kendo Upload control that enables the user to upload company logo. This works fine
  3. However, I need to grab the Id of the company being edited so that I can save the logo image by replacing the File Name with the Id of the company. This is what I have not being able to do.
  4. I tried using the .Events attribute, however, once I add that attribute to the upload control, the upload button turns into a regular HTML button, thus it only selects the picture, but is not able to upload it asynchronously. I have read of other solutions such as putting the upload within a form element, however since this upload is performed in ListView edit mode, I don’t see that as a good option.
  5. All I need is to be able to grab the company Id from the company Id editor field. I want to do this in the Save method of the upload control. Something like how it’s done in standard MVC controller, like: string companyName = Request.Form["CompanyName"]; How can I achieve this? 
Thank you.
Daniel
Telerik team
 answered on 06 Nov 2012
2 answers
191 views
The docs for the kendoGrid destroy() function are very brief:

destroy

Prepares the Grid for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.

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

// detach events
grid.destroy();

Is there any other code required to get his working? Setting it up in exactly the same way I always receive the error:

TypeError: rGrid.destroy is not a function

I have confirmed rGrid is available by adding a hideColumn() call to it before trying destroy, which works correctly.

Any help appreciated.
Atanas Korchev
Telerik team
 answered on 06 Nov 2012
1 answer
254 views
I have a Kendo Upload, that works fine, when placed on the page.
But when I place it in the Kendo Window, it select files, but the submit does not work.

Here is the sample code:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta HTTP-EQUIV="CACHE-CONTROL" content="NO-CACHE" /><link rel="shortcut icon" href="#" /><link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Scripts/kendo.web.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var window = $("#window");
        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                width: "350px",
                title: "File Upload"
            });
        }
        $("#fileUpload").kendoUpload();
        $("#fileUpload1").kendoUpload();
    });
    </script>
</head>
<body>
    <form method="post" action="TestPage.aspx" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU2NzAwMTA3NQ9kFgICAw8WAh4HZW5jdHlwZQUTbXVsdGlwYXJ0L2Zvcm0tZGF0YWRkRF2FJe9qQk/psOU7/27cqENC3FQa7GHlIdCqprbX5OE=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAVduTrSFUP8gzeDnFOHumnJceeJO6RlDfckB6avcjnXt/vSeQRRtBIN1u+3s4mXdj6SqBPM9UD7WcfqYssU0cb3zfg78Z8BXhXifTCAVkevd7EjaSByG/FbMlhkMZSAG2utYhE7cAx1EvHHj4GryZaV" />
</div>
    <div id="window" style="display:none">
    <div class="popup_body">
        <ol>
            <li>
                <div>
                    <span id="lblSelectFile">Select file</span><br />
                    <input type="file" name="fileUpload" id="fileUpload" />
               </div>
            </li>
        </ol>
    </div>
    <div class="popup_footer">
        <input type="submit" name="btnPopupOK" value="Submit" id="btnPopupOK" class="button_popup" />  //this is not working
        <input type="submit" name="btnPopupCancel" value="Cancel" onclick="$(&#39;#window&#39;).data(&#39;kendoWindow&#39;).close(); return false;" id="btnPopupCancel" class="button_popup" />
    </div>
</div>
    <div>
        <input type="submit" name="btnWindow" value="Open Window" onclick="$(&#39;#window&#39;).data(&#39;kendoWindow&#39;).open(); return false;" id="btnWindow" /> <br />


        <input type="file" name="fileUpload1" id="fileUpload1" />
        <input type="submit" name="Button1" value="Submit" id="Button1" class="button_popup" />//this working fine



    </div>
    </form>
</body>
</html>

Elena
Top achievements
Rank 1
 answered on 06 Nov 2012
4 answers
1.1K+ views
i want to make event when some button is clicked, data on combo box is reloaded
this my script, but it's doesn't  work
<div id="example" class="k-content">
            Select a title from Netflix:
            <input id="titles"/>
            <button id="a" />
 
            <script>
                $(document).ready(function() {
                    var aa = $("#titles").kendoComboBox({
                        index: 0,
                        placeholder: "Select City",
                        dataTextField: "name",
                        dataValueField: "id_city",
                        filter: "contains",
                        dataSource: {
                            serverFiltering: true,
                            serverPaging: true,
                            pageSize: 20,
                            transport: {
                                read: "http://localhost/kucarisoft/city"
                            }
                        }
                    });
                    $("#a").click(function (e) {
                        aa.refresh();
                    });
                });
            </script>
        </div>

if i click button a, data on combo box nothing reload

Thank You
Georgi Krustev
Telerik team
 answered on 06 Nov 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?