Telerik Forums
Kendo UI for jQuery Forum
3 answers
613 views

I've tried to write a Cascading DropDownList with JSON data source but it failed. Here is the code:

 

<script>
    $(document).ready(function() {
      
        $("#p_year").kendoDropDownList({
            optionLabel: "Select Tax Year...",
            dataTextField: "YEARNAME",
            dataValueField: "YEARID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "pykirxb_payr_ln.p_json_read_year"                            
                }
            }
        });
  
  
        var data = [
            { text: "IR56E", REPORTID: "IR56E" },
            { text: "IR56F", REPORTID: "IR56F" },
            { text: "IR56G", REPORTID: "IR56G" }
        ];
  
        // create DropDownList from input HTML element
        $("#p_report_type").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "REPORTID",
            dataSource: data,
            index: 0
        });
          
          
        $("#p_sel_population").kendoDropDownList({
            cascadeFrom: "p_report_type",
            optionLabel: "Select Population...",
            dataTextField: "POPNAME",
            dataValueField: "POPID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "pykirxb_payr_ln.p_json_read_pop"                       
                }
            }
        });                  
           
    });
</script>
  
  
  
  
</div>
​

 

There are 3 DropDownList. DropDownList p_year and p_sel_population is using JSON. DropDownList p_report_type is using static value. 

Attached please find the p_year.json result file (i.e. pykirxb_payr_ln.p_json_read_year ) and p_sel_population.json result file (i.e. pykirxb_payr_ln.p_json_read_pop). I have validated the JSON content and they are correct.

 

Now. DropDownList P_YEAR and P_REPORT_TYPE work properly. However, the Cascading DropDownList P_SEL_POPULATION does not work. I guess it cannot retrieve the corresponding JSON content.

 

Any idea to solve it?

 

Thanks!

 

 

Georgi Krustev
Telerik team
 answered on 29 Jul 2015
1 answer
106 views

Hi Team,

 we are using Kendo grid for inline editing. it works as expected when I load the entire data from server. but when I am adding a new item using add new command I am fetching some strange behavior. Newly added item gets deleted.

 here is demo application where you can reproduce this issue.

http://plnkr.co/edit/X4ei0zPYiZ1H8AiCTy8B?p=preview

 and here are the steps to reproduce the issue:

1) Add new item with Id - 2 and update
2) Add new Item with Id - 3 and Update 

Now click on any Edit button for newly created items (Id-2). and then click the edit button (Id-3). now it would remove the item (id -2)...

I am expected here to cancel the old edit item.

can you help me what is wrong with my code or do you have any alternative solution for this problem.

 

Thanks-

Atul K.

Boyan Dimitrov
Telerik team
 answered on 29 Jul 2015
5 answers
385 views

i use the "kendo-panel-bar" wich works good with static data.

but, when i try to use "ng-repeat" everything breaks.

as a simple example to demonstrate this issue:

 

OK:
====

<ul kendo-panel-bar>
        <li>TITEL
            <ul>
                <li>
                ​TITEL 2
                    <ul><li>​test 1</li><li>​test 2</li></ul>
                </li>
            </ul>
        </li>
 </ul>​

 

NOT WORKING:

=============

 <ul kendo-panel-bar>
        <li>TITEL
            <ul>
                <li ng-repeat="d in dataSource._data">
                {{d.text}}
                    <ul><li>​test 2</li><li>​test 2</li></ul>
                </li>
            </ul>
        </li>
    </ul>​

 

How can i fix that? I need the dynamic and nested options.

Werner Haltner
Top achievements
Rank 1
 answered on 29 Jul 2015
1 answer
87 views

Hi Telerik- /KendoUI- Team!

 

I watched the Kendo UI July 2015 Release Webinar, so first of all you guys do a great job.

I read about the Kendo UI Developer Certification and now I wanted to know if there is a way to redeem Telerik Points to purchase for the Certification?

 

Best regards,

Serkan

Kyle Russell
Telerik team
 answered on 28 Jul 2015
8 answers
1.1K+ views
When loading data into a List View I need the list to scroll back to the top when a user leaves the view and then returns.

$('.km-scroll-container').css("-webkit-transform", "translate3d(0px, 0px, 0px)");

Has worked to allow the lists to appear to be reloaded at the start of the view but when scrolled the scroller jumps back to its previous point. 
Robby Parker
Top achievements
Rank 1
 answered on 28 Jul 2015
1 answer
206 views

hi everyone !

