Telerik Forums
Kendo UI for jQuery Forum
1 answer
130 views

We are loading 600-1000 records in a grid in a popup window.  Without using virtualization, grid performance in IE10+ is very slow but excellent in Chrome.  Currently we have virtualization turned on so we can get descent performance in IE.  In an upcoming application we are not going to be able to use virtualization because of it's restrictions but will be fetching around the same number of records.  I have attached the html used for the popup window and the grid.  The grid is defined at line 121.  I have also attached the controller where the grid options are defined, line 688 and the datasource used, line 648.  Any advice on this would be very helpful.

 

Customer ID:XJ1552164

Kiril Nikolov
Telerik team
 answered on 03 Jul 2015
4 answers
248 views

I'm facing a problem when I try to change the Radial Gauge value with the code below in my TypeScript project.

var gauge = $("#gauge").data("kendoRadialGauge");
gauge.options.pointer[0].value = Math.random() * 100;

 

The property 'value' is updated with the new value, but the pointer doesn't move.

What I'm doing wrong?

 

Thanks!

Gustavo
Top achievements
Rank 1
 answered on 03 Jul 2015
1 answer
174 views
I'm using kendo ui 2013 Q3, I have a grid that is using footerTemplate and groupFooterTemplate. Everything is good until I destroy the grid to generate new data, the grid is destroyed but the footerTemplate stays there on the grid. My question is: is there anything extra I need to do to completely destroy the grid when I'm using footerTemplate ?
Alexander Popov
Telerik team
 answered on 03 Jul 2015
5 answers
1.3K+ views

Hi there,

I'm using a Kendo UI Grid for MVC, with an excel export option.  One column is HTML straight from the database as comes into the excel as raw HTML so I'd like to hide this column.  I've tried adapting the code from a separate thread (http://www.telerik.com/forums/export-to-grid-hide-columns) for standard UI rather than MVC but it isn't achieving what I want (see code below) - this is what happens :-

a) On the 1st click of Export to Excel it does nothing
b) On the second click it hides the column on the page but doesn't do the excel export
c) on the 3rd click it shows the column on the page again and does the excel export, but without the column removed

Any help would be appreciated :)

This is my view code :-

<script>

    // setup the page
    $(window).load(function () {
        var grid = $("#grid").data("kendoGrid");
        var exportFlag = false;
        grid.bind("excelExport", function (e) {
            if (!exportFlag) {
                alert(1);
                e.sender.hideColumn(1);
                e.preventDefault();
                exportFlag = true;
                setTimeout(function () {
                    e.sender.saveAsExcel();
                });
            } else {
                alert(2);
                e.sender.showColumn(1);
                exportFlag = false;
            }
        });
    })

</script>

@( Html.Kendo().Grid<TEAMSPortalV2.Models.SiteViewModel>()
    .Name("grid")
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read => read.Action("GetSites", "Site"))
        .Sort(sort => sort.Add("AddressWithPostcode").Ascending())
    )
    .Columns(columns =>
    {
        columns.Bound(site => site.UPRN).Title("UPRN");
        columns.Bound(site => site.AddressWithPostcode).Title("Address");
        columns.Bound(site => site.Contact).Title("Contact");
        columns.Bound(site => site.Telephone).Title("Telephone");
        columns.Bound(site => site.SampleResultsOverview).Title("Rec. Action").Encoded(false);
        columns.Template(site => { }).ClientTemplate(" ").Title("Site Documents");
    })
    .ClientRowTemplate(Html.Partial("~/Views/Site/SiteTemplate.cshtml").ToHtmlString())
    .Sortable()
    .ToolBar(tools =>
    {
        tools.Template(@<text>
            <div class="toolbar">
                <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
                <a href="#" onclick="alert('filter!');"><img src="~/Content/images/icons/filter.png" class="floatright" style="padding: 3px;" /></a>
            </div>
        </text>);
    })
    .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
    .Excel(excel => excel
                .FileName("sites.xlsx")
                .AllPages(true))
)

