Telerik Forums
Kendo UI for jQuery Forum
2 answers
295 views

I have a grid with a column that has a filter template which is a dropdownlist. I am having trouble populating the data into the dropdownlist. What I want is to have the options be all of the unique values of all the records in that column. 

Side question: is there any easier way to populate the dropdownlist with the unique values of the columns? As this is the most logical contents to place in the dropdown, I would hope there may be some built in way?

What I'm trying to do is have it call a service that returns JSON specifying the options.

 

Below I have the 3 ways I've tried to code the data-column field based on google searches that led to very old topics on this forum, which is why I hope there is a simple way. The first 2 don't work but the third (hard coding it) does work.

1) This call hits the server and returns JSON but does not populate the dropdown.

           

{<br>                "field": "location_name",<br>                "title": "Location",<br>                "filterable": {<br>                    cell: {<br>                        template: function (args) {<br>                            args.element.kendoDropDownList({<br>                            dataTextField: "optionText",<br>                            dataValueField: "optionValue",<br>                            valuePrimitive: true,<br>                            dataSource: {<br>                                transport: {<br>                                    read: <br>                                        function(options) {<br>                                            $.ajax({<br>                                                type: "GET",<br>                                                url:  "/Patrol/Report.aspx/GetOptions",<br>                                                data: "d",<br>                                                contentType: "application/json; charset=utf-8",<br>                                                dataType: "json",<br>                                                success: function (msg) {<br>                                                    alert(msg.d); //this gets called successfully<br>                                                    return msg; //tried with and without the return<br>                                                }<br>                                            });<br>                                        }<br>                                }<br>                            }<br>                        });<br>                    },<br>                    showOperators: false<br>                }<br>            }

2) This call doesn't hit the server at all

            {
                "field": "location_name",
                "title": "Location",
                "filterable": {
                    cell: {
                        template: function (args) {
                            args.element.kendoDropDownList({
                            dataTextField: "optionText",
                            dataValueField: "optionValue",
                            valuePrimitive: true,
                            dataSource: {
                                transport: {
                                    read: {
                                        dataType: "jsonp",
                                        url: "/Patrol/Report.aspx/GetOptions",
                                    }
                                }
                            }
                        });
                    },
                    showOperators: false
                }
            }

 

 

3) Hard coding the datasource data: This works correctly

            {
                "field": "location_name",
                "title": "Location",
                "filterable": {
                    cell: {
                        template: function (args) {
                            args.element.kendoDropDownList({
                            dataTextField: "optionText",
                            dataValueField: "optionValue",
                            valuePrimitive: true,
                            dataSource: 
                                [{"optionText": "HP","optionValue": "HP"}, {"optionText": "Loc2","optionValue": "ID2"}]
                        });
                    },
                    showOperators: false
                }
            }

Tom
Top achievements
Rank 1
 answered on 04 Oct 2016
3 answers
75 views

Hello,

the problem exists only with the pdf export button icon. The excel export button icon is rendered correctly.

I was able to reproduce the problem on your demos page with Chrome and IE: Kendo Grid / PDF export / select bootstrap theme.

How can this be fixed?

 

Best regards,

Kaan

Rumen
Telerik team
 answered on 04 Oct 2016
1 answer
189 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
356 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
569 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
289 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
622 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
895 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
307 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
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?