I would like to suggest a simple upgrade to "Insert hyperlink". It would be great if you would split out the prefix from the address and have a selector that allows the user to choose website, email, or phone.

Selector: Website/Email/Phone
Address:sales@kendoui.com
Text: Kendo UI
Tooltip: Click Here
Open Link in new window: Yes

Results:
<a href="http://www.kendoui.com">Kendo UI</a>
<a href="mailto:sales@kendoui.com">Kendo UI</a>
<a href="tel:8883652779">Kendo UI</a>

I am trying to bind data from asp.net data control(data table) to Kendo UI Grid.
but i don't know how to bind data in grid using datasource
& what should i give input parameter to datasource method of Kendo UI Grid.

Does we have any other way to bind data other than JSON ?

Please explain me with example.
 

 Hi,

I'm migrating a project from ASP.NET MVC Extensions to KendoUI. I'm trying to figure out the best way to re-create this grid binding using KendoUI and without any serverside code. I can't find anything to do with onRowDataBound or similar in the documentation.

As you can see, as each row is databound, it attaches the countdown jquery plugin (http://keith-wood.name/countdown.html) and uses the current dataItem's Due datetime value.

Is the only way to do this using javascript inside the <script id="rowTemplate" type="text/x-kendo-tmpl"> element?

How can I recreate this to work with KendoUI?

This is sample output for one row once it has been rendered:
Thanks

When I have a ModalView open and change the orientation of my iPad, the ModalView is no longer centered.  How do I get it to re-center? I assume I need to bind on the orientationchange event, but I don't know what code I can use to re-center.

     $(window).bind('orientationchange', reCenter);

     function reCenter() {
          // unknown recenter code??
     }

Thank you,
Jason

For a specific reason I'd like to use my kendo mobile app also through desktop browser (webkit). Is there a way to enable mouse wheel scrolling of my views?

Are you planning to support sliders and pickers in KendUI Mobile anytime soon? Is there any workaround or any good third party widget you use to add a slider range? I tried with <input type="number">, but it's ugly.

Thanks for the information.

Hello all,

I am trying the detail template today and I have the detail template for my parent grid (pasted below).   The CustomerNumber is coming from the parent grid and I am getting my read result set just fine.  The issue is the parameters I need such as "DocID" you will below are coming up undefined.   Those params are in the model for the template I have DocumentModel.   How do I pass those params from the detail template model versus the parent model?

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=CustomerNumber#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Attachments").Content(@<text>
@(Html.Kendo().Grid<ABC.DataModel.Document.DocumentModel>()
.Name("grid_#=CustomerNumber#")
.Columns(columns =>
{
columns.Bound(p => p.DocumentType).Width(40).Title("Type").ClientTemplate("#=RenderImage(data)#");
columns.Bound(p => p.DocumentName).ClientTemplate(@Html.ActionLink("#=DocumentName#", "DownloadFile",
new { ID = "#=DocID#", fileRef = "#=FileRef#", fileName = "#=DocumentNameExt#" }).ToHtmlString());
columns.Bound(p => p.ModifiedDate).Title("Modified");
columns.Bound(p => p.ModifiedBy).Title("Modified By");
columns.Bound(p => p.LatestVersion).Title("Latest Version");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("CustomerAttachments_Read", "Customer", new { library = "#=CustomerNumber#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
})
.ToClientTemplate())
</script>

Thank you all in advance for your assistance. I am new to Kendo and trying to work my way through some event examples. I have two questions.

For my scenario I have an array of items that I am binding to a treeview. Each data item looks like this...
[{"id": 24820, "parentId": 0, "title": "Kendo", "target": "_blank", "href": "http://www.kendoui.com", "active": true, "hasChildren": false}, ...]

Questions #1: Can I access data elements of a node on a select event?

Question #2: Is there a way to cancel page change onSelect? e.preventDefault() does not seem to work for me.

I am trying to use the data above and onSelect determine if the "target" is set to "_blank". If it is, I want to execute an open new window and prevent the current page from changing. If not, I want the normal logic to run.

Sample Code:

Is this even possible? Any suggestions? I tried both through a datasource, and with native js + jquery and as soon as elements are added the scroller loses its ability to scroll.

example code below:
an example json file can be found here": https://projects-galcohen.rhcloud.com/shutup/channels.json

 <div id="mypage" data-layout="default" data-role="view" data-init="getScroller">
                Foo2222
            <div class="clearfix" id="channelcontainer" data-role="scroller" ></div>
            </div>
                    
        
        <script id="channeltemplate" type="text/x-kendo-template">
             <div class="img_icon">
                 name:#= name # <br>
                 chan:#= number # <br>
                 priority:#= priority # <br>
                 
             </div>
            
       </script>
            
        <script>
            
            var dataSource = 0; 
            var template = kendo.template($("#channeltemplate").html());
            
            function getScroller(e) {
                alert("HIHIHIH");
                     console.log("MADE IT HERE");
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "channels.json",
                            dataType: "json",
                        }
                    },
                    schema: {
                        data: "channelresults"
                    },
                    change: function() { // subscribe to the CHANGE event of the data source
                        $("#channelcontainer").height(150);
                        $("#channelcontainer").html(kendo.render(template, this.view()));
                        
                    }
                });
            
                dataSource.read();
                var scroller = e.view.scroller;
            }

        </script>

it seems that the initScroller function is never being called. If I call it manually, the json file does load and the divs appear, but the outer div loses its Scroller abilities.

Any idea what I might be doing wrong?

<div class="clearfix" id="channelcontainer" data-role="scroller" data-init="initScroller">
                       
</div>

 <script id="channeltemplate" type="text/x-kendo-template">
             <div class="img_icon">
                 name:#= name # <br>
                 chan:#= number # <br>
                 priority:#= priority # <br>
             </div>
       </script>


<script>
            var dataSource = 0; 
            var template = kendo.template($("#channeltemplate").html());
            
            function initScroller(e){
                //alert("hi");
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "channels.json",
                            dataType: "json",
                        }
                    },
                    schema: {
                        data: "channelresults"
                    },
                    change: function() { // subscribe to the CHANGE event of the data source
                        $("#channelcontainer").html(kendo.render(template, this.view()));
                    }
                });
            
                dataSource.read();
                
                var scroller = e.view.scroller;
            }
        </script>
            
        <script>
            var app = new kendo.mobile.Application(document.body);
        </script>


this is the json file: https://projects-galcohen.rhcloud.com/shutup/channels.json