Telerik Forums
Kendo UI for jQuery Forum
2 answers
581 views

I'm using a variation on the code from this article to export master and child grids into a single Excel worksheet. I've got the data exporting correctly, but there are two date fields that are showing up in the JSON date format - /Date(1498107600000)/. I'm having trouble finding any documentation on how to correct this. I've tried the following:

var exporter = new kendo.ExcelExporter({
      columns: [{
          field: "Name"
      }, {
          field: "Result"
      }, {
          field: "DateCompleted", title: "Date Completed", format: "dd/MM/yyyy"
      }, {
          field: "DateReceived", title: "Date Received", format: "dd/MM/yyyy"
      }],
      dataSource: dataSource
  });

 

Where is this breaking down?

Harper
Top achievements
Rank 1
 answered on 28 Sep 2017
2 answers
1.0K+ views
$("#groups-no-dropdown").kendoComboBox({
                filter: "contains",
                ignoreCase: true,
                dataTextField: "Name",
                dataValueField: "Id",
                minLength: 3,
                enforceMinLength: true,
                footerTemplate: 'Total #: instance.dataSource.total() # items found',
                template: '<span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.Id #</p></span>',
                placeholder: "Enter a Group Name...",
                filtering: function(e) {
                    console.log(e);
                },
                dataSource: {
                    transport: {
                        read: {
                            dataType: "json",
                            url: '@Url.Action("GetData", "Groups")',
                            type: "POST"
                        }
                    },
                    parameterMap: function (data, type) {
                        console.log(data);
                        data = kendo.stringify({ request: { filter: data.filter.field + "~" + data.filter.operator + "~'" + data.filter.value + "'" } });
                        console.log(data);
                        return data;
 
                    },
                    serverFiltering: true,
                    schema: {
                        type: "json",
                        data: "Data",
                        total: "Total",
                        model: {
                            fields: {
                                Id: { field: "Id", type: "guid" },
                                Name: { field: "Name", type: "string" }
                            }
                        }
                    },
                    sort: { field: "Name", dir: "asc" }
                },
                height: 400
            });ue

 

The above is my combobox. You can see parameter map, but regardless if I remove parameter map or not. The data gets posted as:

filter[logic]:and
filter[filters][0][value]:eng
filter[filters][0][field]:Name
filter[filters][0][operator]:contains
filter[filters][0][ignoreCase]:true

Also why is the posted data different from data in the parameter map function? It seems like additional processing is happening. Here is what is spit out to console inside parameterMap function:

{filter: {…}, sender: init, _defaultPrevented: false, preventDefault: ƒ, isDefaultPrevented: ƒ}
filter:{value: "eng", field: "Name", operator: "contains", ignoreCase: true}
isDefaultPrevented:Æ’ ()
preventDefault:Æ’ ()
sender:init {ns: ".kendoComboBox", element: I.fn.init(1), _events: {…}, options: {…}, _isSelect: false, …}
_defaultPrevented:false
__proto__: Object

 

Which is structured differently than what is being posted.
Tsvetina
Telerik team
 answered on 28 Sep 2017
1 answer
134 views

Any of the Kendo elements on the page that we implement are displaying lower than they should. The elements should be displaying just below the input, but, at times, the element is displaying almost entirely off of the bottom of the page.

I am wondering if anyone else has ran into this and knows of a solution.

Thanks!

Magdalena
Telerik team
 answered on 28 Sep 2017
1 answer
227 views

Hi Masters,

How can I set enforceMinLength = true from Angular html models?

It doesn't look like it's working like this: 

<input kendo-auto-complete ng-model="customerName" k-min-length="3" enforceMinLength="true" k-data-source="repos" style="width: 100%;" />

 

Veselin Tsvetanov
Telerik team
 answered on 28 Sep 2017
4 answers
1.2K+ views

Hi,

 

Here is my editor markup -

