Telerik Forums
Kendo UI for jQuery Forum
1 answer
668 views

Hi
I have this annoying blue border around the Kendo TabStrip whenever it is selected.

Please see attached image.

Does anyone know how to use it please?

Thanks.

Neli
Telerik team
 answered on 02 Feb 2018
10 answers
275 views

I just upgraded my kendoUI code to the latest release, and now my markers don't show up on the map.  I copied the old kendoUI code back in and they show up just fine.  Anybody else experiencing this?  The tooltips still work fine when I mouse over a spot where the marker should be.

Here's my code

var markerUrlFormat = "GetMarkerData.aspx?lat={0}&lng={1}";
resultsMap = $("#resultsMap").kendoMap({
    center: [44.367966, -100.336378],
    zoom: 7,
    layers: [
        {
            type: "bing",
            imagerySet: "road",
            key: bingMapsKey
        },
        {
            type: "marker",
            dataSource: agMapResultsDataSource,
            locationField: "LocationArray",
            tooltip: {
                iframe: true,
                content: {
                    url: "GetMarkerData.aspx?lat=0&lng=0"
                },
                requestStart: function (e) {
                    e.options.url =
                        kendo.format(markerUrlFormat, e.sender.marker.dataItem.Latitude, e.sender.marker.dataItem.Longitude);
                },
                autoHide: false,
                width: 350,
                height: 300
            },
            titleField: "StreetAddress"
        }
    ]
}).data("kendoMap");
Kevin F
Top achievements
Rank 1
 answered on 02 Feb 2018
2 answers
3.3K+ 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
62 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
903 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
775 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
565 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
509 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.8K+ 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
335 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?