Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,660 questions
1 answer
5.5K+ views
how to crate a link of type "tel:" to auto call a number from mobile phone
Hi,
I need to insert a link to a phone number and I want that on click event automatically start the call.

In Jquery I use <a href="tel:00-00-000-000" >00-00-000-000</a>

Thanks a lot
Mauro

Button (Mobile)
Ali
Top achievements
Rank 1
 answered on 14 Sep 2012
3 answers
110 views
View doesnt Show until touch
Good morning,

I am testing the KendoUI Mobile framework in combination with trigger.io
The point is that it shows the background but nothing else.
Then when touching  the screen the Layout/View appears (thats only happening on the the device, not on emulator)
the content also appears when you turn the mobile to landscape.

Some idea why it happens? Any idea to make a workaround (calling some kind of function in data-show per example)??

Best regards!
<!DOCTYPE html>
<html>
<head>
    <title>Test Runner</title>
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
     <script src="js/includes/jquery.min.js"></script>
    <script src="js/includes/kendo.mobile.min.js"></script>
</head>
<body>
    <div data-role="view" data-layout="default" id="default">
        Hello Mobile World!
    </div>
 
    <div data-role="layout" data-id="default">
        <div data-role="header">
            test runner
        </div>
    </div>
    
    
    <script>
 
        window.kendoMobileApplication = new kendo.mobile.Application(document.body, { platform: 'android' }, {
            viewShow: function (e) {
                var viewID = e.view.element.attr("id");
            }
        });
 
 
 
     
 
    </script>
</body>
</html>
Application
Ali
Top achievements
Rank 1
 answered on 14 Sep 2012
0 answers
97 views
how puts the name in iframe for window?
Hi, i'm from Peru its my english is poor.
But, how puts name in iframe for window, whit from code:

     var onClose = function() {
         undo.show();
    }

    function onRefresh(e) {

    }

var window2 = $("#window2"),
        undo2 = $("#node_pjpersons").bind("dblclick", function(){
                    window2.data("kendoWindow").center().open();
        });

    if (!window2.data("kendoWindow")) {
        window2.kendoWindow({
            actions: ["Refresh", "Close"],
            width: "615px",
            height:"600px",
            title: "Mis Proyectos",
            visible:false,
            content: "/node/personal-project/",
            resizable: false,
            refresh: onRefresh,
            iframe: true,
            close: onClose
        });
    }

Window
Jorge
Top achievements
Rank 1
 asked on 14 Sep 2012
6 answers
1.5K+ views
Two Data Sources, One Grid
Let's say I have a Grid that maps to a Model.  I'd like to add another column which gets data from a second Data Source.  Any idea if this can be done, and what is the best way to go about it?

Thanks
Data Source
Arturo
Top achievements
Rank 1
 answered on 14 Sep 2012
1 answer
140 views
Create and display a grid when a link is clicked
I want to  display a grid  when a link inside a ListView is clicked . I'm using a template for the ListView.

Html:
<div id="listView" ></div>

<div id="grid" ></div>

Template:

<script type="text/x-kendo-tmplate" id="template">
    <div>
             <ul>
                     <li><a class="list k-link" title="#= title #" id="#= id#" >#= name #</a></li>
                </ul>
    </div>
</script>

I tried to do this using following code but nothing happens. Only id is read correctly but the request is not made.

$(" .list").live({click:function(){
 
    var id=$(this).attr('id');

    $("#grid").kendoGrid({
           dataSource: {
                 transport: {
                        read: "somefile.php?id="+id,  
                 },
               schema: {
                         data:"data",
                          model: {
                               id: "id_pf",
                               fields:{
                                    first:{}, 
                                   second:{}
                               }
                        }
              },
             total: function(response) {
                      return $(response.data).length;
             },

            pageSize: 10
         },

         columns: [
                 { title: "First", field: "first"},
                { title: "Second", field: "second"},
            ]
       });

}});

Grid
Vladimir Iliev
Telerik team
 answered on 14 Sep 2012
6 answers
991 views
Disabling Drag and Drop
How do I disable dragging after the draggable hits its target?
Drag and Drop
Nohinn
Top achievements
Rank 1
 answered on 14 Sep 2012
1 answer
414 views
Weighted average of a column in the group by on kendo grid.
I have columns a and column b in our grid,   and instead of average of b, I want SUM(A*B)/Sum(B) to show up in the group by aggregate to give me the weigthed average.

Is there a way to do this with Kendo UI Grid.  Please give an example if you have done this before.

Thanks

Grid
Alexander Valchev
Telerik team
 answered on 14 Sep 2012
7 answers
1.9K+ views
Issue with opening in the center with dynamic height/width
Well like everyone, I'm trying to get my window to open in the center the first time it's loaded. 