<text-editor params="model: organisationChart, root: $root">
<div>
    <div data-bind="css: notesContainerClass, if: label" class="notes_label"></div>
    <div data-bind="css: containerClass" class="rtb_container">
        <table cellspacing="4" cellpadding="0" class="k-widget k-editor k-header k-editor-widget" role="presentation"><tbody><tr role="presentation"><td class="k-editor-toolbar-wrap" role="presentation"><ul class="k-editor-toolbar" role="toolbar" data-role="editortoolbar"><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Bold" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-bold">Bold</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Italic" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-italic">Italic</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Underline" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-underline">Underline</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Strikethrough" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-strikethrough">Strikethrough</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Align text left" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyLeft">Justify Left</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Center text" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyCenter">Justify Center</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Align text right" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyRight">Justify Right</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Justify" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-justifyFull">Justify Full</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Insert unordered list" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-insertUnorderedList">Insert unordered list</span></a><a href="" role="button" class="k-tool" unselectable="on" title="Insert ordered list" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-insertOrderedList">Insert ordered list</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Indent"><span unselectable="on" class="k-tool-icon k-indent">Indent</span></a><a href="" role="button" class="k-tool k-group-end k-state-disabled" unselectable="on" title="Outdent" style="display: none;"><span unselectable="on" class="k-tool-icon k-outdent">Outdent</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Insert hyperlink"><span unselectable="on" class="k-tool-icon k-createLink">Create Link</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Remove hyperlink" style="display: none;"><span unselectable="on" class="k-tool-icon k-unlink">Remove Link</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Insert image"><span unselectable="on" class="k-tool-icon k-insertImage">Insert Image</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start" unselectable="on" title="Subscript" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-subscript">Subscript</span></a><a href="" role="button" class="k-tool k-group-end" unselectable="on" title="Superscript" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-superscript">Superscript</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" data-popup="" unselectable="on" title="Create table"><span unselectable="on" class="k-tool-icon k-createTable">Create table</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add row above" style="display: none;"><span unselectable="on" class="k-tool-icon k-addRowAbove">Add row above</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add row below" style="display: none;"><span unselectable="on" class="k-tool-icon k-addRowBelow">Add row below</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add column on the left" style="display: none;"><span unselectable="on" class="k-tool-icon k-addColumnLeft">Add column on the left</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Add column on the right" style="display: none;"><span unselectable="on" class="k-tool-icon k-addColumnRight">Add column on the right</span></a><a href="" role="button" class="k-tool k-state-disabled" unselectable="on" title="Delete row" style="display: none;"><span unselectable="on" class="k-tool-icon k-deleteRow">Delete row</span></a><a href="" role="button" class="k-tool k-group-end k-state-disabled" unselectable="on" title="Delete column" style="display: none;"><span unselectable="on" class="k-tool-icon k-deleteColumn">Delete column</span></a></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" unselectable="on" title="View HTML"><span unselectable="on" class="k-tool-icon k-viewHtml">View HTML</span></a></li><li class="k-tool-group" role="presentation"><span class="k-editor-dropdown k-group-start k-group-end"><span class="k-widget k-dropdown k-header k-editor-widget" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" style="width: 110px;"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Format</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select title="Format" class="k-formatting k-decorated" data-role="selectbox" unselectable="on" style="width: 110px; display: none;"><option value="p" selected="selected">Paragraph</option><option value="blockquote">Quotation</option><option value="h1">Heading 1</option><option value="h2">Heading 2</option><option value="h3">Heading 3</option><option value="h4">Heading 4</option><option value="h5">Heading 5</option><option value="h6">Heading 6</option></select></span></span></li><li class="k-tool-group k-button-group" role="presentation"><a href="" role="button" class="k-tool k-group-start k-group-end" unselectable="on" title="Clean formatting"><span unselectable="on" class="k-tool-icon k-cleanFormatting">Clean formatting</span></a></li><li class="k-tool-group" role="presentation"><span class="k-widget k-combobox k-header k-group-start k-editor-widget" unselectable="on" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input k-fontName k-group-start" type="text" autocomplete="off" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" unselectable="on" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><select title="Font Name" class="k-fontName k-group-start" data-role="combobox" aria-disabled="false" aria-readonly="false" unselectable="on" style="display: none;"><option value="inherit" unselectable="on" selected="selected">(inherited font)</option><option value="Arial,Helvetica,sans-serif" unselectable="on">Arial</option><option value="'Courier New',Courier,monospace" unselectable="on">Courier New</option><option value="Georgia,serif" unselectable="on">Georgia</option><option value="Impact,Charcoal,sans-serif" unselectable="on">Impact</option><option value="'Lucida Console',Monaco,monospace" unselectable="on">Lucida Console</option><option value="Tahoma,Geneva,sans-serif" unselectable="on">Tahoma</option><option value="'Times New Roman',Times,serif" unselectable="on">Times New Roman</option><option value="'Trebuchet MS',Helvetica,sans-serif" unselectable="on">Trebuchet MS</option><option value="Verdana,Geneva,sans-serif" unselectable="on">Verdana</option><option unselectable="on"></option></select></span><span class="k-widget k-combobox k-header k-editor-widget" unselectable="on" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input k-fontSize" type="text" autocomplete="off" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" unselectable="on" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><select title="Font Size" class="k-fontSize" data-role="combobox" aria-disabled="false" aria-readonly="false" unselectable="on" style="display: none;"><option value="inherit" unselectable="on" selected="selected">(inherited size)</option><option value="xx-small" unselectable="on">1 (8pt)</option><option value="x-small" unselectable="on">2 (10pt)</option><option value="small" unselectable="on">3 (12pt)</option><option value="medium" unselectable="on">4 (14pt)</option><option value="large" unselectable="on">5 (18pt)</option><option value="x-large" unselectable="on">6 (24pt)</option><option value="xx-large" unselectable="on">7 (36pt)</option><option unselectable="on"></option></select></span><div class="k-colorpicker k-foreColor" data-role="colorpicker" style=""></div><span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header k-editor-widget" aria-disabled="false" tabindex="0" aria-label="Current selected color is #000000" title="Color" unselectable="on" aria-owns="866d753e-1f0e-4da6-95ea-ea62eef36947"><span class="k-picker-wrap k-state-default" unselectable="on"><span class="k-tool-icon k-foreColor" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span></span><div class="k-colorpicker k-backColor" data-role="colorpicker" style=""></div><span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header k-editor-widget k-group-end" aria-disabled="false" tabindex="0" aria-label="Current selected color is #000000" title="Background color" unselectable="on" aria-owns="99cc64c1-d1dd-4101-8b9d-709bb8a6bf56"><span class="k-picker-wrap k-state-default" unselectable="on"><span class="k-tool-icon k-backColor" unselectable="on"><span class="k-selected-color" unselectable="on" style="background-color: rgb(0, 0, 0);"></span></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span></span></li></ul></td></tr><tr><td class="k-editable-area"><iframe frameborder="0" class="k-content" src='javascript:""'></iframe><textarea data-bind="htmlEditor: model.note" data-role="editor" autocomplete="off" class="k-content k-raw-content" style="display: none;"></textarea></td></tr></tbody></table>
    </div>
    <div class="notes_buttons">
        <div>
            <img class="attachment_image" data-bind="click: upload, attr: { src: attachmentImageSource, title: attachmentsAddAttachementTooltip }" src="/images/clip.png" title="Upload attachment">
            <input type="file" name="files" class="hidden file-upload" data-bind="attachmentFileUploader: true, model: $component, attr: { 'data-url': uploadUrl, id: fileInputName }" multiple="" value="+" data-url="/Plan/Save?planId=580&type=OrganisationChart" id="OrganisationChart_Input">
        </div>
    </div>
    <div class="attachments">
        <!-- ko if: model.attachments().length > 0 --><!-- /ko -->
    </div>
    <wait-timer-dialog params="showMessage: showWaitTimer, message: waitMessage"><div class="popup hidden" data-bind="waitTimerDialog: showMessage, model: $data">            <div data-bind="text: message"></div>            <img data-bind="attr: { src: imageUrl }" src="/images/loader-green.gif">        </div></wait-timer-dialog>
    <wait-timer-dialog params="showMessage: showDeleteAttachmentTimer, message: deleteAttachmentMessage"><div class="popup hidden" data-bind="waitTimerDialog: showMessage, model: $data">            <div data-bind="text: message">Deleting attachment. Please wait...</div>            <img data-bind="attr: { src: imageUrl }" src="/images/loader-green.gif">        </div></wait-timer-dialog>
    <message-dialog params="showMessage: success, message: uploadSuccess"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Attachment(s) uploaded successfully.</div>        </div></message-dialog>
    <message-dialog params="showMessage: deleteSuccess, message: deleteSuccessMessage"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Attachment(s) deleted successfully.</div>        </div></message-dialog>
    <message-dialog params="showMessage: error, isError: true, message: errorMessage"><div class="popup hidden" data-bind="messageDialog: showMessage, model: $component">             <div data-bind="text: displayMessage">Error occurred. Please try again.</div>        </div></message-dialog>
