Telerik Forums
Kendo UI for jQuery Forum
1 answer
140 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
301 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
444 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
710 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
102 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
165 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
482 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
272 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
2 answers
51 views
love the noteText on the stock chart
hate the circle

can i get rid of it

Jeffry
Top achievements
Rank 1
 answered on 03 Jan 2014
2 answers
41 views
hello 
here is the code im using to call a stock chart
which works
            $J($chartD).kendoStockChart({
                dataSource: wData,
                series: [{
                    type: "candlestick",
                    openField: "open",
                    closeField: "close",
                    highField: "high",
                    lowField: "low",
                    categoryField: "cat",
 
                    notes:{
                        line: {
                            width: 2,
                            length: 2
                        },
                        label: {
                            font: "10px arial"
                        }
                    },
 
                    tooltip:{
                        format: "{4}:<br /> {0:n0} -- {3:n0}"
                    }
                }],
                categoryAxis:{
                    categories: cats,
                    type: "category",
                    labels: {
                        font: "9px arial,sans-serif",
                        rotation: 45,
//                        step: 0,
                        skip: 0
                    }
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    }
                }
            });


as soon as i uncomment the categoryAxis.labels.step line
the chart just spins out and crashes my browser tab (chrome)

can you pls enlighten me on what im doing wrong?

thx so much




Jeffry
Top achievements
Rank 1
 answered on 03 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)
SPA
Filter
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
OrgChart
TextBox
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
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
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
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
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
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
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?