Telerik Forums
Kendo UI for jQuery Forum
2 answers
178 views
I have a column in my grid defined as:

field : "class"
title : "Class"
width : 250
This works fine, but when I add a column template like so: 
template : "<div  class=\\"FieldValueLink\\"  onclick=\\"(function(e,obj){ /* do stuff */ })(event, this)\\" >#=class#</div>"
I get the following error: 

Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td role='gridcell'><div class="FieldValueLink" onclick="(function(e,obj){ /* do stuff */})(event, this)" >#=class#</div></td><td style="display:none" role='gridcell'>#:data.id==null?'':data.id#</td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(data.uid)+'" role=\'row\'><td role=\'gridcell\'><div class="FieldValueLink" onclick="(function(e,obj){ /* do stuff */ })(event, this)" >'+( class )+'</div></td><td style="display:none" role=\'gridcell\'>'+e(data.id==null?'':data.id)+'</td></tr>';}return o;' kendo.all.min.js:9

I'm sure this is because 'class' is a reserved word in javascript. Is there a different way to reference the field name in the template? 

We're just trying to convert our existing grids to kendo grids. I'd rather not alter my database and all the existing code referencing this if it can be helped. 
Stacy
Top achievements
Rank 2
 answered on 30 Aug 2013
6 answers
475 views
Can anyone assist in getting my Grid working so that it pulls from the database and displays 50 rows at a time? It currently displays 50 rows but does not show any page numbering.  I have included a total of 120 in the JSON datasource but do not know where to go from here.   How do I display the page numbers and pass `$start, $limit` variables to my query is is getting the data? 

Where it should say "1 - 50 of 120 items" it says "No items to display"  

