Telerik Forums
Kendo UI for jQuery Forum
15 answers
2.6K+ views
Is there a way to display the template for the selected value in the DropDownList?

Providing sample code should not be necessary, as this sample shows what I'm referring to.  Using said sample, what if I wanted the movie poster to show in the selected value?

Thanks, 

Josh
Zachary
Top achievements
Rank 1
 answered on 06 Jan 2014
4 answers
118 views
I visited

http://demos.kendoui.com/web/upload/async.html

with IE10 and tried uploading a zero byte file. It works on Chrome, but in IE10, it just shows the progress animation indefinitely. Is this behavior (a) reproducible and/or (b) correct?
Dimiter Madjarov
Telerik team
 answered on 06 Jan 2014
1 answer
145 views
I have a multiselect that I am initializing.  All works fine except the following scenario...

1.) Select several values from the dropdown list and they are shown as selected values and removed from the list of available options (as expected)
2.) Remove a selected item or two by clicking on the little "x"

At this point the selected items that have been removed (by clicking the "x") should show up back in the list from the dropdown...  They do not and that is my question... How do I get the removed selected values to show back up in the list of available items from the dropdown?

                var asDatabaseCubeId = $("#ASDatabaseCubeId").val();
                var dimName = $(ui.draggable).children(".rb-item-label").attr("data-dimensionname");
                var hireName = $(ui.draggable).children(".rb-item-label").attr("data-hirearchyname");
                var memberCount = $(ui.draggable).children(".rb-item-label").attr("data-membercount");
                
                // defaults
                var serverFiltering = false;
                var autoBind = true;
                var minLength = 0;
                var placeholder = "Select filter parameters...";

                if (memberCount >= 1000) {
                    serverFiltering = true;
                    autoBind = false;
                    minLength = 3;
                    placeholder = "Enter at least 3 characters";
                }

                /* This initiates the actual Kendo Multiselect control */
                $('#' + id).kendoMultiSelect({
                    dataTextField: "DisplayName",
                    dataValueField: "MemberValue",
                    placeholder: placeholder,
                    tagTemplate: $("#multiSelectTagTemplate").html(),
                    dataSource: new kendo.data.DataSource({
                        serverFiltering: serverFiltering,
                        transport: {
                            read: {
                                url: window.rootUrl + "/Reports/DimensionMembers",
                                dataType: "json",
                                data: {
                                    ASDatabaseCubeId: asDatabaseCubeId,
                                    DimensionName: dimName,
                                    HirearchyName: hireName
                                }
                            },
                            parameterMap: convertParam
                        }
                    }),
                    filter: 'contains',
                    //autoBind: autoBind,
                    minLength: minLength
                });
Georgi Krustev
Telerik team
 answered on 06 Jan 2014
5 answers
306 views
Hi,

How can I get the starttime and endtime from the scheduler in the datebinding event?

Thanks,
Martin
Vladimir Iliev
Telerik team
 answered on 06 Jan 2014
5 answers
452 views
Hello,

I would like to know what is the best strategy to dynamically generate (and delete) widgets in my app project. Notifications and different state changes are received via Ajax from a Python enabled server. 

