Telerik Forums
Kendo UI for jQuery Forum
3 answers
192 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
108 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
440 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
80 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
356 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
1 answer
263 views
Hello, I'm having the following problem to implement the kendo  grid:

This is my code in client side:

   $(document).ready(function () { 
      var dataSource = kendo.data.DataSource({             
        transport: {                 
            read: {                     
                url: '@Url.Action("GetAll""Company")',                     
                dataType:"json"                
            },             
            schema: {                 
                data: "Companies",                 
                total: "TotalCount",                
                model: {                                      
                    id: 'CompanyID',                     
                    fields: {                         
                        CompanyID:{                             
                            type: 'number',                             
                            nullable: true,                             
                            editable:false                         
                        },                         
                        Name:{                                              
                            type: 'string'                         
                        },                         
                        Rif:{                                              
                            type: 'string'                           
                        },                         
                        Telephone:{                             
                            type: 'string'                         
                        },                         
                        FisicalAddress:{                                             
                            type: 'string'                         
                      }                     
                    }               
                }             
            },             
            pageSize: 1         
        });         

        $("#grid").kendoGrid({             
            dataSource: dataSource,             
            height: 250,             
            scrollable: true,             
            sortable: true,             
            filterable: true,             
            pageable: {                 
            input: false,                 
            numeric: true             
          },             
            columns: [ { field: "CompanyID",  title: "#",  width: 150 },
                       { field: "Name", title: "Name", width: 150   },                            
                       { field: "Rif", width: 150 },
 { field: "Telephone", title: "Telephone"},
                       {  field: "FisicalAddress", width: 300 }]
    });
});

and this is my code in server side:

public JsonResult GetAll(
{            
    var companies = _companyService.GetAll().Select(c => new { c.CompanyID, c.Name, c.Rif, c.Telephone, c.FiscalAddress});
     return Json(new { Companies = companies, TotalCount = companies.Count()},JsonRequestBehavior.AllowGet);
}

Error description in file kendo.web.min.js or kendo.data.min.js
Microsoft JScript runtime error: Object doesn't support property or method '_observe'

Any idea what may be happening? Thank you for help
Rosen
Telerik team
 answered on 10 Oct 2012
3 answers
127 views
i want to make popup editor with additional field, look it :
script grid kendo :
....
editable: { mode: "popup", template: kendo.template($("#popup_editor").html()) },
height: 450, filterable: true, sortable: true, pageable: true,
        toolbar: [{text: "Add data", name: "create"}],
        columns: [
            { field: "name",title: "Name", filterable: true },
            { field: "dtcreate",title: "Date create", filterable: true },
            { command: [{text:"Edit", name:"edit"}, {text:"Delete",name:"destroy"}], title: " ", width: "160px" }
        ]
script form popup :
<script id="popup_editor" type="text/x-kendo-template">
        <div class="k-edit-label"><label for="name">Name</label></div>
    <input type="text" class="k-input k-textbox" name="name" data-bind="value:name">
                 
    <div class="k-edit-label"><label for="publish">Publish</label></div>
    <input type="text" class="k-input k-textbox" name="publish" data-bind="value:publish">
             
    <div class="k-edit-label"><label for="dtcreate">Date Create</label></div>
    <input type="text" name="dtcreate" data-type="date" data-bind="value:dtcreate" data-role="datepicker" />
</script>  

So the problem is popup editor can't showed, why?

Thank,
Ä m o l
Top achievements
Rank 2
 answered on 10 Oct 2012
6 answers
574 views
We are running into an issue with Google Maps and Kendo UI where the pinch to zoom stops working correctly and as you move the map the tiles stop loading. Leaving my same code if I remove Kendo UI everything works correctly. Has anyone ran into this issue? If so do you have any work arounds?
Davide
Top achievements
Rank 1
 answered on 10 Oct 2012
1 answer
205 views
Does anyone know of an example where you can move rows between two grids (left/right)?  In the attached image I've got two select boxes but I want to turn them into grids with a row event that moves them left or right.  Any pointers would be greatly appreciated.
Ä m o l
Top achievements
Rank 2
 answered on 10 Oct 2012
1 answer
120 views
Hi,

I have downloaded kendoui.trial.2012.2.710. I went to the examples of Bubble Chart. 

Can we have the below features if we buy it?
  1. Selection Tool
  2. Zoom In/Out in the selected area from the chart
  3. Drag the area (like in Google Map).

Thanks and regards,
A M Shrestha | ShresthaBros. | Kathmandu | Nepal
info@shresthabros.com | www.shresthabros.com | 
+9779841493286  
Nohinn
Top achievements
Rank 1
 answered on 10 Oct 2012
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?