</div></text-editor>

 

I want to disable this based on a value in my knockout viewmodel.
From research, it appears as tho it needs to be done once the page is fully rendered, so Im trying to do so in document.ready(), without success.
I've tried to find the control in a number of ways, no of which work -

var editor = $('#OrganisationChart').data('kendoEditor');
 
    if (editor != undefined) {
        alert("organisationChart Editor found");
        editor.body.contentEditable = false;
    }
     
    $('.k-editor textarea').each(function (idx, element) {
        alert("Editors found");
        $($(element).data("htmlEditor").body).attr("contenteditable", false);
 
    });

 

Can you help me in how to identify these editors so I disable them please?

Thank you,

Terry.

Veselin Tsvetanov
Telerik team
 answered on 28 Sep 2017
3 answers
172 views

Hi,

Is there an easy way to copy a record and then start the edit for this record in one go?

During the copy some data might be changed before the record is added and edited.

 

I have setup a sample script here:

http://dojo.telerik.com/@Insad/epERa

 

But I don't know how to go from there.

 

What I have done is take a simple grid, added a custom button in the command column and attached the click to a function inside my viewModel.

Here I can get the current dataItem, change the ProductName, set the ProductID to null and add it to the datasource and force a refresh of the grid.

But what happens is that the original item in the grid has the changed ProductName in it and a new record is added at the very end of the grid, without a ProductID.

