Telerik Forums
Kendo UI for jQuery Forum
3 answers
352 views

Hi,

I am using NumericTextbox in a web application, when testing it on desktop chrome its' working fine but on Android's Chrome(samsung s4) and IOS's Safari (iPhone 6 plus)it behave very strangely. as

1- Alphanumeric keyboard is showing and user can enter any char. including alphabets 

2- Max attribute is not working

3- Format is not applying

Here is my declaring code:

<input data-role="numerictextbox"  data-format="n0" data-min="0" data-max="100" />

Thanks

Himad
Top achievements
Rank 1
 answered on 04 Oct 2016
5 answers
1.5K+ views
Hello,
after many sufferings with Asp.Net Mvc helpers, I've finally understood that if I define a Javascript KendoGrid i'm able to define custom command buttons without altering the grid behaviour:
"command": [
    {
        "name": "edit",
        "buttonType": "ImageAndText",
        "iconClass": "fa",
        "imageClass": "fa-edit",
        "text": {
            "cancel": "",
            "update": "",
            "edit": ""
        }
    },
    {
        "name": "mydelete",
        "buttonType": "ImageAndText",
        "text": "",
        "imageClass": "fa-trash-o",
        "className": "my-delete-button",
        "iconClass": "fa",
        "click": function (e) {
            $(e.target).confirmation('show');
        }
    }
]

As you can see I want to customize my buttons with FontAwesome, white icons.

Now the point is that I'm still not able to change the icons on the two buttons (save changes and cancel edit) that appears when creating or editing a row.

How do I handle it?

Thanks







Stefan
Telerik team
 answered on 04 Oct 2016
1 answer
552 views

We are in research for a controls which supports Track Changes features same as the track changes in MS Word.
Our application is developed in MVC and we are trying to get a Kendo UI control which supports Track Changes features.

Our requirement details in brief:
- The control should be compatible with MVC architecture.
- It should support Text editor basic features.
- It should support Track Changes for any changes made by User in the text editor.
- It should keep the history of changes made by each Users who have changes the text for any purpose.
- Popup comments are required for each changes including text formatting such as (bold, italic, underline, strikethrough and ordered\unordered list).
- It should also have the functionalities for Undo-Redo changes and Accept/Reject changes.
- Features should be able to extent\customize using JQuery or other scripting methods.

Below are the list for features expected from the control.
1. Tracking Changes Feature
2. Text Insert
3. Text Delete
4. Text Format Bold
5. Text Format Italic
6. Text Format Underline
7. Text Format Strikethrough
8. Text Format Fore color
9. Text Format Back color
10. Text Format Unordered List
11. Text Format Ordered List
12. Reject Changes
13. Undo Changes
14. Redo Changes
15. Display Comment on Hovering over changes

Rumen
Telerik team
 answered on 04 Oct 2016
2 answers
284 views

I've downloaded this project, because I would like to implement batch edit with popup window edit. And instead of mvc wrapper I used javascript for grid code. 

The mvc wrapper code and javascript code are equivalent. However, it seems that 'e.stopImmediatePropagation();' does not allow for grid 'change' event to occur. Yet it perfectly works when code is written in wrapper.

What I am missing? Or it is expected behaviour?

 

http://www.telerik.com/support/code-library/external-editing-container-for-batch-editable-grid

Mantas
Top achievements
Rank 1
 answered on 04 Oct 2016
3 answers
616 views

Hello,

In the example http://dojo.telerik.com/IdUMu I am trying to have a radio buttons group inside a grid. You can see this is not working. This is the same example http://dojo.telerik.com/oPidE but without class='k-radio-label' and class='k-radio' on the label and on the input type=radio.

 

Can you tell me how to achieve the same behaviour as the working example but with the styling of the kendo radio button.

Thanks.

 

Ianko
Telerik team
 answered on 04 Oct 2016
3 answers
890 views

Hi ,

Want the call the action each time I click the tab , Below is my code its not working , Please help

 

 

@(Html.Kendo().TabStrip()
              .Name("Information")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Tab 1")
                  .Selected(true).Content(@<text> @Html.Action("one", "Home")</text>);

                  tabstrip.Add().Text("Tab 2 ")
               .Content(@<text> @Html.Action("two", "Home")</text>);                 

              })
             .Events(e => e.Select("reloadTab"))
           
              )