Initially, I was completely confused as to why the window wasn't opening int he center since I had copied the code exactly. 

function ShowKendoWindow(link) {
        var title = link.getAttribute("WindowCaption");
        var url = link.getAttribute("WindowURL");
        var win = $(".modal-window");
        if (!win.data("kendoWindow")) {
            // window not yet initialized
            win.kendoWindow({
                animation: {
                    open: {
                        effects: { fadeIn: {} },
                        duration: 200,
                        show: true
                    },
                    close: {
                        effects: { fadeOut: {} },
                        duration: 200,
                        hide: true
                    }
                },
                content: url,
                title: title,
                draggable: true,
                modal: true,
                resizable: false,
            }).data("kendoWindow").center().open();
        }
        else {
            // reopening window
            win.data("kendoWindow")
            .refresh(url) // request the URL via AJAX
            .title(title)          
            .center().open() // open the window;
        }
        event.preventDefault();
    }
    

So, what I realized is happening is that the window loads in the center while it's waiting for the content to load via ajax. Once it loads via ajax, it doesn't move the window to the center, it expands from the top left corner to fit the content of the page that it's loading.

Now what we've done( and the reason we aren't using a fixed height/width) is that we have have one function we add to the click so that we can load all kinds of different content in there and we don't have to worry about the window looking lost in a big open div or having scrolling content. 

So, my question, is there any way to get the window to load AFTER the content loads. Or is there some other way tot get it to center itself again after the content loads? This isn't a huge deal, but it's something we'd definitely like to fix.

I've attached some screen shots for you to see what is happening.

Thanks in advance for any help.
Window
Majid
Top achievements
Rank 1
 answered on 14 Sep 2012
6 answers
204 views
Widget initialization using data-attributes: can you set min/max for date/time?
When using widget initialization with "data-attributes", can you set min/max date/time for the date/time pickers?

I've tried using "data-min" for both the date and time pickers, but Kendo doesn't like it.

http://jsfiddle.net/q3FPV/3/

Thanks.
General Discussions
Todd
Top achievements
Rank 1
 answered on 14 Sep 2012
0 answers
117 views
Grid batch editing and MS MVC3
Hi,

We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.

We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.

Who can help us?

Regards
Paul Sinnema

Here's the manually coded view that we use:
<script src="@Url.Content("~/DataSources/ProjectOnderhoudDataSource.generated.js")" type="text/javascript"></script>
<div id="projectEditForm">
<input id="DatumAanvang" data-bind="value: selectedProject.DatumAanvang" />
<hr />
<div id="projectRegelGrid" class="k-content"/>
<script type="text/javascript">
$(function ()
{
$("#DatumAanvang").width(220).kendoDatePicker();
ProjectOnderhoudDataSource.bind("change", function (data)
{
ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]); // not nice yet
});
ProjectOnderhoudDataSource.read();
kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel);
ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1;
$("#projectRegelGrid").kendoGrid
({
dataSource: ProjectOnderhoudProjectRegelListDataSource,
navigatable: true,
// deletable: true,
pageable: true,
// sortable: true,
height: 400,
toolbar: ["create", "save", "cancel"],
columns:
[
{ field: "Aantal", title: "Aantal" },
{ field: "Prijs", title: "Prijs", format: "{0:c}" },
{ field: "BTW", title: "BTW", format: "{0:c}" },
{ field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' },
{ field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" },
{ command: ["destroy"], title: " ", width: "110px" }
],
editable: true
});
});
</script>
</div>

