Telerik Forums
Kendo UI for jQuery Forum
3 answers
247 views
Hello,

is it possible to initialize a context menu before its target is existing in the DOM? I want to have the context menu on a grid which is initialized sometime later. Here is a simple example which will show you what I tried to do:
$("#context-menu").kendoContextMenu({
        target: "#target"
  });
   
$('body').append('<div id="target">Target</div>');

I know that it would work if I append the div before I initialize the context menu but I would like to define it for every element with the same ID no matter when it will appear in the DOM. Is there any possibility to do this?

Thank you
Dimo
Telerik team
 answered on 29 Sep 2014
3 answers
268 views
Judging from this demo:

http://demos.telerik.com/kendo-ui/multiselect/angular

it seems I would not be able to bind to an array of objects of this type:

   { id: 100,  title: 'foo', expiryDate: [a date or null goes here]}


and apply some conditional formatting to the dropdown list (e.g. <del>strikethrough</del>)  based on finding a value in expiryDate.

Is that correct? There can be no conditional formatting with the multiselect based on a property other than display value or bound value?
Alexander Popov
Telerik team
 answered on 29 Sep 2014
1 answer
303 views
My grid is configured to be selectable: multiple and mobile: false.

When viewing my grid on a mobile device that has touch input, and I scroll the grid by touch & drag in the cells, I am seeing multiple cells selected.  How can I configure the grid to allow scrolling with the touch events and not select multiple rows at the same time.  Also, I expected the grid to slowly decelerate after I lifted my finger, but that was not the case - it just stopped scrolling as soon as I lifted my finger.

Thanks,
--Ed
Kiril Nikolov
Telerik team
 answered on 29 Sep 2014
8 answers
144 views
Hello,

Attached screenshot of scheduler on WindowsPhone 8.1 IE browser.
First problem which is for all phone (iPhone,Android and WP) is Arbeitswoche is overlapping woche in view, my culture is de-DE.
Other problem which is specific to WP 8.1 is in day,week,month all views the left and right arrow do not show. It is there if i tap on left it does take me to previous day week etc or next day week but just the arrow imaes are missing.

Any idea what is problem

Thanks

Anamika
Kiril Nikolov
Telerik team
 answered on 29 Sep 2014
3 answers
265 views
I am trying to use the Kendo UI map with Bing tiles and also apply a layer of geojson (the countries sample provided). However, when I do this the polygons are not aligned on the map. How can I fix this? 
function createMap() {
    $("#map").kendoMap({
        center: [30.2681, -97.7448],
        zoom: 3,
        layers: [
            {
                type: "bing",
                key: "mybingkey"
            },
            {
                type: "shape",
                dataSource: {
                    type: "geojson",
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "../geojson/countries-users.geo.js",
                            jsonpCallback: "loadCountries"
                        }
                    }
                },
                style: {
                    fill: {
                        opacity: 0.7
                    }
                }
            }
        ],
        shapeCreated: onShapeCreated,
        shapeMouseEnter: onShapeMouseEnter,
        shapeMouseLeave: onShapeMouseLeave
    });
}
T. Tsonev
Telerik team
 answered on 29 Sep 2014
1 answer
602 views
In a asp.net mvc project I often need to fill in dropdown lists with countries to select from.
I usually setup a datasource and bind it to the dropdown list widget.
Sometimes I need to insert a "Any country" value at the top of the list.

var countryDs = new kendo.data.DataSource({
    transport: {
        read: {
            type: "POST",
            url: '@Url.Action("GetCustomerCountries", "System")',
            data: function () {
                return {
                    customerId: parseInt("@Model.CustomerId", 10)
                }
            },
            dataType: "json",
            contentType: 'application/json; charset=utf-8'
        },
        parameterMap: function (data, type) {
            return kendo.stringify(data);
        }
    },
    schema: {
        model: {
            fields: {
                CustomerId: { type: "number" },
                CountryId: { type: "number" },
                CountryName: { type: "string" },
                CountryAbbrev: { type: "string" }
            }
        }
    }
});

$("#grid-filter-country").kendoDropDownList({
    dataTextField: "CountryName",
    dataValueField: "CountryId",
    dataSource: countryDs,
    value: GetCountry()
});

This works fine, however when I try to insert the "any country" item (right after the data source definition) I get an error:

countryDs.insert(0, { "CustomerId": 1, "CountryId": 0, "CountryName": "Any country", "CountryAbbrev": "Any" });
countryDs.sync();

The error: "TypeError: r is undefined".

