Hy Everyone

We are interested in migrating from jquery.mobile to kendoUI mobile. 
We are using thorax (https://github.com/walmartlabs/thorax) and we only want to use kendo ui mobile for the ui bot not for the routing. 

Is it possible to use a different routing (like Backbone, Knockout etc.) with kendo ui mobile or not? Exists any example how kendo ui mobile can be used with any of those frameworks (I know there is a backbone blog post for kendo ui, but not for kendo ui mobile). 

Thanks a lot

Hi - we are looking for the possibilities to see and use the Kendo UI..

how to define the Custom Template here


@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Screening>()
.Name("scheduler")
.Date(new DateTime(2013, 6, 13))
.StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
.EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
.Height(600)
.AllDayEventTemplateId("customAllDayTemplate")
.Views(views =>
{
views.DayView();
views.AgendaView();
})
.BindTo(Model)
)

Hi,

I am building a test rails/kendo mobile application which have three main models: Organizations, Shops and Categories.
The shop model has latitude and longitude among its attributes. This is because I would like to show a map on the Shop details view with a marker where the shop is. The first time I view a random shop, the code works fine, and the map renders with the marker. But when I click the back button (browser back button) or the Shops link (in tabstrip) then try to navigate to another shop the map won't show up only if I hit refresh on the browser.

First I thought that this happens because of the changing coordinates (which are placed directly inside the javascript like this: .LatLng(<%=@shop.latitude%>, <%=@shop.longitude%>) ). But no. Even with a simple map like this it won't show up from the second shop view:
       function shopMap(e) {
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapElement = $("#shopmap");
            var container = e.view.content;

            var map = new google.maps.Map(mapElement[0], myOptions);
        }

I tried to place the above code directly inside the the view where the shop data is rendered, which would be my preferred way of doing this to be able to change the coordinates dynamically from db, but also tried to place the code in application.html.erb, but no effect (to mimic the google maps example in the code library).

I tried to init the map with the following data attributes:
data-init
data-before-show
data-show

Also tried to set:
data-reload="true"

but none of them and none of their combinations seems to work.

Here is the code for the shop view:
<div data-role="view" data-layout="default" data-show="shopMap" data-reload="true" data-init="shopMap" data-after-show="shopMap" data-title="<%= @shop.title %>" data-zoom="true">
    <h1 id="shoptitle"><%= @shop.title %></h1>
    <%= image_tag(@shop.logo.thumb.url) %>
    <p><%= @shop.description.html_safe %></p>
    <p id="latitude"><%= @shop.latitude %></p>
    <p id="longitude"><%= @shop.longitude %></p>
    <div id="shopmap">
        
    </div>
    <script>
        function shopMap() {
            var myOptions = {
                center: new google.maps.LatLng(<%= @shop.latitude %>, <%= @shop.longitude %>),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapElement = $("#shopmap");
            var container = e.view.content;

            var map = new google.maps.Map(mapElement[0], myOptions);
        }  
    </script>
</div>

The reason why I gave ids to the p tags which contain the latitude and longitude is that I tried to place their values inside js variables to pass them to the shopMap function. But that doesn't work either.

I also tried the kendoMap plugin. But it doesn't work either with the basic settings.

My end goal is to make the map appear without page refresh with the marker which belongs to the currently viewed shop.

Please give me some suggestions, pointers to make this happen!

Best Wishes,
Matt

Hi
I have 2 dropdown in the edit template.

<input id="1" style="width: 300px" />
<input id="2" disabled="disabled" style="width: 300px" />

on selection of 1st dropdown , I fill 2nd dropdown (using cascading e.g.) ,  for some values in the 1st  dropdown I need to show textbox in place of 2nd dropdown as a result.

How to achieve this?

On http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/mobilelayout/overview#example---get-reference-to-a-kendo-ui-mobilelayout-instance , you should notice that the jQuery call to:
is not using the correct id of the Layout element, which is "MobileLayout".

I have trouble getting the Kendo Grid ASP.NET MVC  Ajax implementation to work
The Javascript/Jquery version worked like a charm, the ASP.NET MVC has been quite a challenge.

I have a grid and a detail template. At first, when I added the ClientTemplate code, the page would display a javascript error of Invalid template. I searched for a while on this and 2 solutions were offered.
1. Commenting the System.WebSecurity.AntiXss enry form the Web.config
2. Using .ToMvcClientTemplate() as created by someone (Extension method on MvcHtmlString). The code for this is below

I tried both the options. now the page loads with no javascript error, but no mater how much i click on the arrow in the row (which should open the tab),
nothing happens. I even have  a break point in the controller that never gets hit.

One final note, when I change the mode to IE9, the page throws a javascript error:
Unhandled exception at line 18, column 19554 in http://localhost:1770/Scripts/kendo/2013.1.514/kendo.web.min.js

Please advise. Here is the code:

@(Html.Kendo().Grid<PPSPortal.Models.ATM>()
                                  .DataSource(dataSource => dataSource
                                      .Ajax()
                                      .Read(read => read.Action("GetATMStatusGrid", "ATM", new { id = participantId, userId = userId, pageid = 3 }))
                                      .PageSize(10)
                                      .ServerOperation(false)
                                   )
                                    .Events(ev => ev.DataBound("onDataBound"))
                                    .Name("Grid")
                                    .Sortable()
                                    .Filterable()
                                    .Pageable()
                                    .ColumnMenu().Events(x=>x.ColumnHide("UpdateColumnsWhenHidden").ColumnShow("UpdateColumnsWhenShown"))
                                    .Groupable()
                                    .ClientDetailTemplateId("template")
                                    .Columns(cl=>
                                        {
                                            cl.Bound(x => x.Id);
                                            cl.Bound(x => x.Name);
                                            cl.Bound(x => x.Status);
                                            cl.Bound(x => x.Active);
                                            cl.Bound(x => x.Online);
                                            cl.Bound(x => x.TotalCashRemaining).Format("{0:c}") ;
                                            cl.Bound(x => x.LastMessageFromATM);
                                            cl.Bound(x => x.LastMessageToATM);
                                            cl.Bound(x => x.GroupName);
                                            cl.Bound(x => x.Location);
                                        })
                                    .ToolBar(toolbar =>
                                    {
                                        toolbar.Template(@<text>
                                            <div class="toolbar">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            @Html.JHAButton("Excel", "", "Export To Excel")
                                                            @Html.JHAButton("CSV", "", "Export To CSV")</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            </text>);
                                    })
                )

@(Html.Kendo().TabStrip()
            .Name("tabStrip_#=Id#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Events").Content(@<text>
                    @(Html.Kendo().Grid<PPSPortal.Models.ATMDetails>()
                        .Name("grid_#=Id#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.Event).Width(56);
                            columns.Bound(o => o.MessageParamValue).Width(110);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(read => read.Action("GetDetails", "ATM", new { id = @participantId, termId = "#=Id#", termName = "#=Name#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add().Text("Cassette Details").Content(
                "<div class='cassette-details'>" +
                "</div>"
                );                
            })
            .ToClientTemplate().ToMvcClientTemplate())


The MvcHtmlString extension method:

    public static class KendoMvcExtensions
    {
        public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
        {
            if (HttpEncoder.Current.GetType() == typeof(AntiXssEncoder))
            {
                var initial = mvcString.ToHtmlString();
                var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace("&#32;", " ");
                return new HtmlString(corrected);
            }

            return mvcString;
        }
    }

Another problem is that even though I have specified Groupable above, that does not work either. A circle with a line across it appears.
i suspect it could be the js files I am referencing.
They are bundled in the BundleConfig.cs.

This is the BundleConfig.cs


public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));


            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

            // Script bundles
            bundles.Add(new ScriptBundle("~/bundles/jhaCtls").Include(
                        "~/Telerik/js/jquery.min.js",
                        "~/Scripts/kendo/2013.1.514/kendo.web.min.js",
                        "~/Scripts/kendo/2013.1.514/kendo.all.min.js",
                        "~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js",
                        //"~/Scripts/kendo/2013.1.514/kendo.dataviz.min.js",
                        //"~/Scripts/kendo/2013.1.514/jquery.min.js",
                        "~/HTMLCtls/js/JHAHTMLCtls-2013.1.1.0.min.js"));

            // Style bundles
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
            bundles.Add(new StyleBundle("~/Telerik/css").Include("~/Telerik/styles/kendo.common.min.css", "~/Telerik/styles/kendo.dataviz.min.css"));
        }
    }