<script type="text/javascript">
        function reloadTab(e) {
            //clear the current content of the tab before it's displayed to force the tabStrip to load it
            var ts = $("#Information").data().kendoTabStrip;
            ts.tabGroup.on('click', 'li', function (e) {
                ts.reload($(this));
            });
        }
</script>

 

 

Arun

Ivan Danchev
Telerik team
 answered on 04 Oct 2016
2 answers
301 views

So I edited a dojo example to cause the behavior. The selections / ignores work fin in the code provided. Once you turn on the handle options to different handles even you no longer can select the items in the sub lists. Any ideas? Thanks in advance. 
-Todd

<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
 
    <ul id="parent">
        <li class="list-item"><span class="handler"></span><div><label>Apples</label></div></li>
        <li class="list-item"><span class="handler"></span><div><label>Grapefruits</label></div></li>
        <li class="list-item">
            <span class="handler"></span><div>
                <label>group</label>
                <ul class="nested">
                    <li class="sub-list-item">
                    <span class="subhandler"></span>Cranberries</li>
                    <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>
                    <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>
                </ul>
            </div>
        </li>
        <li class="list-item">
            <span class="handler"></span>group2
            <ul class="nested">
                <li class="sub-list-item"><div><span class="subhandler"></span>Cranberries</div></li>
                <li class="sub-list-item"><span class="subhandler"></span>Pineapples</li>
                <li class="sub-list-item"><span class="subhandler"></span>Strawberries</li>
            </ul>
        </li>
    </ul>
    <style>
        .handler {
            width: 16px;
            height: 16px;
            background-color: #FF0000;
            display: inline-block;
        }
 
        .subhandler {
            width: 16px;
            height: 16px;
            background-color: #FFFF00;
            display: inline-block;
        }
    </style>
    <script>
    function placeholder(element) {
      return $("<li style='color: red;' class='list-item' id='placeholder'>Drop Here!</li>");
    }
 
    $("#parent").kendoSortable({
      filter: ">li.list-item",
      //handler: '.handler', //Uncomment this line
      ignore: ".nested>li", //ignore nested list-items
      placeholder: placeholder
    });
    $(".nested").kendoSortable({
      //handler: '.subhandler', //And uncomment this line and the sorting will no longer work...
      filter: ".sub-list-item",
      placeholder: placeholder
    });
    </script>
</body>
</html>

 

Alexander Valchev
Telerik team
 answered on 03 Oct 2016
10 answers
516 views

Using the HTML5 verison of Kendo UI in a grid. Many grid cells need a DropDownList, which I can populate with data no problem.

I cannot however filter the second DropDownList based off the first one. I have been through all the examples but nothing works.

I need to understand why my second dropdown is not filtering from the first one. What am I doing wrong?

 

