Telerik Forums
Kendo UI for jQuery Forum
2 answers
292 views
I set up a Kendo MaskedTextbox for a phone number field, like so:

 

$input.kendoMaskedTextBox({
  mask: '000-000-0000',
  pattern: '\\d*'
});

Nothing crazy going on there. It works as designed, i.e. when typing in numbers or pasting a phone number or filling the field with jQuery, it will remove non-numeric characters and format it with the hyphens.

The problem I'm running into is with a tool called Dashlane, which is a password/autofill utility. When I choose a phone number that was saved in Dashlane to populate my phone field, Dashlane has the number saved as "1234567890" and that is what gets put into the masked textbox.

The Kendo mask does not seem to account for this type of input. I'm guessing the Dashlane extension is manually setting the `value` property of the DOM element, which is not triggering a keyboard event or something. I think it is triggering the `onchange` event, though. Seems like the Kendo mask may need to watch for value changes as well. After DL updates the value, the field doesn't mask it and the mask is just straight-up broken after that.

Has this ever been brought up before? Has anyone else encountered this problem? Is there anything I can do to make sure the mask doesn't get broken using Dashlane's autofill?

Steven
Top achievements
Rank 1
 answered on 19 Apr 2016
4 answers
309 views

Hi,

Below is my code in which URL is not routing to Controller page.Here domain is my local system URL.there is a div tag with id = detailId.trim() (detailID value is dynamically created while loading the web page).Can someone help me here.

 function detailInit(e) {
    
        var detailRow = e.detailRow;
        var detailId = detailRow.find(".catNumber").text();

   var dataSource1 = new kendo.data.DataSource({
            transport: {
                read: {
     url: domain + "Ethno/GetMediaMetaData",
                    data: { id: '' + detailId.toString() },
                    dataType: "json"
                   
                }
            },
           
            parameterMap: function (options) {
                return kendo.stringify(options);
            }
        });
      
            $("#detailListView_" + detailId.trim()).kendoListView({
                dataSource: dataSource1,
            template: kendo.template($("#detailMediaTemplate").html()),
            selectable: true,
            change: onChange
        });
        
    }

Jayaram
Top achievements
Rank 1
 answered on 19 Apr 2016
1 answer
216 views

I'm trying to set up some PDF exporting for an application running on an IBM Domino server. I'm trying use the DejaVu font stored locally, and whenever I try to generate the PDF the GET request for the font appends ?v=1.1 to the end and apparently this server does not like that; gives a 'Bad Request" error. Is there an API way I can not have the ?v=1.1 append to the GET request? Or can I use the long form of jquery ajax call so I can specify url as parameter rather than using .then()?

Example code: (pretty much the same as the online demo example)

// Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "PDF-Sample.pdf"
            });
        });

Example GET request when code above is executed:

https://servername/path/fonts/DejaVu/DejaVuSans-Bold.ttf?v=1.1

 

Alan
Top achievements
Rank 1
 answered on 19 Apr 2016
2 answers
318 views

I'm having some issues trying to call the update from my DataSource when the text inside a binded textarea is changed and the Save button is clicked which has the class of "k-update-button".

I'm not sure what I'm doing wrong here.

 

Here is my observable model:

var sectionViewModel = kendo.observable({
        sectionId: $("#Id").val(),
        sectionDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/policy/policy/GetSectionsByPolicyId",
                    dataType: "json",
                    type: "GET",
                    data: {
                        Id: $("#Id").val()
                    },
update: {
                    url: "/policy/policy/SectionEdit",
                    type: "POST",
                    dataType: "json",
                    data: function (data) {
                        return kendo.getAntiForgeryTokens();
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false, nullable: true },
                        PolicyId: { type: "number", editable: false },
                        Title: { type: "string" },
                        Body: { type: "string" },
                        DisplayOrder: { type: "number", editable: false },
                        Finalized: { type: "boolean", editable: false },
                        Active: { type: "boolean", editable: false },
                        CreateDate: { type: "date", editable: false },
                        CreateByDisplay: { type: "string", editable: false },
                        LastModDate: { type: "date", editable: false },
                        LastModByDisplay: { type: "string", editable: false }
                    }
                },
                errors: "errorMsg"
            },
            error: function (e) {
                toastr.options = {
                    "positionClass": "toast-bottom-full-width"
                };
                toastr.error("There was an error: " + e.errors, "Uh, Oh!");
                this.cancelChanges();
            }
        })
    });
 
    kendo.bind($("#policySectionListView"), sectionViewModel);

 

And here is the kendo editor template that I am currently using:

<div id="policySectionListView"
     data-role="listview"
     data-template="policySectionTemplate"
     data-edit-template="policySectionEditTemplate"
     data-bind="source: sectionDataSource"></div>
 
<script type="text/x-kendo-tmpl" id="policySectionEditTemplate">
            <div class="panel panel-default policy-section-panel" data-id="#:Id#">
                <div class="panel-heading">
                    <div class="btn-group pull-right" style="margin-top: -10px;" role="group" aria-label="...">
                        <button id="testbutton" type="button" class="btn btn-link btn-link-alt k-update-button" data-toggle="tooltip" title="Save Changes">
                            <span class="fa fa-floppy-o"></span> Save
                        </button>
                        <button type="button" class="btn btn-link btn-link-alt k-cancel-button" data-toggle="tooltip" title="Cancel">
                            <span class="fa fa-close"></span> Cancel
                        </button>
                    </div>
                    <h3 class="panel-title">
                        #: Title #
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="policy-section-content">
                        <input type="text" class="k-textbox" style="width: 100%" data-bind="value:Title" />
                        <textarea class="k-textbox" name="Body"
                                  data-role="editor"
                                  data-bind="value:Body"
                                  style="height: 400px;"></textarea>
                    </div>
                </div>
                <div class="panel-footer">
                    <div style="display: inline-block;">
                        Last Modified by #: LastModByDisplay # on #= kendo.toString(LastModDate, "G") #
                    </div>
                </div>
            </div>
        </script>

 

