Telerik Forums
Kendo UI for jQuery Forum
1 answer
116 views

Hi,

we have been building an SPA using Vue2 that also will be serves as mobile application (wrapped using Cordova). we need Grouped list item with fixed group header (exactly the same functionality as Mobile Listview - Fixed Header). AFAIK i cannot achieve that using Kendo Listview Vue Wrapper.

is it possible to use Kendo Mobile UI especially Mobile ListView inside of Vue application, because i cannot find any reference about this in telerik documentation & the forum.

Plamen
Telerik team
 answered on 07 Feb 2018
4 answers
1.5K+ views

Hi,

I have an issue with dropdownlist, with run twice the databound (read action)

In my case, I customized the dropdownlist to manage the pagination :

 

Html.Kendo().DropDownList()
        .Name(Model.ElementId)
        .DataTextField(Model.LovTextField.Name)
        .DataValueField(Model.LovField.Name)
        .Value(Model.Value.ToString())
        .IgnoreCase(Model.SearchIgnoreCase)
        .Enable(Model.IsEnabled)
        .Animation(false)
        .AutoWidth(true)
        .Template(Model.ClientTemplate)
        .ValueTemplate(Model.ClientTemplate)
        .DataSource(source =>
        {
            source.Custom()
                .ServerFiltering(true)
                .ServerPaging(true)
                .PageSize(50)
                .Type("aspnetmvc-ajax")
                .Transport(transport =>
                {
                    transport.Read("ReadLovData", "DropDownList", new { area = "Runtime", pageid = ViewBag.PageContext.PageId, elementid = Model.ElementId });
                })
                .Schema(schema =>
                {
                    schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                }).Events(e => e.RequestEnd(@<text>function(e) {requestEnd(e,"@Model.ElementId");}</text>));
        })
        .Virtual(v =>
        {
            v.ValueMapper("dropDownListValueMapper")
                .MapValueTo("dataItem");
        })
        .FooterTemplate("<span class='k-state-hover'>Page #: instance.dataSource.page() # / #: instance.dataSource.totalPages() # - Total #: instance.dataSource.total() # items found</span>")

        

dropDownListValueMapper is a javascript function that calls an controller/action via ajax in POST mode

requestEnd is a javascript function that that does nothing in this case 

 

In the attached file, I have an example of a page with 3 dropdownlists; and we see for each of them the call of a second databound, just before the call of the valuemapper

 

Like you can see, we are in ASP.NET MVC, and I'm not  good enough in javascript to replicate an example on dojo (especially in server mode)