Dimiter Madjarov
Telerik team
 answered on 03 Jul 2015
4 answers
133 views

Hello,

I want to use the virtualization feature of the DropDownList component but it does not work correctly. In the attached screenshot you see that there is not scrollbar in the dropdown and the list of elements is larger than the dropdown box. Furthermore, the gap between the elements is too large (I used the settings for itemHeight and height as specified on your example page).

Here is my code:

 

$(document).ready(function() {
    $("#select14349870649078014764761").kendoDropDownList({
        filter: 'contains',
        dataTextField: 'project_title',
        dataValueField: 'project_id',
        virtual: {
           valueMapper: function(options) {
               $.ajax({
                   url: '/project/getRowNumber',
                   type: 'GET',
                   data: {
                       filterValue: options.value
                   },
                   success: function(data) {
                       options.success(data);
                   }
               });
           }
        },
        dataSource: {
            pageSize: 80,
            serverPaging: true,
            serverFiltering: true,
            transport: {
                read: {
                    url: '/project/select?filterProperty=title'
                }
            },
            schema: {
                model: {
                    fields: {
                        project_title: {type: 'string'},
                        project_id: {type: 'number'}
                    }
                }
            }
        }
    });
});

Regards

Sebastian

Alexander Valchev
Telerik team
 answered on 03 Jul 2015
1 answer
305 views

Hi,

 

Our app locks into portrait mode. We would like to have a chart that displays a lot of data horizontally and wondering if there is a way for us to enable horizontal scrolling of the chart area in the app, assume a simple bar chart for 12 months, where 3 can be shown on the screen at a time, but scrolling will allow the user to see other months data.

 

(We are aware that we can have a vertical scrolled chart, we are just exploring the other alternative)\

Thanks,

 Ron.

Iliana Dyankova
Telerik team
 answered on 03 Jul 2015
1 answer
330 views

Hi,

 

I have a kendo grid with a detail template for each row that holds another grid. On the nested grid I will have three custom toolbar buttons. I can access the click event of the custom button in general, but it does not seem to tie to a specific nested grid. Clicking on the button on one grid will give me access to the grid's contents, but when I click on the custom button from a different nested grid I get the data from the first one. Is there a way to add a unique id to the button so I can get the data for each specific grid on the click of the corresponding button? Here is the code I am using so far:

 

Grid:   toolbar: [  { name: "custom", text: "Custom" }
                    ],

 

Event Handler:   $(".k-grid-custom").click(function (e) {
            debugger
            var ledgerGrid = $(".ledger").data("kendoGrid");
            var selected = ledgerGrid._data[0].account_id;
        });

Alexander Popov
Telerik team
 answered on 03 Jul 2015
1 answer
113 views

Hello,

I've noticed in version 2014 Q3 combobox doesn't scroll top after read new data, in version 2015 Q1 always after read scroll is on top. I need the same solution in version 2015 Q1 as this (topic from forum).