Im stuck. :0(

    var mydata =  {"data":[
    
            <?php foreach ($data_arr as $data){ ?>
                { "id": "<?php echo $data['id']; ?>",  "name":"<?php echo $data['surname'] . ', ' . $data['firstname']; ?>",  "company": "<?php echo $data['company']; ?>",   "Email": "<?php echo $data['email']; ?>"},
            <?php 
            }
            ?>
            ] , "total": <?=$total?>};
    >
    >
    >         $("#grid").kendoGrid({
    >             dataSource: {
    >                 data: mydata.data,
    >                 schema: {
    > total: "total",
    >                     model: {
    >                         fields: {
    >                             id: { type: "number" },
    >                             name: { type: "string" },
    >                             company: { type: "string" },
    >                             email: { type: "email" }
    >                         }
    >                     }
    >                 },
    >                 pageSize: 50
    >             }, serverPaging: true,
    >             scrollable: false,
    >             sortable: true,
    >             filterable: true, selectable: "row",
    >   detailTemplate: kendo.template($("#detailTemplate").html()),
    >             detailInit: detailInit,
    >             pageable: {refresh: true,},           
    >             columns: [
    >                 {field:"id",title: "ID",filterable: false},
    >                 {field: "name",title: "Name"}, 
    >                 {field: "company",title: "Company"}, 
    >                 {field: "email",title: "Email"}             
    >             ]      
    >         });

Then there's the server side PHP which does not seem to be getting anything from the URL all :

> //get current page from URL
$get = $_SERVER['REQUEST_URI'];
> parse_str($get);
>if(isset($page)){
>$start = $page; 
>
>$limit = $pagesize;
>}
> $admin = new Admin();
>
>$count_data = $admin->countRows();  //brings back 120
> $mydata= $admin->getRows($start=0,$limit=50);
Martin
Top achievements
Rank 1
 answered on 30 Aug 2013
3 answers
169 views
Hi All,

I was trying to select a photo from the photo library using a Android device , the app crashed. I have followed the example from the cordova site properly i.e  http://docs.phonegap.com/en/2.0.0/cordova_camera_camera.md.html   . When the photo is selected by clicking than the image can be selected . There is also one more thing suppose you choose to take photo first and then use the photolibrary method then the app does not crash. Has anyone has noticed this problem . Please give me a solution.

Thanks

Gaja Naik
Steve
Telerik team
 answered on 30 Aug 2013
1 answer
137 views
 Hi ,

I have a grid which displays a real-time data pushed to the UI every 10 seconds. It works fine in refreshing the data but 
the it freezes if data is refreshed while re-sizing a column, re-order a column or grouping and a page refresh is required for the grid work once that is happened. So would you please help on this?


Thanks,
Petur Subev
Telerik team
 answered on 30 Aug 2013
1 answer
256 views
I have a Hierarchical Kendo Grid that allows CRUD on the child grids.  Everything works fine except if you open more than one parent grids and Add begin adding records the first record's ForeignKey column renders fine, but after the first the new records UI renders as a Textbox with a zero in it.  Also, all CRUD operations are broken while there are multiple Create templates in the child grids.  I attempted changing the ForeignKey column to a ClientTemplate with the DropDown contained in an editor template view, but the result was nearly the same.

I have attached a screenshot of the problem.

My parent grid:
@(Html.Kendo().Grid<gpas.Models.ContractBillingCycleRollUpGridView>().Name("ContractBillingCycleGrid")
    .Columns(c =>
    {
        c.Bound(t => t.Name);
        c.Bound(t => t.LineItemCount).Title("Line Item Count").Width(125).HtmlAttributes(new { name = "lineItemCount" });
        c.Bound(t => t.Total).Format("{0:c}").Title("Total Budget").Width(150).HtmlAttributes(new { name = "lineItemTotal" });
        c.Bound(t => t.OrganizationId).Hidden().HtmlAttributes(new { name="orgId" });
        c.Bound(t => t.SubcontractorId).Hidden().HtmlAttributes(new { name = "subconId" });
    })
    .DataSource(ds => ds
        .Ajax().Read(read => read.Action("GridBinding_ContractBillingCycleRollUp", "Contract", new { id = Model.ContractBillingCycle.Id, organizationId = Model.OrganizationId }))
    )
    .Sortable()
    .Pageable()
    .Filterable()
    .ClientDetailTemplateId("contractLineItemsTemplate")
    .Events(events => events.DataBound("onDataBound"))
)
Child Grid Template:
<script id="contractLineItemsTemplate" type="text/kendo-tmpl">
 
    @(Html.Kendo().Grid<gpas.Models.ContractLineItemGridView>().Name("childgrid_#=Id#_#=OrganizationId#_#=SubcontractorId#")
        .Columns(c =>
        {
            c.ForeignKey(l => l.ExpenseCategoryId, Model.ExpenseCatagories).Title("Expense Category");
            c.Bound(l => l.Description);
            c.Bound(l => l.Justification);
            c.Bound(l => l.Amount).Format("{0:c}").Width(200);
            c.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
        })
        .Sortable()
        .Filterable()
        .Scrollable()
        .ToolBar(t => t.Create())
        .Editable(edit => edit.Mode(GridEditMode.InLine))
        .DataSource(ds => ds
            .Ajax()
            .Events(events => events.Error("error_handler").RequestEnd("gridLineItem_onRequestEnds"))
                    .Model(model =>
                    {
                        {
                            model.Id(o => o.Id);
                        }
                    })
            .Read(read => read.Action("GridBinding_ContractLineItems", "Contract", new { id = "#=Id#", organizationId = "#=OrganizationId#", subcontractorId = "#=SubcontractorId#" }))
            .Update(update => update.Action("GridAction_UpdateLineItem", "Contract"))
            .Destroy(destroy => destroy.Action("GridAction_DeleteLineItem", "Contract"))
            .Create(create => create.Action("GridAction_CreateLineItem", "Contract"))
        )
        .Events(events => events.Save("gridLineItem_OnSave"))
        .ToClientTemplate()
    )
 
</script>
Thanks in advance!
Petur Subev
Telerik team
 answered on 30 Aug 2013
1 answer
133 views
Hi,
I would appreciate a good example or scheleton of a Angular-Kendo Mobile application.

 i found a good Angular scheleton, like: https://github.com/angular/angular-seed

and kendo directive for angular
https://github.com/kendo-labs/angular-kendo

But i couldnt make work in angular an app (just simple app like kendo-sushi, etc).

is there any example around?
Alexander Valchev
Telerik team
 answered on 30 Aug 2013
5 answers
346 views
Dear all,
 i'm new to the kendo ui
and i tried the sample of Kendo UI Uploader
and i need to save the data to the sql server database with WCF service via Kendo Upload in Jquery
i have the following doubts
1) in Asynchronous mode 