001.function loadNigoIssueGrid(frm) {
002.        var legendText = "grdNigoIssueDelv";
003.        grd = plUtil.initGrid(legendText, frm, "3px");
004.        var modelData = gridData;
005.        var dataSource = new kendo.data.DataSource({
006.            transport: {
007.                read: function (e) {
008. 
009.                    var dsData = modelData;
010.                    e.success(dsData);
011.                },
012.                destroy: function (e) {
013.                    e.success();
014.                }
015. 
016.            },
017.            batch: true,
018.            schema: {
019.                data: "nonRiskRequirements",
020.                model: {
021.                    fields: {
022.                        WorkType: { type: "string" },
023.                        SubType: { type: "string"},
024.                        Name: {  },
025.                        Reason: {  },
026.                        Notes: {  },
027.                        Result: {  },
028.                        Critical: {  type: "boolean" },
029.                        Applicant: { type: "boolean" },
030.                        Insured: {  type: "boolean" },
031.                        Policyowner: { type: "boolean" },
032.                        Payor: {  type: "boolean" },
033.                        Producer: {  type: "boolean" },
034.                        ProviderName: {  }
035.                    }
036.                }
037.            }
038.        });
039.        grd.kendoGrid({
040.            columns: [
041.                { field: "WorkType", title: "Work Type", width: "134px", editor: workTypeDropDown },
042.                { field: "SubType", title: "Sub Type", width: "134px", editor: issueSubTypeDropdownList },
043.                { field: "Name", width: "134px" },
044.                { field: "Reason", width: "136px", editor: bindReasonTypeDropDown, template: "#=Reason#" },
045.                { field: "Notes", width: "136px" },
046.                { field: "Result", width: "136px" },
047.                { field: "CriticalFlag", width: "136px", template: '#if (CriticalFlag) {#<input type="checkbox" #= CriticalFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
048.                { field: "RequiredSignatureApplicantFlag", width: "136px", template: '#if (RequiredSignatureApplicantFlag) {#<input type="checkbox" #= RequiredSignatureApplicantFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
049.                { field: "RequiredSignatureInsuredFlag", width: "136px", template: '#if (RequiredSignatureInsuredFlag) {#<input type="checkbox" #= RequiredSignatureInsuredFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
050.                { field: "RequiredSignaturePolicyOwnerFlag", title: "Policy Owner", width: "136px", template: '#if (RequiredSignaturePolicyOwnerFlag) {#<input type="checkbox" #= RequiredSignaturePolicyOwnerFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
051.                { field: "RequiredSignaturePayorFlag", width: "136px", template: '#if (RequiredSignaturePayorFlag) {#<input type="checkbox" #= RequiredSignaturePayorFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
052.                { field: "RequiredSignatureProducerFlag", width: "136px", template: '#if (RequiredSignatureProducerFlag) {#<input type="checkbox" #= RequiredSignatureProducerFlag ? "checked=checked" : "" # class="chkbx"></input>#}#' },
053.                { field: "ProviderName", title: "Provider Name", width: "136px" },
054.                { command: [{ text: "Delete", className: "pl-grid-delete-command", template: "<a class='k-button k-button-icontext pl-grid-delete-command'><span class='k-icon k-delete'></span>Delete</a>" }], width: "100px" }
055. 
056.            ],
057.            dataSource: dataSource,
058.            sortable: { allowUnsort: false },
059.            filterable: true,
060.            selectable: "row",
061.            scrollable: true,
062.            editable: true,
063.            toolbar: [
064.            { name: "Add", className: "k-grid-addWork", id: "k-grid-addWorks" },
065. 
066.             
067. 
068.            ],
069.            change: function (e) {
070.            }
071.        });
072.    }
073. 
074.    var workTypeDataSource = [
075.            { DisplayText: "NIGO", WorkType: 1 },
076.            { DisplayText: "ISSUE", WorkType: 2 },
077.            { DisplayText: "DELV", WorkType: 3 }
078.        ];
079. 
080.    var workSubType = [
081.            { DisplayText: "BUSJU", WorkType: 1 },
082.            { DisplayText: "GENERAL", WorkType: 1 },
083.            { DisplayText: "HIPAA", WorkType: 1 },
084.            { DisplayText: "ILLUSTRATN", WorkType: 1 },
085.            { DisplayText: "MEDINFO", WorkType: 1 },
086.            { DisplayText: "QUOTE", WorkType: 1 },
087.            { DisplayText: "REG60", WorkType: 1 },
088.            { DisplayText: "RELEASE", WorkType: 1 },
089.            { DisplayText: "REPLACEMNT", WorkType: 1 },
090.            { DisplayText: "TIA", WorkType: 1 },
091.            { DisplayText: "TICKET", WorkType: 1 },
092.            { DisplayText: "EFT", WorkType: 3 },
093.            { DisplayText: "GENERAL", WorkType: 3 },
094.            { DisplayText: "HIV", WorkType: 3 },
095.            { DisplayText: "ILLUSTRATN", WorkType: 3 },
096.            { DisplayText: "MEDICAL", WorkType: 3 },
097.            { DisplayText: "PREMALLOC", WorkType: 3 },
098.            { DisplayText: "QUOTE", WorkType: 3 },
099.            { DisplayText: "SIGNAMEND", WorkType: 3 },
100.            { DisplayText: "SIGNAPP", WorkType: 3 },
101.            { DisplayText: "SIGNAPP2", WorkType: 3 },
102.            { DisplayText: "SIGNAVIATN", WorkType: 3 },
103.            { DisplayText: "SIGNAVOCTN", WorkType: 3 },
104.            { DisplayText: "SIGNRECPT", WorkType: 3 },
105.            { DisplayText: "SIGNTRAVEL", WorkType: 3 },
106.            { DisplayText: "SOH", WorkType: 3 },
107.            { DisplayText: "TRUST", WorkType: 3 },
108.            { DisplayText: "GENERAL", WorkType: 2 },
109.            { DisplayText: "ILLUSTRATN", WorkType: 2 },
110.            { DisplayText: "QUOTE", WorkType: 2 },
111.            { DisplayText: "SOH", WorkType: 2 },
112.            { DisplayText: "SUITBLTY", WorkType: 2 }
113.        ];
114. 
115.    function workTypeDropDown(container, options) {
116.        jq('<input name="WorkType" id="WorkType" data-text-field="DisplayText" data-field-value="DisplayText" data-bind="value:' + options.field + '"/>')
117.            .appendTo(container)
118.            .kendoDropDownList({
119.                dataSource: workTypeDataSource,
120.                dataTextField: "DisplayText",
121.                dataValueField: "DisplayText"
122.            });    
123.    }
124. 
125.    function issueSubTypeDropdownList(container, options) {
126.        jq('<input name="SubType" data-text-field="DisplayText" data-field-value="DisplayText" data-bind="value:' + options.field + '"/>')
127.            .appendTo(container)
128.            .kendoDropDownList({
129. 
130.                dataSource: workSubType,
131.                dataTextField: "DisplayText",
132.                dataValueField: "DisplayText",
133.                cascadeFrom: "WorkType"
134.            });
135.    }

Peter Milchev
Telerik team
 answered on 03 Oct 2016
1 answer
1.6K+ views

I'm having trouble getting the read using a POST in a kendo.data.DataSource working.  It works fine for me using jQuery's $.ajax function, but not in the transport.read of Kendo's DataSource.

Here is the code running:

http://jsfiddle.net/jmowox1k/1/

It makes two Ajax calls, the first using jQuery way and the second using the Kendo way.  It sends the data as "application/x-www-form-urlencoded; charset=UTF-8".

The submitted form data is:

PropertyNumber=123&Address=1313+Mockingbird+Lane&AtRisk=Yes&FuelFacility=No&PropertyName=The+Munsters&City=Los+Angeles&Rec=Yes&DryCleaner=No&DCType=2&State=CA&OngoingEnv=1&ProjectType=2

I've attached two screenshots of Chrome's Developer Tools.  Using jQuery, it looks perfect, but using the Kendo DataSource, it's all mangled.

I guess I can just use the jQuery way and everything would fine, but I want to understand why recommended way doesn't work.

What am I doing wrong?

 

Stefan
Telerik team
 answered on 03 Oct 2016
5 answers
431 views
Hello,
Telerik team,

I am facing an issue while I am setting the maximum and minimum value of the slider, If i set minimum value as 0 and maximum value as 40000000 the page doesn't load at all. Here is the code below :

 var MInvestmentTarget = $("#MInvestmentTarget").kendoSlider({   
                    min: 0,
                    max: 40000000,
                    tickPlacement: "none",
                    showButtons: false
                }).data("kendoSlider"),
                    MInvestmentTarget = function (e) {
                        if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                            var value = parseInt($("#InvestmentTargettxtBoxValue").val());
                            if (isNaN(value) || value < 0 || value > 40000000){
                                alert("Value must be a number between 0 and 40000000");
                                return;
                            }
                            MInvestmentTarget.value(value);
                        }
 }; 

The page takes a long time to load in any of the browser and finally it crashes.

If I give the maximum value as 4000000, it works perfectly fine. The page loads properly.

So I want to know if there is a limit on the Maximum value that can be given for the slider ?
Or is it a mistake in the code which is causing this error.

Awaiting your response

Thanks 
Pavan
                   
Tony
Top achievements
Rank 1
 answered on 03 Oct 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
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
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
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
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?