Telerik Forums
Kendo UI for jQuery Forum
0 answers
179 views
Hi,

i got the issue that when navigating to an external view a jscript error is thrown complaining that data for a binding could not be found.
-- Uncaught Error: Unable to parse bindings. Message: ReferenceError: Username is not defined; Bindings value: value: Username  
--

This happens when the user tries to navigate to an external page like "/Studies/List/".

Actually I use kendo.bind to display the data on the view (but it's the same problem with knockout).

Basically my Views look like this:

--
<div data-role="layout" data-id="buttons" >
        <header data-role="header">
            <div data-role="navbar">                
                <span data-role="view-title"></span>
             </div>
        </header>        
        <!--View content will render here-->                  
    <footer data-role="footer">
        <div data-role="tabstrip">
        <a href="#home" data-icon="home">Home</a>
            <a href="#details" data-icon="home">Locale View</a>
            <a href="@( Url.Content("~/Studies/List") )" data-icon="mostrecent">External</a>
        </div>
    </footer>
    </div>

<div data-role="view" data-title="Home" data-layout="buttons" id="home">
    <div id="dataView">
    <span data-bind="text: name"></span>, <span data-bind="text: vorname"></span>
    </div>
</div>

<div data-role="view" data-title="Details" data-layout="buttons" id="details">
    <span data-bind="text: name"></span>
</div>
--

and here is the minimal JScript for it:

<script type="text/javascript">
var app = new kendo.mobile.Application(document.body, {
    transition: 'slide'
});


var data = kendo.observable({
    name: "LastName",
    vorname: "FirstName"
});

kendo.bind($("#dataView"), data);
kendo.bind($("#details"), data);
</script>

--


so, whenever the user is in the home screen (v1) hits the 3rd tab-button and the "external" view (v2) is loaded, v2 is never displayed because jscript complains about the missing data that is bound in v1.

Really strange. Did I mention that it doesn't matter if you use kendo.bind or the knockout-version? It doesn't, so i guess it's a problem from either the views or the application (or all two both :) )
Does anyone have a guess on how to solve this?

Up to now i tried to remove the bindings when navigating away with data-hide  ( ko.cleanNode() ) but that does not help.
Setting the attr "data-bind" to "" could work but that's indiscutable.

Any help would be really great.
RedTears75
Top achievements
Rank 1
 asked on 10 Oct 2012
1 answer
111 views

I have a simple class that has a class as one of it's properties.  I am trying to use the grid to both display the properties and allow in-line editing.  If I don't use default values and I try to edit I get "Microsoft JScript runtime error: Syntax error, unrecognized expression: [data-container-for=Person.PersonId].

If I do use default values I get "Cannot serialize objects of type Person" when I load the page.

Help would be greatly appreciated since I haven't been able to find any information.

-Kerry

Here's the code

class User
{
    int UserId;
    string LoginName;
    Person person;
}

class Person
{
    int PersonId;
    string FirstName;
    string LastName;
    string Email;
}

 

<%

 

= Html.Kendo().Grid<UserDto>()

 

.Name("UserListGrid")

.DataSource(ds => ds.Ajax()

.Update(update => update.Action("AjaxSaveUser", "User"))

.Destroy(destroy => destroy.Action("AjaxDeleteUser", "User"))

.Create(create => create.Action("AjaxInsertUser", "User"))

.Read(read => read.Action("List", "User"))

.Model(model => model.Id(m => m.UserId))

.Model(model => model.Field(m => m.UserId).Editable(false))

.Events(e => e.Error("grid_OnError"))

)

.Columns(col =>

{

col.Bound(us => us.UserId).Title("ID");

col.Command(us => us.Edit());

col.Bound(us => us.LoginName).Title("Login");

col.Bound(us => us.Person.PersonId).Hidden();

col.Bound(us => us.Person.LastName).Title("Last Name");

col.Bound(us => us.Person.FirstName).Title("First Name");

col.Bound(us => us.Person.Email).Title("Email");

col.Command(us => us.Destroy());

})

.ToolBar(commands => commands.Create().Text("Add User"))

.Editable(edit => edit.Mode(GridEditMode.InLine))

%>

Alexander Valchev
Telerik team
 answered on 10 Oct 2012
0 answers
391 views

Hello,

I'm trying to tweak my combo box for optimum performance but what I'm trying to do is either not possible or I do not know how to do it properly.

What I want to happen is this :

1. When my page loads I want it to load only the selected item. I'm setting my dataSource to autoBind false and creating an input with a single option which is the selectedValue that I return back from the server. Then on the open I'm selecting that initial selected value out of the returned results. The idea behind this is I want to display selectedValue but do not want load rest of results unless user accesses the dropdown.

2. When typing in the comboBox I want each request to be sent back to the server.  Currently it seems the way I have it setup that initially grabs the data from the server but then it does not callback to server as I change my typed value but instead limits value based on values already returned. The purpose behind this is my comboBox may return hundreds, if not thousands of records and I do not want it loading the whole set.

$('body').ready(function () {
 
 
                var jqWidget = $("#myWidget");
                var selectedValue = 1;
 
                var remoteDataSource = { transport:
                {
                    read:
                    {
                        dataType : "jsonp",
                        url : "http://localhost:8080/detail/000/q",
                        data :
                        {
                            retrieveValues : "true",
                            widgetName : "manufacturingLocation"
                        },
                        autoBind : false,
                        autoSync : true
                    },
                    serverFiltering: true
 
                }
                };
 
                var selectDropdownFunction = function( e )
                {
                    selectInitialValue( jqWidget, selectedValue );
                };
 
                jqWidget.kendoComboBox( {
                                                      dataSource : remoteDataSource,
                                                      autoBind : false,
                                                      dataTextField: "value",
                                                      dataValueField: "id",
                                                      open: selectDropdownFunction,
                                                      filter: "contains",
                                                      suggest: true,
                                                      index: 0,
                                                      delay: 800
 
                                                  } );
 
 
            });
 
            function selectInitialValue( jqWidget, selectedValue )
            {
                jqWidget.data('kendoComboBox').value(selectedValue);
            }


Any ideas how to do this? Or am I doing something wrong?

Eric
Top achievements
Rank 1
 asked on 10 Oct 2012
7 answers
901 views
Hi,

When I use modal: true in a kendoWindow's configuration, an overlay is displayed. If I'm seeing it correctly, the opacity of that overlay is animated when it is displayed, regardless of whether the overall effects for the window itself have been set.

This is fine, but the direction of the animation could be better, imo. It happens quite quickly, so it's hard to see, but I think the following happens:

1. The opacity attribute for .k-overlay is defined as 0.5 by default (in kendo.common.min.css).
2. When the overlay is displayed, the opacity is briefly set to 1.0, and thus the overlay looks solid black.
3. The opacity is then changed or even animated to the intended value of 0.5.

We are perceiving the temporary opacity of 1.0 as a flickering effect, which doesn't look very nice. It would be better if the opacity animation started at 0.0 and is then changed back to 0.5. Is it possible to achieve this or even fix this permanently? Thanks.
Kamen Bundev
Telerik team
 answered on 10 Oct 2012
1 answer
393 views
Hi,

I have Kendo Window in my web pages but, the issue, I'm having, is that the window open and close animation is not smooth in Chrome, whereas it's all good in IE, FireFox and Safari. The window opens and closes slowly and with distorted animation in Chrome. Is there a way I can fix this issue? Is there something different about Chrome that I need to consider while developing my web application?

Regards,

Umais
Vladimir Iliev
Telerik team
 answered on 10 Oct 2012
3 answers
218 views

I have a dropdownlist in my view i want in my view.I want when change my dropdownlist,a java script template bind dropdownlist.i write this but dont work plead help me.

var  roles=[{
        code:1,
        roleName: "Admin",
        access: [
            { id: 1, description: "create", selected: true},
            {id: 2, description: "delete", selected: false},
            { id: 3, description: "update", selected: false}
        ]
    } ,{
        code:2,
        roleName: "user",
        access: [
            { id: 1, description: "create", selected: true},
            {id: 2, description: "delete", selected: true},
            { id: 3, description: "update", selected: false}
        ]
    }];
var viewModel = kendo.observable({
    Roles:roles,
    role:"Admin",
    accessRole:null   
});
 
kendo.bind($("#example"), viewModel);
 
<div id="example">
     Current Role   :<span data-bind="text: role"></span>
    <br>
    <select type="text" id="RoleName" data-bind="source: Roles, value:role"  data-text-field="roleName">
 
   <select/>
 
        <ul data-template="row-template" data-bind="source: accessRole.access"></ul>
 
</div>
 
<script id="row-template" type="text/x-kendo-template">
    <li>
        <input type="checkbox" data-bind="checked: selected" />
        <label data-bind="text: description" />
    </li>
</script>
​

and this is onlne code: http://jsfiddle.net/shahr0oz/K4X3T/19/ â€‹



K4X3T
Ä m o l
Top achievements
Rank 2
 answered on 10 Oct 2012
1 answer
131 views
Hi

this is the javascript i am using :
dataSourceTest = new kendo.data.DataSource({
    //read the data from webservice
    transport: {
        read: {                 
            url: ServiceBaseUrl,           
            type: "GET",
            dataType: "jsonp",                      
            contentType: 'application/json',          
            complete: function(data) {           
                if (data.success && data.code) eval(data.code);
                if (data.success) {
                    alert(  data.responseText );
                    res =JSON.stringify( data.responseText);         
                }
                else alert("ERROR:" + data.message);
            }
        },   
        parameterMap: function (data, operation) {
           // debugger;
            if (operation !== "read") {
                return JSON.stringify({ datas: data.models });
            }
        },
        schema: {                            
            model: {
            id: "_EmployeeID",
            fields: {
                _EmployeeID: { type: "string", hidden: true ,editable:false},
                _Adress:{type:"string"},
                _City :{type:"string"},
                _Country: {type:"string"},              
                _Extension:{type:"string"},
                _FirstName:{type:"string"},
                _HomePhone :{type:"string"},
                _LastName:{type:"string"},
                _Notes: { type: "string", hidden: true },
                _PostalCode: {type:"string"},
                _Region:{type:"string"},
                _Title :{type:"string"},
                _TitleOfCourtesy: { type: "string" },
                _BirthDate:{type :"date"},
                _HireDate: {type:"date"}
            },//fields
        },//model     
     },//schema
    },
});
$(document).ready(function () {  
$("#TestGrid").kendoGrid({
    dataSource: dataSourceTest,
    pageable: true,
    scrollable: false,
    navigatable: true,
    columns: [
      { field: "_FirstName", title: "FirstName" },
      { field: "_LastName", title: "LastName" },
      { field: "_Adress", title: "Address" },
      { field: "_City", title: "City" },
      { field: "_Country", title: "Country" },
      { field: "_Extension", title: "Extension" },   
      { field: "_HomePhone", title: "HomePhone" },   
      { field: "_Notes", title: "Notes" , hidden: true},
      { field: "_PostalCode", title: "PostalCode" },
      { field: "_Region", title: "Region" },
      { field: "_Title", title: "Title" },
      { field: "_TitleOfCourtesy", title: "TitleOfCourtesy" },
      { field: "_BirthDate", title: "Birth Date", template: '#= kendo.toString(_BirthDate,"dd/MM/yyyy , hh:mm:ss ")#' },
      { field: "_HireDate", title: "Hire Date", template: '#= kendo.toString(_HireDate,"dd/MM/yyyy") #' } hh:mm:ss => adding this will format te time 
    ],
     pageable: {
        refresh: true,
        pageSizes: true
     },
      filterable: true,
      columnMenu: true,
      sortable: true,
      dataBound: function(e) {
      displayFilterResults();
      },
});
});

this is the web service method i am calling :
[OperationContract]
   [WebInvoke(Method = "GET", UriTemplate = "/GetEmployeeData", ResponseFormat = WebMessageFormat.Json)]
   public IEnumerable<EmployeeTest> GetEmployeeData()
   {
       dbContext = new EntitiesModel();
       using (EntitiesModel dbcontext = new EntitiesModel())
       {
           var Emp = (from p in dbcontext.Employees
                      select new EmployeeTest
                      {
                          _Adress = p.Address,                         
                          _City = p.City,
                          _Country = p.Country,
                          _EmployeeID = (p.EmployeeID).ToString(),
                          _Extension = p.Extension,
                          _FirstName = p.FirstName,                        
                          _HomePhone = p.HomePhone,
                          _LastName = p.LastName,
                          _Notes = p.Notes,
                          _PostalCode = p.PostalCode,
                          _Region = p.Region,
                          _Title = p.Title,
                          _TitleOfCourtesy = p.TitleOfCourtesy,
                         // _HireDate=p.HireDate,
                        //  _BirthDate=p.BirthDate
                      }).ToList();
           //JavaScriptSerializer Ser = new JavaScriptSerializer();
           //Ser.Serialize(Emp);
           return  Emp;
       }
   }
this is the config :
<system.web.extensions>
   <scripting>
     <webServices>
       <jsonSerialization maxJsonLength="2147483647" />
     </webServices>
   </scripting>
 </system.web.extensions>
  
 <system.serviceModel>
   <behaviors>
     <endpointBehaviors>
       <behavior name="webHttpBehavior">
         <dataContractSerializer maxItemsInObjectGraph="10000000" />
         <webHttp />
       </behavior>
     </endpointBehaviors>
     <serviceBehaviors>
       <behavior name="">
         <serviceMetadata httpGetEnabled="true" />
         <serviceDebug includeExceptionDetailInFaults="true" />
       </behavior>
     </serviceBehaviors>
   </behaviors>
   <bindings>
     <!-- for passing data with jsonp-->
     <webHttpBinding>
       <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" maxBufferSize="2147483644" maxReceivedMessageSize="2147483644" transferMode="Buffered">
         <readerQuotas maxStringContentLength="2147483644" />
       </binding>
 
     </webHttpBinding>
   </bindings>
   <!--<behaviors>
     <serviceBehaviors>
       <behavior name="ServiceAspNetAjaxBehavior">
         <serviceMetadata httpGetEnabled="true"  />
         <serviceDebug includeExceptionDetailInFaults="true"  />
       </behavior>
        
     </serviceBehaviors>
     <endpointBehaviors>      
       <behavior name="ServiceAspNetAjaxBehavior" />
     </endpointBehaviors>
   </behaviors>-->
    
   <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
 
   <services>
     <!-- for passing data with jsonp-->
     <service name="TestTelerikWCF.ServiceTelerikTest">
       <endpoint address="" bindingConfiguration="webHttpBindingWithJsonP" binding="webHttpBinding"  contract="TestTelerikWCF.ServiceTelerikTest" behaviorConfiguration="webHttpBehavior" />
     </service>
   </services>
    
   <standardEndpoints>
     <webScriptEndpoint>
       <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
     </webScriptEndpoint>
   </standardEndpoints>
 </system.serviceModel>
 <system.webServer>
   <modules runAllManagedModulesForAllRequests="true"/>
 </system.webServer>

this is the html code:
<!DOCTYPE html>
<html>
<head>
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />
    <!--<link href="styles/kendo.silver.css" rel="stylesheet" />-->
    <title></title>
    <script src="jquery-1.8.2.js" ></script>
    <script src="js/kendo.all.min.js" ></script>
    <script src="KendoGridjs.js" ></script>
    
</head>
<body>
   <div id="TestGrid"></div>
</body>
</html>

need help cant get it working and cant find what i am doing wrong

thanks.
Max
Top achievements
Rank 1
 answered on 10 Oct 2012
5 answers
493 views
JSONP:

I am using this data source for a Kendo Chart, but a similar setup did not work for a Kendo Grid as well.

I am using a WCF service, cross domain, and it is a restful service for the JSONP implementation.

I see the response JSONP data in fiddler, but nothing gets displayed in the Kendo chart. I use almost the same setup with JSON and it works fine. (See "JSON" section below for my JSON implementation)

JSONP data source:

           dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        cache: false,
                        url: "http://localhost/BusinessAgingReportJsonP/RestServiceImplJsonP.svc/BusinessAgingCount",
                        dataType: jsonp,
                        jsonpCallback: "JsonPCallBack"
                    }
                },
                schema: {
                    type: "jsonp",
                    data: "BusinessAgingCountResult",
                    model: {
                        fields: { BusinessAgingCount: "text()" }
                    }
                }
            })

