Telerik Forums
Kendo UI for jQuery Forum
1 answer
281 views
I have a grid, one of the columns is a dropdown which comes from another datasource.  When the grid goes into edit mode I select the dropdown.  However if I select the first item in the dropdown it's value is never retrurned.  If I select any other value it's fine, also if I select another value and then the first one it is also ok.  

My code is:
$("#memberGrid").kendoGrid({
                dataSource: dataSource,
                toolbar: ["create"],
                columns: [
                    { field: "LOGIN_NAME", title: "User Name", editor: userDropDownEditor, template: "#=LOGIN_NAME#" },
                    { command: ["edit", "destroy"], title: " ", width: "172px" }
                    ],
                editable: "inline",
            });

My template function is:
function userDropDownEditor(container, options) {
        $('<input required data-text-field="LOGIN_NAME" data-value-field="LOGIN_NAME" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: {
                    transport: {
                        read: '@Url.Action("GetAvailableUsers", "Role")'
                    }
                }
            });
    }

My Data source is:
var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action("GetUsersObjectInRole", "Role")' + "?roleName=" + roleName                        
                    },
                    create: {
                        url: '@Url.Action("AddUserToGroup", "Role")',
                        contentType: "application/json",
                        type: "POST"
                    },
                    parameterMap: function (data, operation) {
                        if (operation != "read") {
                            return JSON.stringify(data);
                        } else {                            
                            return JSON.stringify(data); //return stringified options to the server
                        }
                    }
                },
                schema: {
                    model: {
                        id: "LOGIN_NAME",
                        fields: {
                            LOGIN_NAME: { type: "string" },
                            GROUP_ID: {type: "number" }
                        }
                    }
                }
            });


If I check the value of the field in parameterMap it is always empty.  This is really weird, I can't see how it can be a code issue.  Thanks.
Alexander Valchev
Telerik team
 answered on 23 May 2013
5 answers
96 views
The URL value I've put on the node is "~/MyReport/Edit/1"

The URL I get when I hover over treeview icons on build 319 is:
"http://www.mydomain.com/MyReport/Edit/1"

The URL I get when I hover over treeview icons on build 514 is  
"http://www.mydomain.com/~/MyReport/Edit/1"

Clearly a bug has snuck in somewhere.

I've downgraded to 319 for now and it's all working fine.
Dimiter Madjarov
Telerik team
 answered on 23 May 2013
9 answers
259 views
I'm trying to implement a Scrollview that contains pages which in turn contain Scrollers, like this:

<div id="scrollview-container">
    <div data-role="scrollview" id="feed-scrollview">
        <div data-role="page" class="feed-item">
            <h2>header 1</h2>
            <p data-role="scroller">text to be scrolled</p>
        </div>
        <div data-role="page" class="feed-item">
         <h2>header 2</h2>
            <p data-role="scroller">other text</p>
        </div>
   more pages...
    </div>
</div>

The Scrollers become vertically scrollable/"swipeable" as expexcted, and the Scrollview is horizontally scrollable as expected, unless you try to swipe horizontally with the finger/pointer inside of the Scroller p-element. I.e., the scrollview works when swiping the header or the area around the Scroller.

Is it possible to achieve that when pointing/touching inside the Scroller, a vertical swipe will scroll the Scroller, and a horizontal swipe will scroll the scrollview? Or does anyone know a workaround/hack to make it work? 

Hope I'm expressing myself clear enough... it can get a little confusing with the similar terminology of scrollview/scroller...
Alexander Valchev
Telerik team
 answered on 23 May 2013
4 answers
1.2K+ views
Hi!

I want to select root node after treeview was loaded, like this
function treeview_databound(e) {
 
    var treeview = e.sender;
 
    var item = treeview.dataSource.get (id_root_node); // How do I determine root node?
    if (item) {
        var node = treeview.findByUid (item.uid);
        treeview.select (node);
    }
}
 
$("#splitted_tree_window_left").kendoTreeView({
     // ...
    dataBound  : treeview_databound,
});
How can I find treeview root node?
Maksim
Top achievements
Rank 1
 answered on 23 May 2013