I also noticed that the example on databound customization did not work properly (https://demos.telerik.com/aspnet-mvc/dropdownlist/custom-datasource), but with the example provided with the DLL it works locally. However there is no valuemapper, so ... 

Note that I just went to the latest version (2018-R1), and I use Visual Studio 2015 (C#)

   

Thanks,

Thierry

 

 

 
Dimitar
Telerik team
 answered on 06 Feb 2018
1 answer
89 views
How to create and change the chart type in run time. Example: I have a pie chart and I want to switch to columns.
The data call I already have. I just want to set the correct properties so that the chart is displayed correctly.
I'm using Angular JS.
Preslav
Telerik team
 answered on 06 Feb 2018
1 answer
198 views
How to create and change the chart type in run time. Example: I have a pie chart and I want to switch to columns.
The data call I already have. I just want to set the correct properties so that the chart is displayed correctly.
I'm using Angular JS.
Preslav
Telerik team
 answered on 06 Feb 2018
4 answers
392 views
When I launch the image browser from an Editor the image seems to load up properly, however when I launch the image browser from "Inline Editing" all I get is a list of undefined objects.

I am using version 2013.2.918. Here is the code I am using to instantiate the editors:

Inline Editing Version:
$(document).ready(function () {
    $(".rich-text").kendoEditor({
        encoded: false,
        tools: [
            "bold",
            "italic",
            "underline",
            "insertImage"
        ],
        imageBrowser: {
            path: "/",
            transport: {
                read: "/cms/imagebrowser/read",
                destroy: "/cms/imagebrowser/destroy",
                create: "/cms/imagebrowser/create",
                thumbnailUrl: "/cms/imagebrowser/thumbnail",
                uploadUrl: "/cms/imagebrowser/upload",
                imageUrl: "/content/cms/images/{0}"
            }
        }
    });
});
Editor Version in my CMS:
@model string
 
@(Html.Kendo().EditorFor(m => m)
    .Encode(false)
    .Tools(tools => tools
          .Clear()
          .Bold().Italic().Underline().Strikethrough()
          .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
          .InsertUnorderedList().InsertOrderedList()
          .Outdent().Indent()
          .CreateLink().Unlink()
          .InsertImage()
          .SubScript()
          .SuperScript()
          .TableEditing()
          .ViewHtml()
          .Formatting()
          .FontName()
          .FontSize()
          .FontColor().BackColor()
    )
    .ImageBrowser(imageBrowser => imageBrowser
        .Image("~/content/cms/images/{0}")
        .Read("read", "imagebrowser", new { Area = "cms" })
        .Create("create", "imagebrowser", new { Area = "cms" })
        .Destroy("destroy", "imagebrowser", new { Area = "cms" })
        .Upload("upload", "imagebrowser", new { Area = "cms" })
        .Thumbnail("thumbnail", "imagebrowser", new { Area = "cms" })
    )
)
Can anyone tell me why these two methods would give different results? I've attached screenshots.

Using fiddler both methods make the same exact web request and get the same exact json response.
Dimitar
Telerik team
 answered on 05 Feb 2018
1 answer
126 views

Hello,

We noticed that when we when we click 'More formats..' in the format's list, the modal window opens twice. The issue can be reproduced here https://demos.telerik.com/kendo-ui/spreadsheet/index. Is this a known issue?

Also, is it best to post hese here or directly on the github repo's issue list.

 

Thanks! 

Gabriel

Neli
Telerik team
 answered on 05 Feb 2018
1 answer
151 views

Hello,

 

I'm trying to disabled the cell after I loaded Data but I failed.

What should I do to achieve my need?

Some action I already tried below:

1.

$(function() {
    $("#spreadsheet").kendoSpreadsheet({
    });
    spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
     $.getJSON("<%=request.getContextPath()%>/data.json")
     .done(function (sheets) {
         spreadsheet.fromJSON( sheets);
     });
     var rangeChange = spreadsheet.activeSheet().range("A1:H9");
    rangeChange.enable(false);
});

2.

add the attribute : "enable" : "false" to JSON Data.

Ivan Danchev
Telerik team
 answered on 05 Feb 2018
1 answer
261 views
Reproduce: 
Go to https://demos.telerik.com/kendo-ui/spreadsheet/index with mobile device and try to scroll sheet columns

Question: 
Is there any way to enable scrolling on spreadsheet for mobile devices?
Ivan Danchev
Telerik team
 answered on 05 Feb 2018
1 answer
962 views

I'm in the process of upgrading an existing MVC 5 application to Core 2. Kendo UI Grid is used to display documents and has the Kendo Upload control added to the toolbar of the Grid.

This works fine in the MVC 5 implementation as shown below:

 @(Html.Kendo().Grid<ViewModels.Documents>()
      .Name("filesGrid")
      .ToolBar(t => t.Template(
        @<text>
    )
            @(Html.Kendo().Upload()
                  .Name("files")
                  .HtmlAttributes(new { aria_label = "files" })
                  .Async(a => a.Save("DocumentSave", "Home", new { requestId = ViewBag.RequestId }))
                  .Events(e => e.Success("onUploadSuccess"))
                  .ShowFileList(false) // Hide the file list as we're displaying uploaded files in the Grid
            )
        </text>
      ))
      .Columns(columns =>
      {
          columns.Bound(f => f.FileName).ClientTemplate(Html.ActionLink("#=FileName#", "Download", "Home", new { id = "id" }, null).ToHtmlString().Replace("id", "#=DocumentId#")).Title("File name");
          // Calculate the file size in KB, round it up and display it in a client template
          //columns.Bound(f => f.DataLength).ClientTemplate("#= Math.ceil(DataLength / 1024) #").Title("File size in KB").Width(150);
          columns.Bound(f => f.DataLength).Title("File size").Width(150);
          columns.Command(command => command.Destroy()).Width(100);
      })
      .Sortable()
      .Pageable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(10)
          .Model(m => m.Id(f => f.DocumentId))
          .Read(read => read.Action("DocumentsRead", "Home", new { requestId = ViewBag.RequestId }))
          .Destroy(update => update.Action("DocumentDelete", "Home"))
      )
    )

