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
 

I currently have a two step process for my kendo charts. The first process is allowing the user to select the datasets (series) they want on the chart. They then choose a template. A template is the graph settings ex (color theme, chart type line, bar, circle ect.).

Currently if a user selects the datasets they want i return the series information to the graph and the graph is then populated with the template settings.

I also allow the user to change the template settings on the fly. For example a Bar chart to Line, Area, Circle ect. They can also change the theme. The issue becomes when the first load is set, the series information that i pass is:{
[name: "string", data: []],
[name: "string", data: []]
}
when i inspect the series object after the change on the template I see the following added to the object:{
[name: "string",
data: [],
type: "area",
color: "ff6800",
ect...
],
[name: "string",
data: [],
type: "area",
color: "ff6800",
ect...
],
}

The issue becomes that I can modify my object type to the correct selected type. I can even change the color value to a differen color for each series. However, because I am using the Kendo Themes, the chart background will change but then the series colors wont match. I could come up with a function to choose the background color for the chart and then choose what colors you want for your series. But I would rather use the kendo methods if possible.

I also think if i clear out that object and just use the settings and data I am passing it could work. However, I dont want to have to go to the database each time a page level changes is made and I also noticed that my object even if i create a temp object is given all of the chart properties.

Thank you in advance!

A grid being 'editable' can be set during initialization. Can this be set at runtime as well? I have a 'edit' mode that I would like to use to enable/disable editing of the Grid contents. I see in the documentation that Grid.editable can be set at initialization, but I don't see how it can be changed at runtime (after initialization to use the documentation's terms.)

When creating a DataSource from an array, I can iterate the strings.
Then I add a new string to the datasource.
As a result, three strings and one object are returned from the datasource.

What should be added, so that the loop returns four strings?

Michael G. Schneider

We have a kendo grid, which has a date field in it.  That date field is sometimes empty.  When kendo sorts ascending (future dates are at the end), the empty fields appear in the front.  Is it possible to change the sort mechanism to make empty dates appear lower in the sort order (near the bottom) rather than higher?

I'm trying to accomplish a simple task where upon validation result (failed or passed) I want to perform some action, for example set CSS style to a corresponding text element.  I want to do this per form element. Is there a way to do this? Is there as event that one can subscribe to ,like onValidationComplete(validation_result) ?