01.(function ($, kendo) {
02.            var ExtendedComboBox = kendo.ui.ComboBox.extend({
03. 
04.                _pager: null,
05.                _scrollTop: null,
06. 
07.                init: function (element, options) {
08.                    var that = this;
09. 
10.                    //set combobox defaults
11.                    that.options.placeholder = "Select";
12.                    that.options.autoBind = false;
13.                    that.options.highlightFirst = true;
14.                    that.options.suggest = true;
15.                    that.options.filter = "contains";
16. 
17.                    kendo.ui.ComboBox.fn.init.call(that, element, options);
18. 
19.                    if (options.loadOnDemand) {
20.                        var that = this;
21. 
22.                        if (options.itemsPerRequest != null) {
23.                            this.options.itemsPerRequest = options.itemsPerRequest;
24.                        }
25. 
26.                        that.dataSource.options.serverFiltering = true;
27.                        that.dataSource.options.serverPaging = true;
28.                        that.dataSource.options.serverSorting = true;
29.                        that.dataSource._take = this.options.itemsPerRequest;
30. 
31.                        if (this.options.virtualScrolling == true) {
32.                            $('ul', this.list).scroll(this, this.scroll);
33.                        }
34. 
35.                        $('a.k-link', this._pager).css({
36.                            cursor: 'pointer'
37.                        }).click(function (e) {
38.                            e.preventDefault();
39.                            var items = that.dataSource.view().length;
40.                            var total = that.dataSource.total();
41.                            if (total != items) {
42.                                that._scrollTop = $('ul', that.list).scrollTop();
43.                                that.dataSource.pageSize(that.dataSource.pageSize() + that.options.itemsPerRequest);
44.                            }
45.                        });
46.                        this.list.append(this._pager);
47. 
48.                    }
49.                },
50.                options: {
51.                    name: "ExtendedComboBox",
52.                    loadOnDemand: false,
53.                    itemsPerRequest: 20,
54.                    virtualScrolling: false
55.                },
56.                refresh: function () {
57.                    kendo.ui.ComboBox.fn.refresh.call(this);
58. 
59.                    if (this._scrollTop != null) {
60.                        $('ul', this.list).scrollTop(this._scrollTop);
61.                        this._scrollTop = null;
62.                    }
63.                },
64.                open: function () {
65.                    this.refresh();
66.                    kendo.ui.ComboBox.fn.open.call(this);
67.                },
68.                scroll: function (e) {
69.                    var scrollTop = $(e.currentTarget).scrollTop();
70.                    if (e.data._scrollTop != null) return;
71.                    if (scrollTop + $(e.currentTarget).height() >= $(e.currentTarget)[0].scrollHeight - 1) {
72.                        var items = e.data.dataSource.view().length;
73.                        var total = e.data.dataSource.total();
74.                        if (total != items) {
75.                            e.data._scrollTop = scrollTop;
76.                            e.data.dataSource.pageSize(e.data.dataSource.pageSize() + e.data.options.itemsPerRequest);
77.                        }
78.                    }
79.                }
80.            });
81. 
82.            kendo.ui.plugin(ExtendedComboBox);
83.        })(window.kendo.jQuery, window.kendo);

Thanks.

Georgi Krustev
Telerik team
 answered on 03 Jul 2015
1 answer
187 views
When my Gantt chart renders, no matter what browser, running horizontally along the top of and vertically along the left side of the timeline view are a bunch of special capital "A" characters.  I cannot seem to figure out exactly where the problem lies.  Any help would be greatly appreciated.  I have attached a PDF for reference.
Dimitar Terziev
Telerik team
 answered on 03 Jul 2015
1 answer
166 views

I have a scheduler which allows to add attendees

 

@(Html.Kendo().Scheduler<AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel>()
    .Name("scheduler")
    .Date(DateTime.Today)
    .StartTime(DateTime.Today.AddHours(7))
    .EndTime(DateTime.Today.AddHours(21))
    .WorkDayStart(8, 0, 0)
    .WorkDayEnd(21, 0, 0)
    .WorkWeekStart(1)
    .WorkWeekEnd(0)
    .Timezone("Etc/UTC")
    .EventTemplateId("customEventTemplate")
    .AllDayEventTemplateId("customAllDayTemplate")
    .Views(views =>
    {
        views.DayView(d => d.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>"));
        views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>"));
        views.MonthView();
        views.AgendaView();
    })
    .Editable(editable =>
    {
        editable.TemplateName("_ScheduleWindowTemplate");
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.Id);
        })
         
        .Events(e => e.Error("error_handler"))
        .Read("Read", "Schedule")
        .Create("Create", "Schedule")
        .Update("Update", "Schedule")
        .Destroy("Delete","Schedule")
    )
)

A pop up window comes from a template

 

@using AGAT.TSSM.Logic.Domain.Model.Schedule;
@using AGAT.TSSM.Web.Models.User;
@model AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel
@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}
 
@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {
 
        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();
 
        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";
 
        return datePickerAttributes;
    }
}
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Title))
</div>
<div data-container-for="title" class="k-edit-field">
    @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Location))
