Telerik Forums
Kendo UI for jQuery Forum
3 answers
138 views
Hi,

Upon loading my view, the window I have initiated cannot be seen. Upon using the browser developer tools I can see that the window does exist (class="k-widget k-window").

The code for this view is as follows:

<div data-role="view" data-after-show="aftershow">
    <div data-role="header">
            <div data-role="navbar">
                //nav stuff in here
            </div>
    </div>
     
    <p>Hi</p>
    <div id="window">
        Content of the Window
    </div>
    <script>
        $("#window").kendoWindow();
    </script>
</div>
The screenshot below shows what I see using the browser developer tool:
http://sdrv.ms/17vSVdW

It is worth noting that this view is access remotely, using a drawer. The page loads fine and other kendo ui stuff loads normally.

Any help would be appreciated.

Kiril Nikolov
Telerik team
 answered on 16 Sep 2013
3 answers
417 views
I have a Linear Gauge looking like this:
function createGauges(conveyanceId) {
        $("#depthBar-" + conveyanceId).kendoLinearGauge({
            pointer: {
                value: 0,
                shape: "arrow",
                color: "transparent",
                start: 0,
                reverse: true
            },
            scale: {
                majorUnit: 500,
                minorUnit: 100,
                labels: {
                    visible: false
                },
                min: -2000,
                max: 2000,
                vertical: false,
                reverse: false,
                ranges: [
                    {
                        from: -2000, // LimitLo
                        to: -1500,
                        color: "#ffc700"
                    },
                    {
                        from: 2000, // LimitHi
                        to: 1500,
                        color: "#ffc700"
                    }, {
                        from: 2000, // LimitHiHi
                        to: 1800,
                        color: "#c20000"
                    }, {
                        from: -5000,
                        to: -1800,
                        color: "#c20000" // LimitLoLo
                    }, {
                        from: 0,
                        to: 0,
                        color: "lightblue"
                    }
                ]
            }
        });
Is it possible to update the ranges dynamically with a custom input number?
I'm trying to get the gauge like this: (I'm able to locate the gauge with no problems, it's just the ranges I cannot seem to locate correctly :))
$('#depthBar-' + conveyanceId).data("kendoLinearGauge").options.scale.ranges[4].to = depthMessage;
Any help / suggestions would be greatly appreciated :)
Hristo Germanov
Telerik team
 answered on 16 Sep 2013
1 answer
113 views
Hi Everybody, I have a problem with the tooltips in RadarLine charts: when two points fall on the same vertical axis, it only displays the tooltip of upper one, even if I'm over to bottom one. I'm using Kendo 2013.2.716.

This is an example of what I mean:

---------------------------

<div id="RadarChart"></div>

$("#RadarChart").kendoChart({

"chartArea":{"background":"Transparent"},

"title":{
"text":"TITLE",
"position":"top",
"align":"left"},
"legend":{
"visible":false},
"series":[{
"name":"Value",
"type":"radarLine",
"field":"Value"}],
"categoryAxis":[{
"field":"Category"}],
"valueAxis":[{
"labels":{
"template":"#= kendo.format(\u0027{0:P}\u0027, value / 100) #"},
"majorGridLines":{
"color":"#a4a4a4"},
"majorUnit":10}],
"dataSource":{
"schema":{
"model":{
"fields":{
"Value":{"type":"number"},
"Category":{"type":"string"},
"LongCategory":{"type":"string"},
"Color":{"type":"string"},
"Exploded":{"type":"boolean"},
"InLegend":{"type":"boolean"}}}},
"data":[
{"Value":25,"Category":"Top","LongCategory":"Top Top Top Top Top","Color":null,"Exploded":false,"InLegend":false},
{"Value":25,"Category":"Right","LongCategory":"Right Right Right Right Right","Color":null,"Exploded":false,"InLegend":false},
{"Value":25,"Category":"Bottom","LongCategory":"Bottom Bottom Bottom Bottom Bottom","Color":null,"Exploded":false,"InLegend":false},
{"Value":25,"Category":"Left","LongCategory":"Left Left Left Left Left","Color":null,"Exploded":false,"InLegend":false}]},
"tooltip":{
"template":"#= dataItem.LongCategory # - #= kendo.format(\u0027{0:P}\u0027, value  / 100) #",
"visible":true}
});
T. Tsonev
Telerik team
 answered on 16 Sep 2013
5 answers
431 views

Hi, I have Kendo with Visual Studio 2012, MVC 3 and IE 8. The upload functionality is not working as expected. See the attached image. The upload control is used in a partial view which is showed as a pop up, and when I select a file to upload, this file is uploaded twice. Could you give me a clue to correct this behavior ?
Thanks !!

@(Html.Kendo().Upload()
          .Name("files")
          .Multiple(true)                                
          .Events(e => e
               .Select("onUploadFileSelect")
               .Upload("onUpload")
               .Remove("onRemove")
               )                   
          .Messages(config => config.Select(Html.RawLocalized(GlobalMessageKeys.Browse).ToString()))
          .Async(a => a
                        .Save("SaveData", "ManageBuilding")
                        .Remove("RemoveData", "ManageBuilding")
                    )
                     
                )