However in ASP.NET Core 2 KendoUICore 2018.1.117, the .ToolBar(t => t.Template() method is no longer available, it appears it has been replaced by ClientTemplate. When I attempt to embed the same markup for UI Upload inside ClientTemplate, I get an error "Cannot convert lambda expression to type 'string' because it is not a delegate type"

.ToolBar(t => t.Create()).ToolBar(toolbar =>
                    {
                      toolbar.ClientTemplate(@<text>Html.Kendo().Upload()</text>);
                    }
                    )

 

Thanks for the input!

 

Stefan
Telerik team
 answered on 05 Feb 2018
2 answers
302 views

Dear all..

Good day!

Hello, I'm Ucu, I have some issue/bug that I can't find/solve it. I generated some excel spreadsheet using Kendo.

When the spreadsheet open, and then I click the cells or I press the keyboard to move into other cells, the height of window Spreadsheet is change dynamically, increment +2 px. I try to the in , but nothing change, the height of window still change upper and upper. how can I solve this? please let me know if you have experience with me, how to solve this..here is my js code

01.function initiateSheet(tipeLayanan){
02.            if(tipeLayanan=="H123"){
03.                pengangkatanStart = dummyGetObject.result.dealer.pengangkatanStart;
04.                //console.log("pengangkatanStart di JS: "+pengangkatanStart);
05.                createSheetConfigPerfH1("Performance H1");
06.                createSheetConfigPerfH23("Performance H23");
07.                createSheetConfigPotH1();
08.                createSheetConfigPotH23();
09.                createSheetConfigSummary();
10.                createSheetConfigEvalForm();
11.                $("#spreadsheet").kendoSpreadsheet({
12.                render: function(e){
13.                    //Hides the insert button
14.                    $(".k-spreadsheet .k-spreadsheet-sheets-bar .k-button").hide();
15.                   
16.                    //Hides the remove icon
17.                    $(".k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove").hide();
18.                },
19.                toolbar:false,
20.                sheets:[sheetPerformanceH1,sheetPerformanceH23,sheetPotentialH1,sheetPotentialH23,sheetSummary,sheetEvaluationForm],
21.                pdf: {
22.                    size: "auto",
23.                    area: "sheet",
24.                    landscape: false,
25.                    fitWidth: true,
26.                    hCenter: true,
27.                    vCenter: false,
28.                    fileName: dummyGetObject.result.dealer.dealerCode+"_Evaluation Dealer TA.pdf",
29.                    guidelines: false,
30.                    margin: {
31.                        left: 25,
32.                        right: 40,
33.                        top: 20,
34.                        bottom: 20
35.                    }
36.                }
37.                });
38.                createSummary();
39.            }
40.}

 

and then here is my

 

05. 
09. 
10.<!--<script src="libs/kendo-2017.3.913/kendo.all.min.js"></script>-->
11.<div style="display: block;height: 96%;">
12.    <!--<button onclick="myFunction()" id="save">Save Changes!</button>-->
13.    <div id="spreadsheet" style="width: 100%; height:100%"></div>
14.    <button id="save" class="saveBtn">Save As Draft</button>
15.    <button id="submit" class="submitBtn">Submit</button>
16.    <button id="export" class="exportBtn">Download File</button>
17.</div>
18.<script src="libs/kendo-2017.2.614/kendo.all.min.js"></script>
19.<!--<link href="libs/kendo-2017.2.614/kendo.common.min.css" rel="stylesheet" />-->
20.<script src="app/pages/evaluationdealerspreadsheet/evaluationdealerspreadsheet_sheetConfig.js"></script>

 

for detail, I attach the screenshot of my issues. see attachments.

 

I hope I can find the answer here. Thanks in advance

Ucu
Top achievements
Rank 1
 answered on 05 Feb 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?