In a little sample (I'm just evaluating as for know) I tried this and seemed to work:

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
       //injecting a widget?
        tmp=' <a data-role="button" href="#drawer-starred" data-badge="12">Notifications</a>';
        $("#drawer-home").append(tmp);
        //kendo.init($("#drawer-home"));
    </script>

But I'm not very confident about it. I thought kendo.init would be required but apparently not so. 
Thanks very much for any help!

       Javier
Alexander Valchev
Telerik team
 answered on 06 Jan 2014
3 answers
723 views
Hi

I have a simple MVC page for adding an article with a text box for the title and a Kendo editor for the content both bound to a model.

If I have validation rules on the title text box such as required field then when I post the form to the server it correctly shows an error message, however the text I wrote in the kendo ui editor is changed to show the html markup.

How do I ensure that what is displayed in the Kendo UI editor is as I wrote it (i.e. without the html markup) when the MVC Controller returns the model to the page if Model.IsValid == false

Many thanks in advance

Daniel
Telerik team
 answered on 06 Jan 2014
1 answer
103 views
Hi Fellas,
I am struggling with the Kendo UI scheduler. After I switch to the tab, I cannot normally go back without it changing the style
<div data-role="view" data-init="initScheduler" id="scheduler" data-title="Scheduler">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" href="#home" data-icon="back" data-align="left" ></a>
            <span data-role="view-title">iOS Platform</span>
            <a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>
        </div>
    </header>
    <div id="scheduler"></div>
</div>
That's how I call the scheduler and the problem is demonstrated on this page http://chris1904.webege.com/ 
If you go to scheduler, you realize that if you go back the UI looks different. How can I prevent it from doing that?

Thanks for your help and this amazing framework,
Chris

Edit:
Sorry, I clearly posted this in the wrong section, but I cannot change it anymore. Please move it to the correct board

Kamen Bundev
Telerik team
 answered on 06 Jan 2014
1 answer
169 views
Hi,

I'm trying to run an application using WP8 layout, but it only shows a black screen with navigator bar bellow.
Texts and input fields are not visible (see screen attached).

IOS, IOS7 and Android runs like a charm, only WP doesn't.

I'm using these CSS and JS files:
<style type="text/css">
    @import url(css/kendo.common.min.css);
    @import url(css/kendo.default.min.css);
    @import url(css/kendo.mobile.all.min.css);
</style>
 
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
Running this code at the end of HTML:
<script>
  var app = new kendo.mobile.Application($(document.body), {platform:"wp"});
</script>
I'm using trial version of Kendo UI  (2013.3.1119.trial).

The same happens with examples that came in ZIP file (kendoui.complete.2013.3.1119.trial.zip).

Thanks for help.

Reggards,
André L. Santos
Kamen Bundev
Telerik team
 answered on 06 Jan 2014
3 answers
491 views
Hello,
Now an experience with AutoComplete control.
There is this control, which has minLength = 3, and keyup event hits server to get data that is searched for. Now if the desired lookup for data is say 39015 which gets records that has a column with this value (from DB), so what a strange thing I observe is, when i start typing each char i.e. 3..9..0.1..5 one by one - it hits the server each time - the problem is :
- If the typing is slow as in wait for each server call to get completed, it shows up the popup.
- If typing in is arbitary, like slow or fast or a mix, say 39 and then 015, it doesn't show up the popup.

Although, the data being fetched is correct for all the inputs. But issue comes up with showing up the popup.

I read it over in one the forum threads, to use SEARCH() method- so what i did is : call the search method in change event, checking if number of items returned are > 0.
It resolves the problem but but it arises another problem - I see in debugger that it calls the datasource read method until a selection from popup is made, which is a big bash to performance. Is there a way to control it or any other clean way to just open the popup once data is fetched.

ko.bindingHandlers.kendoAutoComplete.init = function (element, params) {
        ////debugger;
        var e = $(element);
var widget = e.data("kendoAutoComplete");

  widget.dataSource.bind("change", function (d) {
                //anytime the data source is updated, update the data pointer and the input
                if (d.items) {
                    data = new kendo.data.ObservableArray(d.items).toJSON();

                    //Sometimes the dropdown isn't rendered - force it to show up/ search from the populated datasource of the autocomplete
                    if (d.items.length > 0) {
                        widget.search(d.items[0].CompanyName);
                    }
                }
            });
Madzie
Top achievements
Rank 1
 answered on 04 Jan 2014
0 answers
275 views
Hello,

Using the mvc extensions I have a grid with details row. In the details row I have a listview with editor template like this:

Grid:

@(Html.Kendo().Grid<PromotionModel>()
      .Name("Promotions")
      .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
                    {
                        model.Id(promotion => promotion.PromotionID);
                        model.Field(promotion => promotion.PromotionID).Editable(false);
                        model.Field(promotion => promotion.Clicks).Editable(false);
                        model.Field(promotion => promotion.Impressions).Editable(false);
                        model.Field(promotion => promotion.WebsiteID).DefaultValue(1);
                    })
        .Read(read => read.Action("PromotionsRead", "Promotions", new { Area = "Administration" }))
        .Create(create => create.Action("PromotionsCreate", "Promotions", new { Area = "Administration" }))
        .Update(update => update.Action("PromotionsUpdate", "Promotions", new { Area = "Administration" }))
        .Destroy(destroy => destroy.Action("PromotionsDestroy", "Promotions", new { Area = "Administration" }))
        .Events(events => events.Error("OnError")) // Handle the "error" event
       )
      .ClientDetailTemplateId("details-template")
      .Columns(columns =>
      {
          columns.Bound(x => x.PromotionID);
          columns.Bound(x => x.Title);
          columns.Bound(x => x.PromotionType);
          columns.ForeignKey(x => x.WebsiteID, (System.Collections.IEnumerable)ViewData["Websites"], "WebsiteID", "Name");
          columns.Bound(x => x.ProductCode);
          columns.Bound(x => x.Clicks);
          columns.Bound(x => x.Impressions);
          columns.Bound(x => x.IsVisible);
          columns.Command(commands =>
          {
              commands.Edit();
              //commands.Destroy();
              commands.Custom("Delete").Click("confirmDelete");
          }).Title("Commands").Width(200);
      })
      .ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
      .Pageable()
      .Events(e => e.Edit("OnEdit"))
      .Sortable()
      .Groupable()
      .ColumnMenu()
      .Filterable()
)