URL: http://localhost/BusinessAgingReportJsonP/RestServiceImplJsonP.svc/BusinessAgingCount

Response Data from the service: JsonPCallBack( {"BusinessAgingCountResult":[0,0,0,3,0,1,1,6]} );


////////////////////////////////////////////////////////////////////////////////////////////////////////////

JSON:

The setup for JSON is almost the same as that for JSONP above, except the JSON implementation works and the JSONP implementation does not work. What am I doing wrong?

JSON data source: 

           dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        cache: false,
                        url: "RestServiceImpl.svc/BusinessAgingCount",
                        dataType: json
                    }
                },
                schema: {
                    type: "json", 
                     data: "BusinessAgingCountResult",
                    model: {
                        fields: { BusinessAgingCount: "text()" }
                    }
                }
            })

URL: RestServiceImpl.svc/BusinessAgingCount

Response Data from the service: {"BusinessAgingCountResult":[0,0,0,3,0,1,1,6]}
 
Victoria
Top achievements
Rank 1
 answered on 10 Oct 2012
1 answer
120 views
Hello,

I'm having an issue with charts when running my app on any IOS 6 device. When a user performs a "taphold" action (touching the screen and keeping the finger pressed for longer than a second) over an element, the element is highlighted in blue. Additionally, this action brings up the "copy/select/select all" context menu. I have attached some screenshots to demonstrate the problem.