From what I have seen online, when the button with a class of 'k-update-button' is clicked then the update should be called automatically if any of the binded elements have been changed. However, that doesn't seem to be working here or I am doing something wrong.

Austin
Top achievements
Rank 1
 answered on 19 Apr 2016
2 answers
114 views

I have the following set up:

    var documentListDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                debugger;
                var fnum = editData != null ? editData.Number : '';
                var vrid = editData != null ? editData.FormVersionId : 0;
                $.ajax({
                    url: '@Url.Action("GetFormDocumentList", "Form")',
                    dataType: "json",
                    async: false,
                    type: "POST",
                    data: { formNumber: fnum, formVersionId: vrid },
                    success: function (data) {
                        options.success(data);
                    }
                });
            }
        }
    });

 

    function initDocumentGrid() {
        $("#DocumentGrid").kendoGrid({
            dataSource: documentListDataSource,
            navigatable: true,
            selectable: "row",
            columns: [{
                field: "Format",
                title: "Format",
                width: 150
            }, {
                field: "Name",
                title: "File Name",
                width: 150
            }, {
                title: "Actions",
                template: function (dataItem) {
                    return BuildDocumentActionButtons(dataItem);
                }
            }]

        });
    }

    function BuildDocumentActionButtons(dataItem) {
        var retval = '';


        if (dataItem.Extension == "xpd") {
            // interactive mapping button
            //retval += "<button class='k-button k-button-icontext' onclick='OpenMappingWindow();'>Conversion Map</button>"
        }
        if (retval.length > 0) retval += ' &nbsp; ';
        // upload document button - always rendered
        retval += "<button class='k-button k-button-icontext' onclick='OpenUploadWindow(" + datItem.Extension + ");'>Upload</button>"
        //if (dataItem.Name != "") {
        //    retval += ' &nbsp; ';
        //    // toggle availability button
        //    retval += "<button class='k-button k-button-icontext' onclick='ToggleAvailability(" + datItem.Name + ");'>Availability</button>"
        //    retval += ' &nbsp; ';
        //    // remove document button
        //    retval += "<button class='k-button k-button-icontext' onclick='RemoveDocument(" + datItem.Name + ");'>Remove</button>"
        //}
        return retval;
    }


When retval returns button definitions, the following call fails with no error:

$("#DocumentGrid").data("kendoGrid").dataSource.read();

 

I am doing something wrong, but am missing it.

 

Any assistance would be most appreciated.

 

Dimiter Madjarov
Telerik team
 answered on 19 Apr 2016
3 answers
676 views

I have a requirement that I need to be able to "paste" a value (via key event) into a grid cell that contains a dropdown list. Then I need to do a lookup for that value in the display text of the list (the "search" function I believe) and set the dropdown list accordingly.

I have trapped the keydown event for ctrl-v and have found the currentCell. I am trying to do something like this:

    var dropDownList = currentCell$.find("input").data("kendoDropDownList");

   dropdownList.search("K2");

However, this does not seem to work. It seems like the search function only works if the dropdown list is actually open rather than just the cell being selected. Not sure what I am missing. Also tried adding grid.editCell(currentCell) before it without much luck.

Can you tell me where I am going wrong?

 

Boyan Dimitrov
Telerik team
 answered on 19 Apr 2016
4 answers
195 views

Hi! I need to be able to create graphs in multiple panes. But when I define an area chart in a second pane the colors stay above the line. I need it to stay under so that it makes more sense. 

 

I'll leave an atachment with an example

 

Any help?

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 19 Apr 2016
3 answers
4.4K+ views

Hello,

I would like to select a row by his model ID :

    model : { id: "ID" }.

I also need the grid to focus the selected row's page (the page size is 20).

 

The case is :

I have 2 grids, when I click in a row of the second grid, the selected row of the second grid should be selected and focused on the first grid (they got the same id).

 

Is it possible?

 

Thank you.

Viktor Tachev
Telerik team
 answered on 19 Apr 2016
3 answers
157 views

I have made this very simple example which refuses to work: http://dojo.telerik.com/OtIhA

I keep getting "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined". 

Curiously, changing 'kendoDiagram' to 'kendoGrid' works perfectly. So why does this data source work with Grid but not Diagram, and how can I get it to work? 

Daniel
Telerik team
 answered on 19 Apr 2016
1 answer
174 views

Hello,

I am trying to find a way to make Datapoint drag and dropable with the Scatter Chart.

http://docs.telerik.com/kendo-ui/controls/charts/chart-types/scatter-charts

I would like to have the following scenario:

Scatter Chart is rendered. A User chooses a data point and drags it somewhere on the chart. The user drops the data point and this datapoint is then saved to the underlying data source (in this case a SharePoint list).

Is this possible to achieve? I think there is not standard functionality included but I would like to know if there is a proper approach to develop this myself.

Iliana Dyankova
Telerik team
 answered on 19 Apr 2016
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?