Hi

I'm trying to use the kendo upload web control with C#, I can upload the controls is always on error, I know that I have to return an empty response but I don't know exactly how. This is my javascript

<script>
            $(document).ready(function () {
                $("#files").kendoUpload({
                    async: {
                        saveUrl: "Attachments.aspx",
                        removeUrl: "remove",
                        autoUpload: true
                    }
                });
            });
        </script>

and on C# I have

protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection x = Request.Files;

        if (x.Count>0)
        {
            Response.Clear();
            Response.ContentType = "application/json";
            Response.Write("{}"); 
        }
    }

I tried with Response.Write("") to with and without contentype but it didn't work.

Do anyone know how to build the correct success response?

I have a ListView template that contains an index field (VentTypeId) and a text field (VentDescription) that shows text for the index field. The text field getter does a lookup up for the text corresponding to the index field.  I have an EditorTemplate with a dropdownlist to modify the index field, and after the save the index field is changed but the text field is not. I suppose I need to indicate that the text field has to be re-bound in the template after the edit, but don't know how.

Here is the relevant part of the View:

The relevant part of the template. Here the VentTypeId displays the changed value but the VentDescription field does not:

The relevant parts of the EditorTemplate

The relevant parts of the VentSetting model:

Any help would be appreciated.

Steve

So I have a combobox that I have given a width of 100px.  The dropdown on the combobox however I would like to be about 300px wide.  It appears that the width of the dropdown is limited by the width of the actual combobox.

I've tried using templates to make the dropdown wider, but then it just puts a horizontal scrollbar in.

The reason I want this is that  for the dropdown we are displaying both a Code and the Description of the code such as "02343 - Some Descrition Here", but then when they select an option just the code goes into the combobox...  That being said we have everything working except for the width of the dropdown portion of the combobox.

Thanks

I've managed to get the data through the read method, as already got the otherCRUD operations. However I want to know how to get the result (true or false) of an operation (create, update or delete) coming from my PHP script on the server. Here's the code:

Kendo:

 var JsonDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "alunos_read.php", 
                                dataType: "json"
                            },
                            create: {
                                url: "alunos_add.php", 
                                type: "POST"
                            },
                            update: {
                                url: "alunos_update.php",
                                type: "POST"

      ...

PHP:

        mysql_query("update alunos set aluno = '".$aluno."' where cod_aluno = '".$cod_aluno."'");
$result = array('result' => (mysqli_affected_rows >= 0));
           
echo json_encode($result); // I want to get this overall result and show in an alert () function. How do I do this?