async: {
       saveUrl: "saveHandler.php",-------------------- ->> here what happens in this php file
       removeUrl: "removeHandler.php",------------------>>here what happens in this php file
       removeField: "fileNames[]"
   }
in that saveURL you may give the savehandler.php what it happens in that PHP file 

2) if i need to save the data in local drive then what can i do for that?????

3) i want the original Path of the file which i had selected via kendo Uploader

please clarify me the above issues one by one 

thanks & regards
-santhosh
T. Tsonev
Telerik team
 answered on 30 Aug 2013
1 answer
142 views
Hi,

Using:
Kendo UI Beta v2013.2.716
PhoneGap 3.0.0-0.14.0

I have a ListView that will freeze the scrolling when the datasource data changes, and if the user is scrolling at the time the data refresh occurs:

//This is some fake data
var zoneData = [
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'},
                    {zoneNumber: 1, zoneName: 'name', group: '1-9'}
                    ];

//The data source
var theDataSource = kendo.data.DataSource.create({
                data: zoneData
            });

//This is how the listview is initialized when the view loads
$('#statusZoneRows').kendoMobileListView({
            dataSource: theDataSource,
            template: $('#statusZoneRowTemplate').html(),
            headerTemplate: $('#statusZoneRowHeaderTemplate').html()
});

//This is how the dataSource is updated later on in the app ...
zoneData.push({zoneNumber: 2, zoneName: 'A new name', group: '1-9'});
theDataSource.data(zoneData);


Does anyone know why would the the scrolling freeze up when the data is added?  Again this seems on only happen if the user is scrolling. 

Thanks
Kiril Nikolov
Telerik team
 answered on 30 Aug 2013
1 answer
108 views
Hello there.
I am using kendo ui with mvc. Its all running good, but I have a problem while integrating another jquery plugin.
I have my kendo running on Scripts/kendo/2013.1.514/jquery.min.js ( I guess), but my new sticky notes plugin of jquery required higher version of library. it is not working with jquery.min.js files.
Here is my script structure.


My master page looks like,
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
  
    <link rel="stylesheet" href="~/Themes/style.css" />
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
   
</head>
<body>
   @RenderBody()
</body>
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.metro.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.dataviz.metro.min.css")" rel="stylesheet" type="text/css" />
     
     
    <script src="@Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"></script>
 
    @*USED FOR KENDO CHARTS*@
    <script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js")"></script>
</html>
It is running fine for all the pages. on other pages I have kendo grid and many other stuffs, I also have the kendo menu.
My problem comes when I m trying to implement jQuery Sticky Notes on a particular page. here is the code

@model List<Sanwin.ViewModels.Collaboration.CollaborationNoteListModel>
@using Sanwin.Web;
@using Kendo.Mvc.UI
@{
   Layout = "~/Views/Shared/_ColumnsTwo.cshtml";
   // Layout = null;
}

@section left
{
    @Html.Partial("~/Views/Collaboration/_CollaborationNavigation.cshtml")
}
 
<link rel="stylesheet" href="@Url.Content("~/content/jQuery-Sticky-Notes/css/jquery.stickynotes.css")" type="text/css">
 
    @*<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>*@
 @*<script src="~/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>*@
<script type="text/javascript" src="@Url.Content("~/content/jQuery-Sticky-Notes/script/jquery.stickynotes.js")"></script>
 
<div class="product_body">
    <div class="account-page">
        <div class="page-title">
            <h1 style="float: left">My Notes
            </h1>
        </div>
        <div class="clear">
        </div>
        <div class="body">
         
            <div class="section-body" id="notes11" style="width:800px;height:600px;">
            </div>
        </div>
    </div>
   
</div>
<script>
  
</script>
 