And the DataSource we generate:
var ProjectOnderhoudDataSource = new kendo.data.DataSource
({
transport:
{
read:
{
url: "../ProjectOnderhoud/Get"
},
update:
{
url: function(item)
{
return "../ProjectOnderhoud/Update/" + item.Id;
},
type: "POST"
},
destroy:
{
url: function(item)
{
return "../ProjectOnderhoud/Delete/" + item.Id;
},
type: "DELETE"
},
create:
{
url: "../ProjectOnderhoud/Create",
type: "POST"
},
parameterMap: function (data, operation)
{
if(operation === "update")
{
var date;
date = new Date(data.DatumAanvang);
data.DatumAanvang = kendo.toString(new Date(data.DatumAanvang), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.DatumFaktuur);
data.DatumFaktuur = kendo.toString(new Date(data.DatumFaktuur), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.CreatedOn);
data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.ChangedOn);
data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss");
}
return data;
}
},
schema:
{
model:
{
id: "Id",
fields:
{
DatumAanvang:
{
type: "date",
validation: { required : true }
},
DatumFaktuur:
{
type: "date",
validation: { required : true }
},
Name:
{
type: "string",
validation: { required : true }
},
Id:
{
type: "int",
validation: { required : true }
},
CreatedOn:
{
type: "date",
validation: { required : true }
},
CreatedBy:
{
type: "int",
validation: { required : true }
},
ChangedOn:
{
type: "date",
validation: { required : true }
},
ChangedBy:
{
type: "int",
validation: { required : true }
}
}
}
}
});
var ProjectOnderhoudViewModel = new kendo.observable
({
projectSource: ProjectOnderhoudDataSource,
selectedProjectOnderhoud: null
});
var ProjectOnderhoudProjectRegelListDataSource = new kendo.data.DataSource
({
transport:
{
read:
{
url: function()
{
var parentId = ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId;
return "../ProjectOnderhoud/GetProjectRegelList/" + parentId;
},
parentId: null
},
update:
{
url: function(item)
{
if(item != null && item.Id != undefined)
{
return "../ProjectRegel/Update/" + item.Id;
}
return "../ProjectRegel/Update/-1";
},
type: "POST"
},
destroy:
{
url: function(item)
{
return "../ProjectRegel/Delete/" + item.Id;
},
type: "DELETE"
},
create:
{
url: "../ProjectRegel/Create",
type: "POST"
},
parameterMap: function (data, operation)
{
if(operation === "update")
{
var date;
date = new Date(data.CreatedOn);
data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.ChangedOn);
data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss");
}
return data;
}
},
batch: true,
pageSize: 15,
schema:
{
model:
{
id: "Id",
fields:
{
Aantal:
{
type: "int",
validation: { required : true },
editable: true
},
Prijs:
{
type: "float",
validation: { required : true },
editable: true
},
BTW:
{
type: "float",
validation: { required : true },
editable: true
},
Id:
{
type: "int",
validation: { required : true },
editable: true
},
CreatedOn:
{
type: "date",
validation: { required : true },
editable: true
},
CreatedBy:
{
type: "int",
validation: { required : true },
editable: true
},
ChangedOn:
{
type: "date",
validation: { required : true },
editable: true
},
ChangedBy:
{
type: "int",
validation: { required : true },
editable: true
}
}
}
}
});

And finally the controller we generate:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Net.Http.Formatting;
using System.Net.Http;
using MVC3DOViewmodel;
using System.Web;
using System.Web.Mvc;
using Xtensive.Orm;
using Xtensive.Orm.Web;
using System.Net;
 
namespace MVC3DOApp.Controllers
{
    public partial class ProjectOnderhoudController : MainController
    {
        public ActionResult Index()
        {
            return this.View();
        }
 
        public object Get() // List<PCProjectOnderhoud>
        {
            if(HasId)
            {
                return Json(VMProjectOnderhoud.GetById(this, Id), JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(VMProjectOnderhoud.AllVMProjectOnderhoudList(this), JsonRequestBehavior.AllowGet);
            }
        }
 
        public HttpResponseMessage Update(int id)
        {
            HttpResponseMessage response = new HttpResponseMessage();
 
            if (id == -1) // Batch update
            {
                response.StatusCode = HttpStatusCode.OK;
            }
            else
            {
                using (var entity = VMProjectOnderhoud.GetById(this, Id))
                {
                    entity.DatumAanvang = Convert.ToDateTime(Request["DatumAanvang"]);
                    entity.DatumFaktuur = Convert.ToDateTime(Request["DatumFaktuur"]);
                    entity.Name = Request["Name"];
                    entity.CreatedOn = Convert.ToDateTime(Request["CreatedOn"]);
                    entity.CreatedBy = Convert.ToInt32(Request["CreatedBy"]);
                    entity.ChangedOn = Convert.ToDateTime(Request["ChangedOn"]);
                    entity.ChangedBy = Convert.ToInt32(Request["ChangedBy"]);
 
                    SaveChanges();
 
                    response.StatusCode = HttpStatusCode.OK;
                }
            }
 
            return response;
        }
 
        public object Delete(int id)
        {
            HttpResponseMessage response = new HttpResponseMessage();
 
            using(var entity = VMProjectOnderhoud.GetById(this, Id))
            {
                entity.Delete();
 
                SaveChanges();
 
                response.StatusCode = HttpStatusCode.OK;
            }
 
            return response;
        }
 
        public object Create()
        {
            return null;
        }
 
        public object GetProjectRegelList (int id)
        {
            VMProjectOnderhoud entity = VMProjectOnderhoud.GetById(this, id);
 
            entity.LoadProjectRegelList();
 
            return Json(entity.ProjectRegelList, JsonRequestBehavior.AllowGet);
        }
    }
}





Data Source
Paul
Top achievements
Rank 1
 asked on 14 Sep 2012
Narrow your results
Done
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
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
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
2440 2441
2442
2443 2444
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how