T. Tsonev
Telerik team
 answered on 16 Sep 2013
1 answer
95 views
Hi,

I am using a kendo Mobile listview with endless scrolling turned on.
My datasource schema model looks like this (Notice the "from" converting the server side "Title" to client side "title"):

1.fields:
2.            {
3.                title: { type: "string", from: "Title" },
my sort field is defined like this:
sort: [{ field: "title", dir: "desc"}],

I use odata and perform some parameter mapping like so:

parameterMap: function (parameters, type) {
                        var params = kendo.data.transports["odata"].parameterMap(parameters, type);
                        if (type == "read") {
                            params.format = "json";
                            params.$expand = allOptions.expand.join(',');
                            params.$select = allOptions.select.join(',');
                            params.page = parameters.page;
                            params.skip = parameters.skip;
                            params.take = parameters.take;
                            params.pageSize = parameters.pageSize;
                        }
                        return params;
                    }
During the  first request, the order field name is "Title" as it should be, however, loading the subsequent pages (endless scrolling), the order parameter is passed in as "title" and fails the request.

Is this a bug or misconfiguration?

Thanks, Vincent
Nikolay Rusev
Telerik team
 answered on 16 Sep 2013
3 answers
500 views
I am trying to implement the "excel like" filters in kendo filters, what i m doing right now is really old fashion way (pushing HTML tags to kendo filter and hiding the default filters):


newFilter.push('<input id="searchbox" Type="text">');
newFilter.push('<div id="checkboxes"></div>'); // add more checkboxes in the div tags later.

filter = $('form.k-filter-menu').children(),
submit = filter.children().last(),
submit.before(newFilter.join(''));

I was wondering if there is a better way of doing this?

Also,  By doing this, i need to have my own filter object, and pass it into dataSource, then combine my filter object with kendo default filters:

 this.transport = {
             read: $.proxy(function (options) {this.getPageData(options, myFilters)}, this)
};

getPageData: function(options, myFilters) {
           data.filter = data.filter ? this.filter 1: null;
           data.filter.concat(myFilters);
           //  DataBase calls on data.filters
           ...
},

however, i found getPageData is only called when kendo filter object is not empty, in another words, since I had my own filters, thus the getPageData() will never get called since the original kendo object is never changed, so i have to fake some data into kendo.grid.dataSource.filter.filters() in order to let the event fired. Is there another way to fire the event without faking any data.
Alexander Valchev
Telerik team
 answered on 16 Sep 2013
1 answer
222 views
I have a Kendo Scheduler posting to a C# Web API when a new schedule event is created.  The problem is with parameter binding - the web API method does not receive the posted data properly.

When I look at the server request in Fiddler, the content type is json, but the request body is URL encoded. How to get the Scheduler to encode the event as JSON?


POST http://localhost:58623/api/booking HTTP/1.1
Host: localhost:58623
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json; charset=utf-8
Referer: http://localhost:58623/Booking
Content-Length: 2141

models=%5B%7B%22Id%22%3A0%2C%22Title%22%3A%22No+title%22%2C%22Start%22%3A%222013-06-11T08%3A00%3A00.000Z etc...

Here is my js file:

        $("#scheduler").kendoScheduler({
            date: new Date("2013-06-13"),
            startTime: new Date("2013-06-13T07:00"),
            endTime: new Date("2013-06-13T23:59"),
            height: 800,
            views: [
                "day",
                { type: "week", selected: true },
                "month",
                "agenda"
            ],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "/api/booking",
                        dataType: "json"
                    },
                    update: {
                        url: "/api/booking",
                        type: "PUT",
                        dataType: "json"
                    },
                    destroy: {
                        url: function (rec) {
                            return "/api/booking/" + rec.Id;
                        },
                        type: "DELETE"
                    },
                    create: {
                        url: "/api/booking",
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8'
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return kendo.stringify(options.models);
                        }
                    }
                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { from: "Id", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceId" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            clubId: { from: "ClubId", nullable: false, defaultValue: 0 },
                            fieldId: { from: "FieldId", nullable: false, defaultValue: 0 },
                            lightIds: { from: "LightIds", nullable: false, defaultValue: 0 },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            },
            resources: [
            {
                field: "fieldId",
                dataSource: [
                    { text: "Main Oval", value: 1, color: "#6eb3fa" },
                    { text: "Practice Oval", value: 2, color: "#f58a8a" }
                ],
                title: "Club"
            },
            {
                field: "lightIds",
                dataSource: [
                    { text: "Match Lights", value: 1, color: "#f8a398" },
                    { text: "Auxilliary Lighting", value: 2, color: "#51a0ed" },
                    { text: "Practice Lights", value: 3, color: "#56ca85" }
                ],
                multiple: true,
                title: "Lights"
            }
            ]
        });


Atanas Korchev
Telerik team
 answered on 16 Sep 2013