4 answers
110 views
Hi,
As title mentions bindings seems not working anymore in my app after upgrade to 2013.1.514 version of Kendo UI. What I use is commonly documented
$(document).ready(function ($) {
  kendo.bind($("#view"), viewModel);
 });
Probably need to mention that these views are loaded with separate ajax calls and added to DOM dynamically using this function
loadExtPage: function (path) {
 //Use jQuery Ajax to fetch the template file
 var tmplLoader = $.get(path)
   .success(function (result) {
     //On success, Add page to DOM
     var index = new kendo.View($('<div />').html(result));
     layout.showIn("#content", index);
   })
}
Is there any changes to bindings what I should change in my code? This was working with 308 version...

EDIT: After further observations it seems binding happening - I added alert just after binding, and view reflects viewModel properties.... but as soon as I close alert binding to viewModel seems disappears...



Thanks,
Saulius

Petyo
Telerik team
 answered on 23 May 2013
1 answer
242 views
Hello,

I am developing an AJAX MVC web application with DB first entity model and am really struggling to get entities (and relationships) converted to Json objects to be displayed in a grid.

I have come up with a solution (as described below) which seems to be working, but I am looking for ideas or improvements on this solution.

I have explained the scenario using a simplified example below.

Simple Entity model

Application
ID
CountryID
Code
Name

Country
ID
Code
Name

ApplicationListVM

Contains properties to be displayed in the grid

    public class ApplicationListVM
    {
        public int ID { get; set; }
        public string CountryCode { get; set; }
        public string CountryName{ get; set; }
        public string ApplicationCode { get; set; }
        public string ApplicationName { get; set; }
    }


My grid declaration (razor)

@(Html.Kendo().Grid<ApplicationListVM>()
    .Name("Grid_Ajax")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("ReadApplicationList", "Application")) // Set the action method which will return the data in JSON format
    )
    .Columns(columns =>
    {
        columns.Bound(application => application.ID);
        columns.Bound(application => application.CountryCode);
        columns.Bound(application => application.CountryName);
        columns.Bound(application => application.ApplicationCode);
        columns.Bound(application => application.ApplicationName);
    })
    .Pageable()
    .Sortable()
)


ApplicationController

