Telerik Forums
Kendo UI for jQuery Forum
6 answers
214 views

Hello 

I would like to "remove" a set widget and replace it by another widget, depending on what is chosen on a kendouidropdownlist (called "A" to reference it later on).

The input HTML element with ID = "eventobjectvalue" on which I want to set the widget will be appended before putting a widget on it: 

$('#eventmaskdiv0').append( 
...
  +"<div name='eventobjectvaluediv' id='eventobjectvaluediv' style='float:left;'>"
    +"<input id='eventobjectvalue' />"
  +"</div>"
+"</div>"
);

Before attaching a widet on it, it looks like a simple and unformatted input element.
Now I set a kendoNumericTextBox widget on the element "eventobjectvalue" by choosing "Set numericbox" from the dropdownlist "A". Fine, will be done...
In the next step I choose "Set dropdown" from dropdownlist "A" and what happens can be seen in attached files (doubled). That brought me to the idea I have to delete a Widget first before attaching another one...

After some research I found the KendoUI functions remove, empty and destroy: http://docs.telerik.com/KENDO-UI/intro/widget-basics/destroy

Playing around with it doesn't help (because I'm probably doing something wrong). 

$("#eventobjectvalue").empty(); -> same visual effect as in attached file doubled
$("#eventobjectvalue").data("kendoNumericTextBox").destroy(); -> same visual effect as in attached file doubled (even when making sure a numerictextbox is set on element eventobjectvalue)
kendo.destroy($("#eventobjectvalue")); -> same visual effect as in attached file doubled
$("#eventobjectvalue").remove(); -> The Widget is removed BUT the element eventobjectvalue as well (so unable to attach another Widget on it)

What am I doing wrong and which mentioned function do I have to use?  I would like to switch between the Widget kendoNumericTextBox and kendoDropDownList attached to the same HTML element (if possible). The switch should happen depending on what is chosen from apersistent dropdownlist "A" (onchange).

Regards 

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 15 Mar 2016
2 answers
645 views

Hello 

I had a hard time to find/focus the problem and can't find any solution. I have several cascading Kendoui dropdownlists in my project. I can't use the functionality "cascadeFrom" because I have to fill dropdownlist dynamically. But I assume the problem covers also the functionality "cascadeFrom" as mentioned here.

Here is a working example to reproduce the wrong behaviour. To see the problem you have to follow the steps after the code section:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
 
 
</head>
<body>
 
<input id='dropdownfirst'/>
<input id='dropdownsecond'/>
 
<script>
$("#dropdownfirst").kendoDropDownList({
    dataTextField: "showtext",
    dataValueField: "id",
    optionLabel:  {
        showtext: "Choose option...",
        id: "-1"},
    dataSource: {
        data: [{"id": "1", "showtext": "A"}, {"id": "2", "showtext": "B"}]
    },
    change: function(e) {
        // Empty datasource of dropdownsecond
        $("#dropdownsecond").data("kendoDropDownList").dataSource.data([]);
 
        // Refill datasource of dropdownsecond
        var newDataSource = [{"id": "1", "showtext": "3"}, {"id": "2", "showtext": "4"}];
        $("#dropdownsecond").data("kendoDropDownList").dataSource.data(newDataSource);
    }
});
 
$("#dropdownsecond").kendoDropDownList({
    dataTextField: "showtext",
    dataValueField: "id",
    optionLabel:  {
        showtext: "Choose option...",
        id: "-1"},
    dataSource: {
        data: [{"id": "1", "showtext": "1"}, {"id": "2", "showtext": "2"}]
    },
    change: function(e) {
        alert ("change event of dropdownsecond fired");
    }
});
 
</script>
</body>
</html>

After starting the code snippet you should see 2 dropdownlists. Now proceed the following steps to see when the change event of dropdownsecond will not fire:

  1. Choose "A" from first dropdownlist (dropdownfirst)
  2. Choose "4" from second dropdownlist (dropdownlistsecond)
    -> The change event of second dropdownlist fires and show message
  3. Choose "Choose option..." from first dropdownlist
    -> The second dropdownlist will be emptied and will be set back to "Choose option..."
  4. Now choose again "4" from second dropdownlist
    -> This time the change event of the second dropdownlist does not fire!

I assume that the second dropdownlist is internally still set to "4" after step 3 and therefore will not fire on step 4 because no change was detected. My project heavily depends on a proper working change event with up to four dropdownlists in a row. I guess this problem came up after Telerik has removed the optional value from DOM (see documention in blue box below "OptionLabel").I don't mind the optionLabel is no more put into DOM but the dropdownlist should, even in such a case, brought into a state where the change event still will fire.

