Telerik Forums
Kendo UI for jQuery Forum
2 answers
3.4K+ views

I get this error in my Core 2 project using the KendoUICore package version 2018.1.117. I'm using webpack to compile and bundle my javascript and css. I make sure to define a var for jquery and then import the required kendo files

var $ = require("jquery");

//js files
require('./site');
import 'kendo-ui-core';
import '@progress/kendo-ui/js/kendo.all.js'
import '@progress/kendo-ui/js/kendo.aspnetmvc.js'

//css & less
require('kendo-ui-core/css/web/kendo.common.core.less');
require('kendo-ui-core/css/web/kendo.material.less');
import '../css/site.css';

@(Html.Kendo().Upload()
                            .Name("files")
                            .HtmlAttributes(new { aria_label = "files" })

                    )

Interestingly enough, the jqx date picker widgets that rely on jQuery have no problem and are rendered correctly. However the Upload control does not.

When I remove the jquery variable and kendo imports and statically reference jquery FIRST and then kendo js as shown below, the Upload control displays as expected with no error, although the styling is off

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>

        @*  Place Kendo UI scripts after jQuery *@
        <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
                asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
                asp-fallback-test="window.kendo">
        </script>
        <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
                asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
                asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
        </script>

 

What gives? Can I not use webpack to bundle kendo and jquery?

 

 

ISD
Top achievements
Rank 1
 answered on 01 Feb 2018
1 answer
89 views

Hi,

I have a meeting with two attendees (or more).

 

Moving this meeting on the timeline of one of the two attendees, also the second one is moved. This works correct, but ........ Moving this meeting from the first attendee to another, new attendee, makes the second one disappear. This happens also in the demo delivered by Kendo.

 

The move event (also the edit event) only gives the meetingID and the newAttendeeID. To solves this problem I also needs the originalAttendeeID to know which one is moved. 

 

Did anyone experience this? Did you find a solution?

Please share.

 

Thanks,

André

 

 

Tyler
Top achievements
Rank 1
 answered on 01 Feb 2018
3 answers
1.0K+ views

Hello, i have a Kendo drop down on my form which i anticipate will need to handle large volumes of data and so i am trying to configure virtualisation, however i am struggling to understand how to configure correctly. I am new to Kendo so please excuse if this is a silly question.

 

My drop down will display remote data however, at the point of creating the drop down the data will have been retrieved earlier and stored in a variable. here is my drop down:

 

$("#newDropDown").kendoDropDownList({
        filter: "contains",
        dataTextField: "Value",
        dataValueField: "ID",
        dataSource: items,
        select: onDropDownSelect,
        noDataTemplate: $("#noDataTemplate").html(),
        optionLabel: "Please select ..",
        pageSize: 80,
        serverPaging: true,
        serverFiltering: true,
        virtual: {
            itemHeight: 26,
            valueMapper: function (options) {
                options.success([options.value || 0]);
            }
        },
    });

 

I think where i am going wrong is my value mapper and my misunderstanding of how to configure it for my requirements. i have read the documentation and examples from https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization, but remain unclear. 

I have configured the no data template on my drop down to allow adding a new item if it does not exist on search. This is presented as a modal pop and on close of the modal window the item is created, drop down refreshed and the selected item set to the newly created data item. The line of code i have dynamically setting the selected item is:

 

 $("#newDropDown").data("kendoDropDownList").value(NEW_ITEM_ID)

 

this works successfully before i added in virtual configuration. Could someone explain how my value mapper should be configured in such scenario or point me towards documentation that might help explain it better? any examples ive loked at so far the valueMapper makes a remote call- is it required to callfor data again?

 

Many thanks

 

 

Neli
Telerik team
 answered on 01 Feb 2018
10 answers
906 views
This is mentioned in another post, but since it might be a bug, I thought a separate thread was appropriate.

It seems like when I try to manipulate the data source (add and remove items), and then try to update the value() of the multiselect, it fails.

This is demonstrated in this jsbin.  Note that in edit mode, for some reason jsbin does not allow inputting text into the multiselect (not sure if this is a jsbin bug or a kendo bug) - so you'll have to use the preview version to demonstrate the issue.

http://jsbin.com/ucimay/3/edit
http://jsbin.com/ucimay/3 (text input doesn't seem to work in edit mode, but works in preview mode)

My main goal is to allow users to add new items to the multiselect.  As you will see from the example above, you can add one new item, but as you add more items, it only retains the most recent one.  For example, type "abc", then select that item.  Then type "def" and select that one.  Only "def" is selected.  I've confirmed that when I print the contents of the data source, both "abc" and "def" exist.  I've also confirmed that I'm passing ["abc","def"] to the value() method.

Is this a bug that could be fixed with this week's internal build?

  Nick
Neli
Telerik team
 answered on 01 Feb 2018
6 answers
593 views

Hi,

I have column grid call description and it has sometimes a lot of text.

I want to see only 5 rows and 3 dots.

how can I do that?