Controller with action method to return data to be displayed in the list

        public ActionResult ReadApplicationList([DataSourceRequest]DataSourceRequest request)
        {
            using (var businessEntities = new Entities())
            {
                businessEntities.Configuration.LazyLoadingEnabled = false;
              
                var dbApplications = (from application in businessEntities.Applications
                                    select new
                                    {
                                        ID = application.ID,
                                        CountryCode = application.Country.Code,
                                        CountryName = application.Country.Name,
                                        ApplicationCode = application.Code,
                                        ApplicationName = application.Name
                                    }).ToList();

                List<ApplicationListVM> applications = new List<ApplicationListVM>();

                foreach (var dbApplication in dbApplications)
                {
                    applications.Add(new ApplicationListVM
                        {
                            ID = dbApplication.ID,
                            CountryCode = dbApplication.CountryCode,
                            CountryName = dbApplication.CountryName,
                            ApplicationCode = dbApplication.ApplicationCode,
                            ApplicationName = dbApplication.ApplicationName
                        });
                }

                return Json(applications.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
        }



This appears to be working and the grid is loading data via AJAX as expected.

I tried loading just the Application entity in the action method, thinking that the related entity (Country) will be automatically loaded and returned in the Json string but the Country property was null!

Therefore, I tried to get around the entity relationships by using a ViewModel which combines the properties from various entities into a single class.


For sure there has to be a better and more efficient way of doing this instead of creating View Models to combine properties from various entities into a single class? How can I improve the solution above?


Thanks in advnace
JB
Atanas Korchev
Telerik team
 answered on 23 May 2013
6 answers
410 views
I can not get Kendo to load am an using coding from a demo but I get an error in the Javascript console.
Here is the error:
"Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container. kendo.all.min.js:32k.extend.initkendo.all.min.js:32s.extend.initkendo.all.min.js:33(anonymous function)kendo.all.min.js:33cjquery.min.js:3p.fireWithjquery.min.js:3b.extend.readyjquery.min.js:3H"

Any help would be great.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_main" Runat="Server">
<link href="./includes/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./includes/Kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="./includes/Kendo/js/jquery.min.js"></script>
<script src="./includes/Kendo/js/kendo.all.min.js"></script>

     <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Sources
            <ul>
                <li><a href="#secondview">Local View</a></li>
                <li><a href="../../content/mobile/view/remoteview.html">Remote View</a></li>
            </ul>
        </li>
    </ul>

    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Types
            <ul>
                <li><a href="#stretchview">Stretched View</a></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding: 50px 0; text-align: center;"><p>Hi, I'm a local view.</p></div>
</div>

<div data-role="view" id="stretchview" data-layout="mobile-view" data-title="Stretched View" data-stretch="true">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding-top: 50px; text-align: center;"><p>Hi, I'm a stretched view.</p><p>Use me for full screen content that doesn't need scrolling.</p></div>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</asp:Content>
Bach
Top achievements
Rank 1
 answered on 23 May 2013
0 answers
97 views
hey all 
ive got a dataseries here which looks like this

[{"MDetail":"Actual","Amount":2077015154,"Month":"Jan","Monthnum":1,"Year":2011,"d":"2011-1-1"},{"MDetail":"Budget","Amount":1993934548,"Month":"Jan","Monthnum":1,"Year":2011,"d":"2011-1-1"},{"MDetail":"Budget","Amount":2037512363,"Month":"Feb","Monthnum":2,"Year":2011,"d":"2011-2-1"},{"MDetail":"Actual","Amount":2079094248,"Month":"Feb","Monthnum":2,"Year":2011,"d":"2011-2-1"},{"MDetail":"Budget","Amount":2060363670,"Month":"Mar","Monthnum":3,"Year":2011,"d":"2011-3-1"},{"MDetail":"Actual","Amount":2081175424,"Month":"Mar","Monthnum":3,"Year":2011,"d":"2011-3-1"},{"MDetail":"Budget","Amount":2020760922,"Month":"Apr","Monthnum":4,"Year":2011,"d":"2011-4-1"},{"MDetail":"Actual","Amount":2083258683,"Month":"Apr","Monthnum":4,"Year":2011,"d":"2011-4-1"},{"MDetail":"Budget","Amount":2043637146,"Month":"May","Monthnum":5,"Year":2011,"d":"2011-5-1"},{"MDetail":"Actual","Amount":2085344027,"Month":"May","Monthnum":5,"Year":2011,"d":"2011-5-1"},{"MDetail":"Budget","Amount":2024808514,"Month":"Jun","Monthnum":6,"Year":2011,"d":"2011-6-1"},{"MDetail":"Actual","Amount":2087431458,"Month":"Jun","Monthnum":6,"Year":2011,"d":"2011-6-1"},{"MDetail":"Budget","Amount":2026835350,"Month":"Jul","Monthnum":7,"Year":2011,"d":"2011-7-1"},{"MDetail":"Actual","Amount":2089520979,"Month":"Jul","Monthnum":7,"Year":2011,"d":"2011-7-1"},{"MDetail":"Budget","Amount":2070696466,"Month":"Aug","Monthnum":8,"Year":2011,"d":"2011-8-1"},{"MDetail":"Actual","Amount":2091612592,"Month":"Aug","Monthnum":8,"Year":2011,"d":"2011-8-1"},{"MDetail":"Actual","Amount":2093706298,"Month":"Sep","Monthnum":9,"Year":2011,"d":"2011-9-1"},{"MDetail":"Budget","Amount":2114643361,"Month":"Sep","Monthnum":9,"Year":2011,"d":"2011-9-1"},{"MDetail":"Actual","Amount":2095802100,"Month":"Oct","Monthnum":10,"Year":2011,"d":"2011-10-1"},{"MDetail":"Budget","Amount":2137718142,"Month":"Oct","Monthnum":10,"Year":2011,"d":"2011-10-1"},{"MDetail":"Actual","Amount":2097900000,"Month":"Nov","Monthnum":11,"Year":2011,"d":"2011-11-1"},{"MDetail":"Budget","Amount":2118879000,"Month":"Nov","Monthnum":11,"Year":2011,"d":"2011-11-1"},{"MDetail":"Actual","Amount":2100000000,"Month":"Dec","Monthnum":12,"Year":2011,"d":"2011-12-1"},{"MDetail":"Budget","Amount":2079000000,"Month":"Dec","Monthnum":12,"Year":2011,"d":"2011-12-1"}]

the chart works great
EXCEPT: feb, oct and nov drop down to 0
and dec doesnt even show up

which is odd since all the other months look great
and the data looks consistent

any ideas?

you can see the chart here:
www.the-agora.com

toy
Top achievements
Rank 1
 asked on 22 May 2013
2 answers
103 views
hi
i have a dataSource that spits out data like this:
 
after feb - the 'budget' MDetail falls off to 0
and before jun - i dont know what the 'projected' MDetail does
its drawing a bunch of stuff
 
what im trying to achieve here is:
if there are no records for anything after feb
then dont draw anything - just cut it off
ie dont descend to 0
 
and likewise if there are no records for the beginning
then dont draw anything until theres a record for the category
ie it iwll be blank until jun and then the 'projected' numbers start drawing
 
how do i do this?
 
thanksa!

[{
Amount: "2140402000"
MDetail: "Budget"
Month: "Jan"
Monthnum: "1"
Year: "2013"
},
{
Amount: "2146823206"
MDetail: "Budget"
Month: "Feb"
Monthnum: "2"
Year: "2013"
},
{
Amount: "2257798847"
MDetail: "Projected"
Month: "Jun"
Monthnum: "6"
Year: "2013"
},
{
Amount: "2272474540"
MDetail: "Projected"
Month: "Jul"
Monthnum: "7"
Year: "2013"
}]

and the chart markup looks like htis
$J("#chart").kendoChart({
    dataSource: {
        data:source,
        group: {
            field: "MDetail",
            dir: "asc"
        },
        sort: [
            {field: "Year", dir: "asc"},
            {field: "Monthnum", dir: "asc"}
        ]
    },
    theme: "blueOpal",
    title: {
        text: "Total Cost of Workforce for " + year
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "area",
        format: "${0:0,000}"
    },
    series: [{
        field: "Amount",
        groupNameTemplate: "#= group.value # "
    }],
    valueAxis: {
        labels: {
            template: "#= kendo.format('$ {0:N0}', value / 1000000) # M"
        },
        majorUnit: 100000000,
        line: {
            visible: false
        },
        axisCrossingValue: -10
    },
    categoryAxis: {
        field: "Month",
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        format: "$ {0:0,000}"
    }
});


toy
Top achievements
Rank 1
 answered on 22 May 2013
2 answers
100 views
Hello!

I have chart with 2  axes.
Prior to data being pumped  into chart those 2 axes looked really jammed (see attach).
Once data is bound and chart is ploatted in looks perfect.  

Any recommendations how can I avoid  this creepy UI effect?

Here is chart definition:

 $("#chartISPbar").kendoChart({
                    title: {
                        text: "ISP latency and user distribution"
                    },
                    dataSource: ispDataSource,
                    autoBind: false,
                    legend: {
                        position: "bottom"
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "AVG responce time",
                        field: "AVG_ISP_ResponseTime",
                        axis: "responses"
                    },
                            {
                                name: "Number of requests",
                                field: "NumberOfRequests",
                                axis: "requests"
                            }

                    ],
                    categoryAxis: {
                        field: "ISP",                      
                        majorGridLines: {
                            visible: false
                        }

                    },
                    valueAxes: [
                        {
                            name: "responses",
                            title: { text: "latency (response time)" }
                        },

                    {
                        name: "requests",
                        title: { text: "users (# requests)" }

                    }
                    ],
                    tooltip: {
                        visible: true,
                        format: "N0",                    
                        template: "#= series.name #: #= value #",
                        padding: {
                            left: 100
                        }
                    }
                });

KendoUI ver: 2013.1.319
Browsers: FireFox 20.0.1, Chrome 26.0.1410.64 m
Olga
Top achievements
Rank 1
 answered on 22 May 2013
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
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
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?