What do you suggest me to do to solve this problem? Workaround?

Regards

What do you suggest me to do

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 15 Mar 2016
4 answers
815 views

Maybe this has been asked but I'm having trouble finding it.  I already have a filter and I don't need a comma delimited filter. I want to search multiple "Strings" under the same filter. If the filter is say "DOGS", then I want to search multiple "types" of dogs under that filter, comma d,e,l,i,m,i,t,e,d.

 

Filter: [dogs]

Search String: "pugs, dachsunds, chahuahua, beagle"

Row Return:

1.) pugs

 2.) dachsunds

3.) custom row (message:'no chahuahuas found')
4.) beagle


I can do the query on each value of the split(",") just fine but I need to return a row for each. So I need to search on one string, then search on another without clearing the previous row. This would produce the desired effect. 

Thanks for any help. Below is some more context:

CURRENT SEARCH FUNCTION:

           // Get Selected FilterType 

           function getSelectedFilters(){
                return angular.element('.selected-filter').find(".selected").attr("filter-value");
            }

            //Search based on dynamic filter - onkeyup
            angular.element('#SearchBox').keyup(function (e){
                let searchString = e.target.value;
                let filterType = getSelectedFilters();
                    angular.element('#Grid').data('kendoGrid').dataSource.query({
                        page:1, pageSize:20,
                        filter:{
                          logic:"or",
                          filters:[
                            {field:filterType, operator:"contains",value:searchString}
                          ]
                        }
                    });

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

where i need to be:

            ....each( stringArr, function( i, val ) {

                    angular.element('#Grid').data('kendoGrid').dataSource.query({
                        page:1, pageSize:20, filter:{
                          logic:"or",
                          filters:[
                            {field:filterType, operator:"contains",value:val[i]} ...

                            ... (return row on first [i], then an additional row on [i++], etc ) ...

 

Jared
Top achievements
Rank 2
 answered on 15 Mar 2016
5 answers
360 views

I'm trying to update our Angular version from 1.3.18 to 1.5. In general my application seems fine, but I'm getting an error;

Cannot read property 'off'

In Kendo.all.js it looks like it's around line 29527, in;

 destroy: function () {
                var that = this;
                Select.fn.destroy.call(that);
                that.wrapper.off(ns);
                that.element.off(ns);
                that._inputWrapper.off(ns);
                that._arrow.off();
                that._arrow = null;
                that.optionLabel.off();
            },

 

 

Richard
Top achievements
Rank 1
 answered on 15 Mar 2016
2 answers
888 views

I have a situation where I want to allow a grid to be "pre-filtered" based on an optional value passed into the query string.  I found an example, but it is only partially working.  The code that applies the filter is below.  It works in that the grid only shows the appropriate records.  However, it works different than a user applied filter.  The filter icon in the column header is not highlighted.  And when I click the filter icon, neither the filter operator or filter text appears in filter popup.  Is there a way to make it work like a user applied filter so the user can change or clear it?

 

 

var f = new Kendo.Mvc.FilterDescriptor("OfficeDesc", Kendo.Mvc.FilterOperator.IsEqualTo, pOfficeDesc);

request.Filters.Add(f);

 

Thanks,

 

Ray

Raymond
Top achievements
Rank 1
 answered on 15 Mar 2016
4 answers
371 views

I'm trying to get a very simple diagram, with a custom visual for items. I have followed the examples and came up with this snippet: http://dojo.telerik.com/EYaCe/8

The diagram shows nothing, and looking at the console I see an error "e.drawingContainer is not a function" at kendo.min.ui.js. 

Is this a bug, or am I doing something wrong? Replacing "Shape" with "Rectangle" or "Circle" works, but doesn't allow me to set a custom SVG path, obviously. 

 

I also attach the code here, for reference: 

 

<div id="diagram"></div>
  <script>
     
      $("#diagram").kendoDiagram({
        dataSource: [
          {id: 1, name: "Item 1"},
          {id: 2, name: "Item 2"}
        ],
        shapeDefaults: {
          visual: visualTemplate
        }
      });
     
      function visualTemplate(options) {
        return new kendo.dataviz.diagram.Shape({
          path: "M 70 0 L 140 30 L 70 60 L 0 30 z",
          width: 140,
          height: 60,
          fill: "red",
          stroke: {
            width: 1,
            color: "black"
          }
        });
      }
 
  </script>

Daniel
Telerik team
 answered on 15 Mar 2016
2 answers
128 views

Hi,

I'm using databinding on a line chart. I want to display multiple serie so i write this code : 

this.ChartBuilder = htmlHelper.Kendo().Chart<SerieValueViewModel>()
     .Name(Guid.NewGuid().ToString())
     .Title(this.Name)
     .DataSource(dataSource =>
      {
          dataSource.Read(read => read
              .Action(this.DataSourceViewModel.View,this.DataSourceViewModel.Action))
              .Group(group => group.Add(m => m.Symbol))
              .Sort(s => s.Add(m => m.Date).Ascending());
      })
      .Series(series =>
      {
          series.Line(v => v.Value, v => v.Date)
                .Name("#= group.value #")
                .Aggregate(this.CategoryAxisViewModel.Aggregation)
                .Stack(false)
                .Markers(m => m.Visible(true).Size(3));
       });
 }

Now, i want to display a color to my serie. But this color depend of my serie and i only have a list of value that i've grouped.

I tried to use a new object named SerieViewModel which contains List of SerieValueViewModel and a color and do something like this...

this.ChartBuilder = htmlHelper.Kendo().Chart<SerieViewModel>()
     .Name(Guid.NewGuid().ToString())
     .Title(this.Name)
     .DataSource(dataSource =>
      {
          dataSource.Read(read => read
              .Action(this.DataSourceViewModel.View,this.DataSourceViewModel.Action));
      })
      .Series(series =>
      {
         // I want to do something like this ...
         // Get my serieViewModel which is iterate
         var mySerie = iterateObject;
       
         foreach(var valueViewModel in mySerie.ValueViewModelCollection)
         {
            series.Line(valueViewModel  => valueViewModel.Value, valueViewModel  => valueViewModel.Date)
                .Name(mySerie.Name)
                .Aggregate(this.CategoryAxisViewModel.Aggregation)
                .Stack(false)
                .Markers(m => m.Visible(true).Size(3))
                .Color(mySerie.Color);
         }
       });
}

This is exactly what i need but i can't get my serieViewModel which is actually iterate, so i can't bind my values and use my color.

I want to use this reflection to put a "serieType" in my serieViewModel object too and construct charts with different series type like a chart with a line and an area.

There is a way to get my object which is iterate or get some of his properties ?

Thanks

Antoine
Top achievements
Rank 1
 answered on 15 Mar 2016
1 answer
617 views

I'm exporting HTML to PDF using the kendo.drawing.drawDOM function. It works well except it seems to require the DejaVu font, which I'm not using (I'm using my own fonts).

This leads to 404's in my production environment, where we do not have (or want) these fonts (css/fonts/DejaVu/DejaVuSerif.ttf). The export fails there.

Is there any way using the API to remove this dependency? I've been playing with the kendo.pdf.defineFont method, but I'm not sure if it can be uses to replace or remove Dejavu!

Mihai
Telerik team
 answered on 15 Mar 2016
3 answers
337 views
Hi there,

We are currently using Kendo controls with Bootstrap 3 vertical form layout. After following the integration guide, this is in general working very well.

However, we would like to take advantage of the bootstrap feedback and validation states and making them work with Kendo Validators. There is no mention of any integration regarding this in your documentation or from the demo page.

Is this possible? There doesn't seem to be many options for extending or changing validation behaviour from reading the Kendo Validator API documentation.

Thanks,

Paul
Dimo
Telerik team
 answered on 15 Mar 2016
1 answer
283 views

Hi, using an example from a different forum thread, I was able to use the async upload with a controller that saves the documents like so:

declaration:

$("#files").kendoUpload({
    async: {
        saveUrl: "api/document",
        removeUrl: "api/destroyDocument",
        autoUpload: true
    }

})

Upload (in vb):

    Public Async Function UploadDocument() As Task

        Dim root As String = HttpContext.Current.Server.MapPath("~/App_Data")
        Dim provider = New MultipartFormDataStreamProvider(root)

        Try

            Await Request.Content.ReadAsMultipartAsync(provider)
           
            For Each file As System.Net.Http.MultipartFileData In provider.FileData
                Dim fileInfo As FileInfo = New FileInfo(file.LocalFileName)
                If System.IO.File.Exists(file.LocalFileName) Then
                    FileIO.FileSystem.RenameFile(file.LocalFileName, Replace(file.Headers.ContentDisposition.FileName, """", ""))
                End If
            Next

        Catch ex As Exception

        End Try

    End Function

Which works fine. However, while I've declared the Remove function (based on the sample service example for the upload), it doesn't have any information in the files() even though the remove button properly hits the function:

 

   Public Function RemoveDocument(ByVal fileNames As String()) As ActionResult

 

There's nothing in the fileNames variable and seemingly nothing in the Request.Content. How can I get the list of files I'm trying to delete? 

 

Dimiter Madjarov
Telerik team
 answered on 15 Mar 2016
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?