</div>
<div data-container-for="title" class="k-edit-field">
    @(Html.TextBoxFor(model => model.Location, new { @class = "k-textbox", data_bind = "value:Location" }))
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="isAllDay" class="k-edit-field">
    <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" />
</div>
 
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.Start))
</div>
<div data-container-for="start" class="k-edit-field">
 
    @(Html.Kendo().DateTimePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
 
    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
 
    <span data-bind="text: startTimezone"></span>
    <span data-for="start" class="k-invalid-msg"></span>
</div>
 
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.End))
</div>
<div data-container-for="end" class="k-edit-field">
 
    @(Html.Kendo().DateTimePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end,invisible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "Окончание должно быть позднее начала" } })))
 
    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDate",
            "end",
            "value:end,visible:isAllDay",
            new Dictionary<string, object>() { { "data-dateCompare-msg", "Окончание должно быть позднее начала" } })))
 
    <span data-bind="text: endTimezone"></span>
    <span data-for="end" class="k-invalid-msg"></span>
</div>
 
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.RecurrenceRule))
</div>
<div data-container-for="recurrenceRule" class="k-edit-field">
    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</div>
 
<div class="k-edit-label">
    @(Html.LabelFor(model => model.ScheduleType))
</div>
<div data-container-for="ScheduleType" class="k-edit-field">
    @* @Html.DropDownListFor(m => m.ScheduleType, Model.ScheduleTypeList)*@
 
    @(Html.Kendo().DropDownListFor(model => model.ScheduleType)
        .HtmlAttributes(new { data_bind = "value:ScheduleType", style = "width: 200px" })
        .DataTextField("Text")
        .DataValueField("Value")
        .OptionLabel("None")
        .ValuePrimitive(true)
        .Template("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
        .Events(e => e.Change("scheduleTypeChange"))
        .BindTo(new[] {
                new { Text = "Обычное событие", Value = ScheduleType.GeneralSchedule, Color = "\\#6eb3fa" },
                new { Text = "Работа над заявкой", Value = ScheduleType.WorkOnRequest, Color = "\\#D9534F" },
                new { Text = "Работа над задачей", Value = ScheduleType.WorkOnTask, Color = "\\#5CB85C" },
                new { Text = "Работа над проектом", Value = ScheduleType.WorkOnProject, Color = "\\#F0AD4E" },
                new { Text = "Собрание", Value = ScheduleType.GroupMeeting, Color = "\\#f58a8a" } 
            }).ToClientTemplate()
    )
</div>
 
<div id="item-reference" style="display: none;">
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.ItemReference, new { id = "ref-label" }))
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.ItemReference, new { @class = "k-textbox", data_bind = "value:ItemReference" }))
 
    </div>
</div>
 
<div id="item-invitees">
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.ScheduleInvitees, new { id = "ref-label" }))
    </div>
    <div data-container-for="title" class="k-edit-field">
 
        @(Html.Kendo().MultiSelectFor(m => m.ScheduleInvitees)
          .Name("ScheduleInvitees")
          .HtmlAttributes(new { data_bind = "value:ScheduleInvitees" })
          .DataTextField("Name")
 
          .DataValueField("Id")
          .TagTemplateId("tagTemplate")
          .ItemTemplateId("itemTemplate")
          .Filter("contains")
          .AutoBind(true)
          .ValuePrimitive(true)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetInvitees", "Base");
                })
                .ServerFiltering(true);
            })
                  .Value(Model.InvitedUsers)
 
    )
 
 
    </div>
</div>

My problem is that the multiselect sets new attendees but not reading them when I want to edit it

 

.DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetInvitees", "Base");
                })
                .ServerFiltering(true);
            })
                  .Value(Model.InvitedUsers)

InvitesUsers come from my model and it is a SelectList and I set it like this:

InvitedUsers = users.ToSelectList(x => new ExtSelectItem
                        {
                            Selected = true,
                            Text = x.Name,
                            Value = x.Id.ToString()
                        }

Georgi Krustev
Telerik team
 answered on 03 Jul 2015
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?