<script type="text/javascript">
    // wait for the DOM to be loaded
    $(document).ready(function () {
        var options = {
            notes: [{
                "id": 1,
                "text": "Test Internet Explorer",
                "pos_x": 50,
                "pos_y": 50,
                "width": 200,
                "height": 200,
            }]
        }
        // $("#noteList").stickyNotes(options);
        $('#notes11').stickyNotes();
    });
</script>
I am getting error for sticky note saying 
Uncaught TypeError: Object [object Object] has no method 'stickyNotes'

If I set the layout to null, the sticky notes will work fine.
I understand its all due to jquery load sequence. can any one please help me out of this?

Dimo
Telerik team
 answered on 30 Aug 2013
15 answers
1.4K+ views
Hi,

I have an issue that I use a dropdown list for my foreignkey field like demo : http://demos.kendoui.com/web/grid/foreignkeycolumn.html

The difference is that the foreignkey field in my model which can be null some time if it is not related to anyone else. Then the issue for me is when I try to editRow with this foreignkey field's original value is null,  and I want to change to another value, this field will always get the value '[object object]'. I don't know why.

See the floor field in the following code:

<script>
    $(document).ready(function() {
        var template = kendo.template($("#detail_template").html());

        function show_menu_details(menuObj) {
            var tg = $("#details");
            tg.fadeOut(function(){
                tg.html(template(menuObj));
                tw = tg.find(".k-window");
                
                
                tw.css({width:tg.innerWidth()-30, height:tg.innerHeight()-55, "margin-top": 20, "margin-left":15});
            });
            tg.fadeIn();
        }
        
        $("#horizontal").kendoSplitter({
            panes: [{collapsible: true, size: "180px"},
                    { collapsible: true} ],
            height: 690
        });
        
        function onChange(e){
            e.preventDefault();
            selectedObj = this.dataSource.getByUid(this.select().data('uid'))
            //console.log(selectedObj);//(this.dataSource.data());
            show_menu_details(selectedObj);
        }
        
        var statuses = [
            {value:'', text:'--'},
            {value:'Available', text:'Available'},
            {value:'Locked', text:'Locked'},
            {value:'Reserved', text:'Reserved'},
            {value:'Occupied', text:'Occupied'}];
        var floors = new Array();
        floors[0]={text:'--',value:''};
        _DS_Floor.fetch(function(data){
            $.each(data.items,function(index,obj){
                floors[index+1] = {text: obj.name, value: obj.id};
            });
            
            var grid = $("#list").kendoGrid({
                dataSource: _DS_Room,
                selectable: "row",
                filterable: true,
                columnMenu: true,
                pageable: {refresh:true},
                editable: {mode:"popup",confirmation:"Sure to delete?"},
                height: 688,
                scrollable: {
                    virtual: true
                },
                sortable: true,
                toolbar: kendo.template($("#toolbar_template").html()), 
                columns: [//{field:'id',title:' ',width:40,template: '<input type="checkbox" id="#= id #" />'},
                          {field:'name',title:'Name'},
                          {field:'floor',title:'Floor',values:floors},
                          {field:'position',title:'Position'},
                          {field:'status',title:'Status',width:80,values:statuses}],//_Columns_Menu,//{ command: ['edit','destroy'], title: "", width: "200px" }
                //change: onChange
            });
            
            grid.find("#btn-add").click(function(e){
                e.preventDefault();
                grid.data("kendoGrid").addRow();
            });
            
            grid.find("#btn-save").click(function(e){
                e.preventDefault();
                grid.data("kendoGrid").saveChanges();//editRow(grid.data("kendoGrid").select());
            });
            
            grid.find("#btn-remove").click(function(e){
                e.preventDefault();
                grid.data("kendoGrid").removeRow(grid.data("kendoGrid").select());
            });
            
            grid.find("#btn-cancel").click(function(e){
                e.preventDefault();
                grid.data("kendoGrid").cancelChanges();//removeRow(grid.data("kendoGrid").select());
            });
            
        });
        
    });
</script>

Thanks.
--
Vladimir Iliev
Telerik team
 answered on 30 Aug 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?