This seems to occur for any type of element so it is not necessarily a dataviz issue, but in case anyone else has encountered this, I would like to know if it is possible to somehow disable this feature. My app has some functionality bound to the "taphold" jQuery mobile event when performed on a chart, and the selection of the chart or one of its elements, along with the context menu appearing, can be distracting and confusing for the user.

Thank you,
Alex
Alex
Top achievements
Rank 1
 answered on 10 Oct 2012
1 answer
394 views
Hi,

I have recently purchased the glyphicons PRO icon set (http://glyphicons.com/) and I am now trying to add the icons to my KendoUI Mobile app. I've tried to add them using the instructions laid out in Creating Custom Icons doc (http://docs.kendoui.com/getting-started/mobile/tabstrip) with the png icons but the icons look stretched and appear in different sizes to each other.

I've noticed that the default icons for KendoUI are in a png file with an svg mask file used to extract each icon from the file. Glyphicons comes with an svg file which contains all the icons. I was wandering how to extract the Glyphicon icons in the same way as KendoUI extracts the default icons.

How are the default icons extracted and added to allow them to be referenced through the data-icon attribute? How can I extract the Glyphicon icons from the svg file and reference them through the data-icon attribute?

Thanks,
Thomas

Kamen Bundev
Telerik team
 answered on 10 Oct 2012
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?