Can anyone point out what I am missing (I'm open for better/other solutions).
Nikolay Rusev
Telerik team
 answered on 29 Sep 2014
1 answer
647 views
Since the full Kendo package is so large, we are only using a small portion of it on a new website that must remain lean. We are using Bootstrap 3 and Kendo 2014.2.716.

I downloaded the full Kendo ZIP file, so I could look through the CSS files and only use the ones we needed to get basic Kendo styling and the Kendo Bootstrap theme.

But when looking through the CSS files, there are multiple ones that appear necessary (see below). Which of these are actually necessary for a bare minimum approach to CSS for Kendo and Bootstrap 3? And what is the difference between the "core" and the non-core files (e.g. between kendo.common-bootstrap.core.min.css and kendo.common.bootstrap.min.css)?

  • kendo.bootstrap.min.css
  • kendo.common.core.min.css
  • kendo.common.min.css
  • kendo.common-bootstrap.core.min.css
  • kendo.common-bootstrap.min.css
  • kendo.default.min.css
Dimo
Telerik team
 answered on 29 Sep 2014
3 answers
114 views
Is there a possibility to pass a position for fresh records? I currently add empty records to the top of the grid, but when I save them they end up in the last position. Is there a way that they stay at the top so I can just drop in more from the top?
Kiril Nikolov
Telerik team
 answered on 29 Sep 2014
1 answer
134 views
I would like to use the schedule creation group of controls for another purpose - for scheduling a report.  I would like to be able to use the controls (from the basic usage demo) that appear in the event window, in addition to some additional controls I will add myself (e.g. email to/cc/bcc/subject/priority/body when report generated, etc).

Is it possible to use this set of controls with all their validation and get an object representing the info?

from the basic usage demo I'm interested in the following controls on the event window popup:
- title
- start, end dates
- repeat dropdown (and associated child controls - the real "meat" of what I am after)

Thanks,
--Ed
Vladimir Iliev
Telerik team
 answered on 29 Sep 2014
4 answers
558 views
I have created a set of 3 multiselect cascading lists.  It works fine, until...
I need to set the initial values.  IE the user selects some stuff. Saves and then returns to edit.  At this point I cannot seem to prepopulate the lists.
I know im going to go "Duh!" and hit myself in the forhead when I figure this out, but looking for any help here.  I am using MVC 5

 @(Html.Kendo().MultiSelect()
                      .Name("Trades")
                      .DataTextField("TradeName")
                      .DataValueField("Id")
                      .Placeholder("Select Trades ...")
                      .AutoBind(true)
                      .DataSource(source => source.Read(read => read.Action("GetTrades", "Skills"))
                          .ServerFiltering(true))
                      .Events(evt => evt.Change("onChangeTrades"))
                      )
 @(Html.Kendo().MultiSelect()
                          .Name("SubTrade")
                          .DataTextField("SubTradeName")
                          .DataValueField("Id")
                          .Placeholder("Select Subtrades ...")
                          .AutoBind(true)
                          .DataSource(source => source.Read(read => read.Action("GetSubTrades", "Skills")
                              .Data("subTradeFilters"))
                              .ServerFiltering(true))
                          .Events(evt => evt.Change("onChangeSubTrades"))
                      )
@(Html.Kendo().MultiSelect()
                                  .Name("Skills")
                                  .DataTextField("SkillName")
                                  .DataValueField("Id")
                                  .Placeholder("Select Skills ...")
                                  .AutoBind(false)
                                  .DataSource(source => source.Read(read => read.Action("GetSkills", "Skills")
                                      .Data("skillFilters"))
                                      .ServerFiltering(true))
                            )

and the script to go with this

    function subTradeFilters() {
        var values = $("#Trades").val().toString();
        return { text: values };
    }
    function skillFilters() {
        var trades = "";
        if ($("#Trades").val() != null) {
            trades = $("#Trades").val().toString();
        }
        var subTrades = "";
        if ($("#SubTrade").val() != null) {
            subTrades = $("#SubTrade").val().toString();
        }

        var values = JSON.stringify({ Trades: trades, SubTrades: subTrades });
        return { text: values };
    }
    function onChangeTrades() {
        filterSubTrades();
        filterSkills();
        return;
    }
    function onChangeSubTrades() {
        filterSkills();
        return;
    }
    function filterSubTrades() {
        var multiselect = $("#SubTrade").data("kendoMultiSelect");
        multiselect.dataSource.filter({});
        multiselect.dataSource.filter(subTradeFilters());
    }
    function filterSkills() {
        var multiselect = $("#Skills").data("kendoMultiSelect");
        multiselect.dataSource.filter({});
        multiselect.dataSource.filter(skillFilters());
    }

The above works GREAT until.... <Dum de dum dum music/>

I add this to the doc ready
        var tradeSel = $("#Trades").data("kendoMultiSelect");
        var subTradeSel = $("#SubTrade").data("kendoMultiSelect");
        var skillSel = $("#Skills").data("kendoMultiSelect");

        tradeSel.value(@Html.Raw(Json.Encode(Model.TradeIds)));        
        subTradeSel.value(@Html.Raw(Json.Encode(Model.SubTradeIds)));
        skillSel.value(@Html.Raw(Json.Encode(Model.SkillIds)));

Then what happens is the first box "trades" populates.
The 2nd box sits and spins and we end with the rest of the controls not rendering.properly.

it does work fine if I comment out the .Data property on the read action of the data source, but I loose the cascading effect.

What did I miss?














Bob
Top achievements
Rank 1
 answered on 27 Sep 2014
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
Application
Map
Drag and Drop
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
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?