Telerik Forums
Kendo UI for jQuery Forum
1 answer
194 views

Hello,

I was trying to work with the data-detail-template of the grid and it works fine but I don't know how to setup the binding for the create,edit,... events.
For the main rows it's now problem the events fire like they should be.
And what is even stranger is that the delete event works for the data-detail-template but not for create or edit.

There is something with the bindings I don't understand...

You can find the code here http://dojo.telerik.com/aZugI/8

Thanks in advance

Stefan
Telerik team
 answered on 04 Oct 2016
3 answers
366 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.6K+ 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
585 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
301 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
637 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
904 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
322 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
542 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
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?