How I get the edit started is also not known to me at this time.

 

Is there another way? Is there a sample for this somewhere (didn't find anything in the forum or with Google)?

 

Best regards,

 

Insad

Stefan
Telerik team
 answered on 28 Sep 2017
1 answer
356 views

I would disable value insertion in the MaskedTextBox, but keep the validator for that field.

I use kendo with MVVM.

This is my html code:

<div>
   <label for="elem" class="elem">Field</label>
   <input data-role="maskedtextbox" data-bind="value: elem1" id="elem" name="element" class="form-control" placeholder="Insert" required validationMessage="Insert {0}" disabled/>
<span class="k-invalid-msg" data-for="element"></span>
</div>

 

Stefan
Telerik team
 answered on 28 Sep 2017
1 answer
189 views

Hi I am pretty new to using kendo so I might have missed something pretty simple here. I would like to create a treelist where the expand option is in the 3rd column and I cannot find anyway to do this. This is a fairly common design and can be found in the call tree option of in the performance data of most modern browsers. I have attached an image from chrome to demonstrate the style I would like to implement.

 

Viktor Tachev
Telerik team
 answered on 28 Sep 2017
4 answers
521 views

Hi,

 

I'm working on kendo scheduler : http://dojo.telerik.com/@n2lose/ogUzay/2

1. Is there any way to set selected local timezone on the dialog add event? I would like to set local timezone selected when open dialog instead of user has to be selected from drop down list timezone!
I have researched and found the way to set timezone by the way set defaultValue for startTimezone, endTimezone. But normally, i just can get the timezoneOffset (number), how can i get the label timezone as we select an item in drop down list timezone?

 

2. When user selected an item from resources dataSource, can we custom template to add a link of that item below the drop down list? i mean i can custom template when handle on resources dataSource?

Tyler
Top achievements
Rank 1
 answered on 27 Sep 2017
2 answers
166 views

In Kendo UI MVC, you can use one action for all your data widgets (grid, combobox, etc.) and filtering is handled the same. However, when I try to use a kendo-ui JS widget to hit that same action, it passes the filtering differently. Why is that? How can I bridge that gap?

If you use MVC Combobox and post to action, the filtering gets sent as:

sort: Name-asc
page: 1
pageSize: 80
group:
filter: Name~contains~'manager'

 

If you use the JS Combobox and post to action, its sent as:

filter[logic]: and
filter[filters][0][value]: manager
filter[filters][0][field]: Name
filter[filters][0][operator]: contains
filter[filters][0][ignoreCase]: true

 

Because of this different structure, my action with signature:

public IActionResult QueryEntities([DataSourceRequest] DataSourceRequest request)

The request.Filters is always empty. How can I convert the js filter for combobox so my action can recognize it? And why are they handled differently anyway? I thought MVC version just wraps the JS version and generates the JS from server side code.

Andrew
Top achievements
Rank 1
 answered on 27 Sep 2017
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?