1 answer
106 views
I have a custom bound ajax grid with server operation (for paging, sorting, filtering etc). On the server side it would sometimes be more efficient to fetch all the data rather than just one page. If I return more than a page worth of data the grid just shows it all (as you would expect!), so what I want to do is switch to client side paging if more than a page worth of data is returned... is this possible?

I've tried setting the option on the grid during the DataSource.RequestEnd event, but this doesn't seem to have any real effect (I've tried also calling grid.Refresh, grid.SetDataSource).
Nikolay Rusev
Telerik team
 answered on 16 Sep 2013
4 answers
178 views
Dear Telerik,

I use grid in my project and would like to provide multi-select options in user-editing. But I got some strange issue using multi-select.
In my project I use multi-select like this. 
$("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    resizable: true,
                    sortable: true,
                    filterable: true,
                    toolbar: ["create"],
                    save: function (e) {
                        e.model.dirty = true;
                    },
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInit,
                    columns: [
                        //{ field: "id", title: "id Name" },
                        { field: "Server_Name", title: "Server Name", width: "150px" },
                        { field: "Server_IP_Address", title: "Server IP Address", width: "120px" },
                        { field: "Data_Center_City", title: "City", width: "56px" },
                        { field: "Data_Center_Location", title: "Data Center Location", width: "156px" },
                        { field: "Server_Type", title: "Server Type", width: "100px" },
                        { field: "Server_Instance", title: "Server Instance", width: "120px" },
                        { field: "Environment", title: "Environment", width: "100px", editor: appDropDownEditor },
                        { command: ["edit", "destroy"], title: " ", width: "170px" }],
                    editable: "inline"
                });
            }
 
function appDropDownEditor(container, options) {
            $('<input required data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoMultiSelect({
                    dataTextField: "text",
                    dataValueField: "text",
                    dataSource: [ { text: "PRD" }, { text: "QA" }, { text: "DEV" } ]
                });
        }
I wonder where I got wrong and it appeared with a strange <input> and a <span> unexpected. Just like the image.

I'd like to ask you that how can I use multi-select to get user input in dropdown list? I checked the demos but only found demo for <select> tag or for MVC usage.
I'm looking forward for your reply.
hongbo
Top achievements
Rank 1
 answered on 16 Sep 2013
4 answers
338 views
Hello,

I'm trying to integrate Bootstrap menu through Kendo UI template.

I'm getting JSON values from MVC controller and rendering it's values to the template but I'm getting ReferenceError:  MenuText is not defined.

I tried using #: data.MenuText # / #: MenuText # but I still get same result, when I dot this #: data # it returns [object, Object]


Please advise
D

MVC controller
public ActionResult GetMenu()
     {
         _menu = GenerateMenuValues();
 
         return Json(_menu, JsonRequestBehavior.AllowGet);
 
     }
 
     private List<MenuValues> GenerateMenuValues()
     {
         return new List<MenuValues>()
         {
             new MenuValues(){Active = "active", MenuText = "Home", Url = "\\#"},
             new MenuValues(){MenuText = "Web widget", Url="\\#", SubMenu = new List<MenuValues>()
             {
                 new MenuValues(){MenuText = "Grid widget", Url = Url.Action("GridWidget","Home")},
                 new MenuValues(){MenuText = "Auto complete", Url = Url.Action("AutoCompleteWidget","Home")},
                 new MenuValues(){MenuText = "Combo box", Url = Url.Action("ComboBoxWidget","Home")},
                 new MenuValues(){MenuText = "Dropdown List", Url = Url.Action("DropdownListWidget","Home")},
                 new MenuValues(){MenuText = "Numeric text", Url = Url.Action("NumericTextbox","Home")},
                 new MenuValues(){MenuText = "Window", Url = Url.Action("WindowWidget","Home")},
                 new MenuValues(){MenuText = "Tree view", Url = Url.Action("TreeViewWidget","Home")},
                 new MenuValues(){MenuText = "Tab strip", Url = Url.Action("TabStrip","Home")}
             }},
             new MenuValues(){MenuText = "Data Source", Url = Url.Action("DataSource","Home")},
             new MenuValues(){MenuText = "MVVM", Url = Url.Action("Mvvm","Home")}
 
 
         };
     }
HTML markup / template
<script type="text/x-kendo-template" id="menuTemplate">
        <div class="col-md-12">
            <nav class="navbar navbar-static-top" role="navigation">
                 
            <div class="navbar-header">
                <a class="navbar-brand" href="\#">Learning Kendo</a>
            </div>
                     
                <ul class="nav navbar-nav">
                 
              <li> #= MenuText # </li> // just to test that values are rendering
      
    </ul>
        </nav>
        </div>
</script>
<script type="text/javascript">
 
    $(document).ready(function () {
        var dataService = '/DataServices/';
        var menuData = $.getJSON(dataService + 'GetMenu');
        var menuTemplate = kendo.template($('#menuTemplate').html())(menuData);
        $('#templateMenu').html(menuTemplate);
 
    });
 
 
</script>

Mark
Top achievements
Rank 1
 answered on 14 Sep 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Drag and Drop
Application
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?