Grid details template:

<script id="details-template" type="text/x-kendo-template">
    <div class="demo-section">
        @(Html.Kendo().ListView<PromotionTranslationModel>()
        .Name("ListView_#=PromotionID#")
        .ClientTemplateId("translationTemplate")
        .TagName("div")
        .DataSource(ds => ds
            .Model(m => m.Id("RecordID"))
            .PageSize(3)
            .Create(create => create.Action("PromotionTranslationsCreate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
            .Read(read => read.Action("PromotionTranslationsRead", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
            .Update(update => update.Action("PromotionTranslationsUpdate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
            .Destroy(destroy => destroy.Action("PromotionTranslationsDestroy", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))
        )
        .Pageable()
        .Editable(editable => editable.TemplateName("PromotionTranslationEditTemplate"))
        .ToClientTemplate()
        )
    </div>
</script>

ListView template:

<script type="text/x-kendo-tmpl" id="translationTemplate">
    <div class="product-view k-widget">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
        <dl>
            <dt>Text</dt>
            <dd>#:Text#</dd>
            <dt>Image URL</dt>
            <dd>#:ImageSource#</dd>
            <dt>Language</dt>
            <dd>#:LanguageID#</dd>
        </dl>
    </div>
</script>



ListView editor template:


@model BusinessObjects.Models.PromotionTranslationModel
@using Kendo.Mvc.UI;
<div class="translation-view">
    <dl>
        <dt>Text</dt>
        <dd>
            @(Html.EditorFor(p => p.Text))
            <span data-for="Text" class="k-invalid-msg"></span>
        </dd>
        <dt>Image URL</dt>
        <dd>
            @(Html.EditorFor(p => p.ImageSource))
            <span data-for="ImageSource" class="k-invalid-msg"></span>
        </dd>
        <dt>Language</dt>
        <dd>
            @*@(Html.EditorFor(p => p.LanguageID))*@
            @(Html.Kendo().DropDownList()
                      .Name("color")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(new List<SelectListItem>() {
                          new SelectListItem() {
                              Text = "Black",
                              Value = "1"
                          },
                          new SelectListItem() {
                              Text = "Orange",
                              Value = "2"
                          },
                          new SelectListItem() {
                              Text = "Grey",
                              Value = "3"
                          }
                      })
                      .Value("1")
            )
            <span data-for="LanguageID" class="k-invalid-msg"></span>
        </dd>
    </dl>
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href=""><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href=""><span class="k-icon k-cancel"></span>Cancel</a>
    </div>
</div>
In the ListView editor template when I try to add a kendo dropdown list I get a jquery error
"Uncaught SyntaxError: Unexpected token ILLEGAL "

However if I use the default editor "@(Html.EditorFor(p => p.LanguageID))" it does work fine. What can be the cause of that ?


Georgi
Top achievements
Rank 2
 asked on 04 Jan 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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
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
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
AICodingAssistant
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?