i have a problem. When i use dropdownlist in popup -> i change select value of dropdownlist -> click to button edit. But kendo not call event edit. It only call edit when me change sometextbox in popup.

this is my code of part edit:

edit: function(e) {
            console.log(e);
            jQuery(e.container)
                .find("input[name='zone_id']")
                    .data("kendoAutoComplete");
            e.container.kendoWindow("title", "[[.Edit_portal.]]");
            
            var dropdown = jQuery("#zone_id").kendoDropDownList({
                dataTextField: "name",
                dataValueField: "id",
                value: e.model.zone_id.id,
               
                change: function(){
                    e.model.zone_id.name=this.text();
                    e.model.zone_id.id = this._selectedValue;
                },
                optionLabel: "Select a zone ...",
                dataSource:{
                    transport: {
                        read: {
                            dataType: "json",
                            url: "/....",
                        }
                    }
                },
            });​

Boyan Dimitrov
Telerik team
 answered on 28 Jul 2015
2 answers
2.0K+ views

I have a simple grid  and I'm having a lot of  trouble collecting the PersonID when the edit button is clicked using JQuery. I need the  PersonID because I'm going to add a file upload to the inline edit column and i want to upload a file and associate it with the PersonID. All help welcome :)

 

Here's my simple grid:

@(Html.Kendo().Grid<GridCustomPopupTemplate.Models.Person>().Name("Grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.PersonID))
            .Read(read => read.Action("GetPersons", "Home"))
            .Update(up => up.Action("UpdatePerson", "Home"))
    )

    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID).Width(200);
        columns.Bound(c => c.Name);
        columns.Command(cmd => cmd.Edit());
    })

    .Pageable()
    .Sortable()
    .Editable(ed => ed.Mode(GridEditMode.InLine))
   .Events(ev => ev.Edit("doOnRowSelect"))  
)

 

<script type="text/javascript">

    function doOnRowSelect(e) {

         alert(The #PersonID# of the row which we are going to edit here....)

    }

</script>

Radoslav
Telerik team
 answered on 28 Jul 2015
1 answer
103 views

I am maintaining an existing application and today our customer reported that in Google Chrome, the content of a table is now not staying within its container.

I looked and did not see the issue but after updating Chrome to Version 44.0.2403.107 m, the issue appeared.

In the attached image, the blue line is where the grid actually ends and where its content *was* contained. Now, it bleeds out like the image shows.

I'm not sure what happened in Chrome, but the grid is now broken. We have not made any changes to the application.

I need a solution so the grid stays contained where it should be.

 

Thanks,

 Adam

Boyan Dimitrov
Telerik team
 answered on 28 Jul 2015
1 answer
528 views

I've created a snippet here: http://dojo.telerik.com/@jpenner/IMoWa

It's based on the Kendo UI grid demo for local data-binding. The difference is that I've replaced the dataSource's populated data array with an empty array.

When running this,

  1. Add one new item.
  2. Click Save.
  3. Add one new item.
  4. Click Save.
  5. Click Cancel.
  6. Watch as the first item is duplicated and you now have three rows.

You can even repeat and/or edit some of the rows and then click Cancel and it will duplicate even more. Do this enough times and you'll end up with 9960 rows in the grid. Please help! I've got a client complaining about this issue.

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
  <h1>Bug</h1>
    <ol>
    <li>Click "Add new record".</li>
    <li>Type in a product name.</li>
    <li>Click "Save Changes".</li>
    <li>Repeat steps 1-3 once more. This is important.</li>
    <li>After step 4, click "Cancel".</li>
    <li>Notice that you have three items instead of two.</li>
  </ol>
        <div id="example">
            <div id="grid"></div>
 
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        toolbar: ['create','save','cancel'],
                        editable: true,
                        dataSource: {
                            data: [],
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" }
                        ]
                    });
                });
            </script>
 
</div>
 
 
</body>
</html>

Boyan Dimitrov
Telerik team
 answered on 28 Jul 2015
13 answers
246 views

Hi, 

When the filter does no have any records for current week in the Scheduler, it shows following error in console and Scheduler will not work afterwords. 

"Uncaught TypeError: Cannot read property 'timeSlotRanges' of undefined"

 But this error occured only for current week and it doesn't show future or past weeks even if filter does not have any records.  

 Please check the demo application from below 

 http://dojo.telerik.com/@lilan123/UPuDE/6

 Any Idea? 

Thanks, 

Lilan

Lilan
Top achievements
Rank 2
 answered on 28 Jul 2015
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?