thanks

picture is attached 

this is my code.

@(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
      .Name("GridTasks")
      .Columns(columns =>
      {
          columns.Bound(c => c.ID).Hidden();
          columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
          columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
          columns.Bound(c => c.Name).Title("Name");
          columns.Bound(c => c.DevelopersDataSource).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
          .Filterable(f => f.UI("developersMultiFilter").Extra(false).Messages(m => m.Info("Show items contain these developers"))).Sortable(false);
          columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
          columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
          columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate(" <div style='width:94px; height:94px;'><canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>").EditorTemplateName("PercentCompletedEditor");
          columns.Bound(c => c.Description).Title("Description"); 
          columns.Command(command => command.Custom("endTask").Click("endTask").Text("End Task"));
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
      })
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
    .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
    .Groupable(g => g.Enabled(false))
    .Filterable()
    .ToolBar(toolbar =>
    {

        toolbar.Template(@<text>
        <div class="toolbar" style="float:left">
            <a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
                <span class="k-icon k-i-add"></span> ADD TASK
            </a>
            <a class="k-button k-grid-excel k-button-icontext" href="#">
                <span class="k-icon k-i-excel"></span>Export to Excel
            </a>
        </div>
        </text>);

    })
    .Excel(excel => excel
                   .AllPages(true)
                   .FileName("Tasks.xlsx")
                   .Filterable(true)
                   .ForceProxy(true)
                   .ProxyURL(Url.Action("FileExportSave", "Home")))
    .Pageable(pager => pager
                       .Refresh(true)
                       .PageSizes(true)
                       .PageSizes(new int[] { 6, 15, 20 })
                       .ButtonCount(5))
    .Sortable(sortable =>
    {
        sortable.SortMode(GridSortMode.MultipleColumn)
       .Enabled(true);
    })
    .Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("filterMenuInitTask").DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation").Edit("onTaskEdit").Save("onTaskSave").ExcelExport("exportTasks"))
    .DataSource(dataSource => dataSource
                              .Ajax()
                              .Group(group => group.Add(p => p.ProjectName))
                              .PageSize(20)
                              .Events(events => events.Error("errorHandlerTask"))
                              .Read(read => read.Action("GetSavedTasks", "Task").Data("additionalData"))
                              .Update(update => update.Action("UpdateTask", "Task").Data("serialize"))
                              .Destroy(update => update.Action("DeleteTask", "Task").Data("serialize"))
                              .Model(model => model.Id(item => item.ID))))

Viktor Tachev
Telerik team
 answered on 01 Feb 2018
8 answers
541 views
Hey – was looking for a little help. My grid selector to select how many records to show in the grid is disabled and I’m not sure why. What controls the disabling of this drop down (see screen shot attached).It shows “unselectable” in the html..?
Preslav
Telerik team
 answered on 01 Feb 2018
16 answers
2.9K+ views
I would like a panelbar item to collapse if it is already expanded.
I would also like it to be deselected.

So in essence it would toggle open and closed

Is there a simple way to do that or what approach should I use.

thanks
dco
Neli
Telerik team
 answered on 01 Feb 2018
2 answers
385 views

The last column of my grid contains some custom buttons.  The grid itself is built using a row template. When I export to PDF, I need to hide the last column.  I followed the instruction on how to use the PdfExport event to hide the column and then re-display it on the promise.done, but couldn't get it to hide the column on the PDF.  To see where I was going wrong, I added the code snippet below to the Basic usage example for the Grid and it worked as expected.  However, when I modified the Row template example for the Grid, it didn't hide the column on the PDF.

        toolbar: ["pdf"],
        pdf: {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            scale: 0.8
        },
        pdfExport: function(e) {
            var grid = $("#grid").data("kendoGrid");
            grid.hideColumn(0);
 
            e.promise.done(function() {
             grid.showColumn(0);
            });
        },

 

I was wondering if this functionality (i.e. hide column on Pdf Export) is not supported with row templates, or if I'm just doing something stupid (more than likely the case)?

Thanks, Gregg

 

Stefan
Telerik team
 answered on 01 Feb 2018
1 answer
312 views

I am trying to create my first grid using Kendo UI. I am using the 'Basic usage' code snippet from your demo but unfortunately 'Customer Photo' and 'Page navigational buttons (First, Previous, Next and Last)' are not visible in Grid. Could you please help me?

I have created a new page in my Office 365 SharePoint site and inserted a 'Script Editor' web part. I have attached the snippet I used in the web part and also the resulting grid.

Stefan
Telerik team
 answered on 01 Feb 2018
5 answers
1.2K+ views

Hi,

I'm trying to load a grid with spaces in the datasource field name but there seems to be an error.

I saw that you guys fixed it 3 years ago here but it seems to have been reintroduced.

 

I couldn't figure out how to link from the Kendo UI Dojo so I copy pasta'd the code here:

    
Tan
Top achievements
Rank 1
 answered on 31 Jan 2018
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?