Hi,
Thanks for the example http://www.kendoui.com/code-library/mobile/application/using-google-maps-in-kendoui-application.aspx#0 
.
I have used the sample in my application, works fine in chrome while checking on my desktop but nothing loads on firefox, I am using firefox 12.

Can't see any errors with JavaScript, I have checked with fire-bug.
Also when my colleague tried in his mac book iPhone simulator, it did not load the map.

Any suggestions? 

Regards,
Bala.

What's wrong with this picture. The grid in the attached image has a row with nothing in it. 

The bind method in the ajax call seems to work but no data is shown even though there is a row in the grid that shows a cursor when I hover over it.

// Razor
 @(Html.Kendo().Grid<MemberAssessmentSearchResult>()
            .Name("Assessments")
            .Columns(columns =>
                {
                    columns.Bound(item => item.DisplayName).HeaderTemplate("Member Name").Width(80);
                    columns.Bound(item => item.ProviderName).HeaderTemplate("Provider Name").Width(80);
                    columns.Bound(item => item.CampaignName).HeaderTemplate("Campaign").Width(65);
                    columns.Bound(item => item.ClientName).HeaderTemplate("Client").Width(50);
                    columns.Bound(item => item.ServiceDate).HeaderTemplate("Date of Service").Format("{0:M/d/yyyy}").Width(90);
                    columns.Bound(item => item.Source).HeaderTemplate("Source").Width(50);
                    columns.Bound(item => item.Source).HeaderTemplate("Edit").Width(50);
                    columns.Bound(item => item.ClientID).Hidden(true);
                    columns.Bound(item => item.CampaignID).Hidden(true);
                    columns.Bound(item => item.MemberID).Hidden(true);
                })
                 .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read =>
                            {
                                read.Action("DoMemberSelectSearch", "MemberSearch");
                                read.Data("additionalDataSelect");
                            }))
                 .Selectable()
                 .Scrollable(scroll => scroll.Height(250))
                 .AutoBind(false)
                )

// Controller
[HttpPost]
        public ActionResult DoMemberSelectSearch([DataSourceRequest(Prefix = "DoMemberSelectSearch")]DataSourceRequest request, string clientid, string memberid)
        {
            var clientId = Convert.ToInt32(clientid);
            var memberId = Convert.ToInt32(memberid);
            
            var results = _memberSearchRepository.Search(clientId, memberId);
            var data = results.ResultSet;

            DataSourceResult result = data.ToDataSourceResult(request);

            JsonResult jresult = GetJsonResult(result, true);
            return jresult;
        }

// Ajax
var searchRequest = $.ajax({
                url: '@Url.RouteUrl(new { controller = "MemberSearch", action = "DoMemberSelectSearch" })',
                datatype: "json",
                type: "POST",
                data: json,
                success: function(data, textStatus, jqXHR) {
                
                    var grid = $("#Assessments").data("kendoGrid");
                    if (data.Data.length != 0)
                    {                   
                        
                        CloseBusyDialog();
                        setTimeout($("#dialog").dialog("open"), 1000);
                        grid.bind(data.Data);
                    }
                                              
                },
                error: function(jqXHR, textStatus, errorThrown) {
                
                    alert("An AJAX error occurred while searching member assessments.");
                              
                }
        })   

Hi,

I have a listview component that uses a template like so:

$("#listView").kendoListView({
                dataSource: _series,
                template: kendo.template($("#template").html()),
                selectable: true,
                change: function() {
                     var index = this.select().index(),
                        dataItem = this.dataSource.view()[index];
                }
}

<script type="text/x-kendo-tmpl" id="template">
            <div class="listItem">
                <input type="checkbox" value="#= id #"/>
            </div>
</script>

What I would like is for the checkbox to fire the listview change event, instead of the listview itself. How do I accomplish this? Thanks.

Tonih

Does DataVis support writing of custom renderers for parts of visualisations, for example bars in bar charts?

We need to plot some bar charts but with custom bars (e.g. round corners so they look more like lozenges). There's also possibly a requirement later for overlaying custom icons on or near bars.

Would Kendo DataVis allow us to do this?

I'm new to Kendo, so this may be a stupid question.

I'm trying to use use a hidden input field as a data source and this is failing.

<input id="jsonall" type="hidden" value='{ "university": { "AltBreak": "Yes", "ABAverage": "5.8", "id": "17360" } }'>
<span data-bind="text: university.AltBreak"></span>
<span data-bind="text: university.ABAverage"></span>
<span data-bind="text: university.id"></span>

var viewModel = kendo.observable($('input[id=jsonall]').val());
kendo.bind($("span"), viewModel);

But if I hard code the data like below, it is working:
var viewModel = kendo.observable({ "university": { "AB": "Yes", "ABAverage": "5.8", "id": "12345" } });

Any suggestions?

Thanks.

i need to recreate the structure of the image in attachment is that possible with treeview?

How can I adjust the row height of the main table?
I have set up a new class called .xxx (I am experimenting)  with the following code I tried reducing the padding and margins but it did not seem to make any difference to the minimum height the row could shrink to.

.xxx {
padding:0px 0px 0px 0px;
height:30px;
margin:0px 0px 0px 0px;
font-size:10px;
font-style:normal;
white-space:normal
}

I have tried making the text 2px to see if it made a difference but it does not so I know there must be another parameter that I need to change.

the following is an extract from the coding that has been created largely by default.



<table class="xxx" cellspacing="0" role="grid"><colgroup><tbody><tr role="row" data-uid="b898281e-0146-4fbb-b0a6-afeaef8a3e94"><td role="gridcell" style="display:none">1</td><td role="gridcell" style="display:none">1</td><td role="gridcell">Hearing</td><td role="gridcell" title="Description: very forgetful in the mornings and if i put a lot of text in here ">very forgetful in the mornings and if i put a lot of text in here</td><td role="gridcell">true</td><td role="gridcell" title=" and there is some info in here toocc ">and there is some info in here toocc</td><td role="gridcell"></tr>

any help gratefully received
Marion

I am trying to modify the K-grid-header and I am having difficulty modifying the height of the box.  By experimenting with different attributes I have managed to reduce it.  for instance if I reduce the font size the box gets smaller, but I cannot see another attribute that I can use to reduce the size of the box.  If I change the height of the box the links inside start to disappear.  the primary white space is above.
any ideas of the attribute that needs changing?
or how can I easily see all the attributes including parent attributes?
Many thanks
Marion

1- I am trying to change the height of the NavBar a few pixels more and I don't know how to do that. Is there any documentation that could show what tag should be invoke to style the elements of the app?

2- I am also trying to edit the height of the list and I was successful doing so with:

.km-ios .km-list > li {
  line-height: 2.2em;
}

The problem is that I'm not able to edit the border-radius the same way. It is only changing the rows that are not the top nor bottom. I would like to change the rounded corner radius to to the top and bottom rows only from a list of rows.

3- How can I make my web app run in offline mode? Can it save a manifest file locally once it loads for the first time?

4- How can I remove the word "Loading"  from the spinner popup when it is loading for the next screen? I would like to only show the spinner and, if possible, how can I change the spinner sprite or gif image?

5- If I do these changes, will it affect the Android and Windows Phone version?

6- I am also curious to see if someone have done something with KendoUI similar to the Windows Phone metro style (tiles).

Hello All,

  I have a issue in apply custom DropDownList control in Tabstrip control.
  In my Tabstrip i have multiple DropDownList box with different id and also i set Checkbox in DropDownList item.
 My problem is First Tab render perfectly but rest of tab data does not render.

 Please see below my code....

HTML Page:
<div id="example" class="k-content">
            <div id="forecast">
                <div id="tabstrip">
                    <ul>
                        <li class="k-state-active">
                            Paris
                        </li>
                        <li>
                            New York
                        </li>
                        <li>
                            London
                        </li>
                        <li>
                            Moscow
                        </li>
                        <li>
                            Sydney
                        </li>
                    </ul>
                    <div>
                        <div id="testView">
    <select id="testItems"  multiple="multiple" data-role="multiselectbox" data-option-label="-" data-text-field="Text" data-value-field="Value" data-bind="source: testItemSource, value: testItems" />
</div>
                        
                    </div>
                    <div>
                        <div class="weather">
                            <h2>29<span>&ordm;C</span></h2>
                            <p>Sunny weather in New York.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>21<span>&ordm;C</span></h2>
                            <p>Sunny weather in London.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>16<span>&ordm;C</span></h2>
                            <p>Cloudy weather in Moscow.</p>
                        </div>
                        <span class="cloudy">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>17<span>&ordm;C</span></h2>
                            <p>Rainy weather in Sydney.</p>
                        </div>
                        <span class="rainy">&nbsp;</span>
                    </div>
                </div>
            </div>
     
     
            <script>
                $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });
            </script>


JS File:
// MultiSelectBox, Kendo Plugin
// -----------------------------------------------------------
(function ($) {
    var MultiSelectBox = window.kendo.ui.DropDownList.extend({

        init: function (element, options) {
            var me = this;
            // setup template to include a checkbox
            options.template = kendo.template(
                kendo.format('<label><input type="checkbox" name="{0}" value="#= {1} #" />&nbsp;#= {2} #</label>',
                    element.id + "_option_" + options.dataValueField,
                    options.dataValueField,
                    options.dataTextField
                )
            );
            // remove option label from options, b/c DDL will create an item for it
            if (options.optionLabel !== undefined && options.optionLabel !== null && options.optionLabel !== "") {
                me.optionLabel = options.optionLabel;
                options.optionLabel = undefined;
            }

            // create drop down UI
            window.kendo.ui.DropDownList.fn.init.call(me, element, options);
            // setup change trigger when popup closes
            me.popup.bind('close', function () {
                var values = me.ul.find(":checked")
                    .map(function () { return this.value; }).toArray();
                // check for array inequality
                if (values < me.selectedIndexes || values > me.selectedIndexes) {
                    me._setText();
                    me._setValues();
                    me.trigger('change', {});
                }
            });
            me._setText();
        },

        options: {
            name: "MultiSelectBox"
        },

        optionLabel: "",

        selectedIndexes: [],

        _accessor: function (vals, idx) { // for view model changes
            var me = this;
            if (vals === undefined) {
                return me.selectedIndexes;
            }
        },

        value: function (vals) {
            var me = this;
            if (vals === undefined) { // for view model changes
                return me._accessor();
            } else { // for loading from view model
                var checkboxes = me.ul.find("input[type='checkbox']");
                if (vals.length > 0) {
                    // convert to array of strings
                    var valArray = vals
                        .map(function (item) { return item + ''; });
                    checkboxes.each(function () {
                        this.checked = $.inArray(this.value, valArray) !== -1;
                    });
                    me._setText();
                    me._setValues();
                }
            }
        },

        _select: function (li) { }, // kills highlighting behavior
        _blur: function () { }, // kills popup-close-on-click behavior

        _setText: function () { // set text based on selections
            var me = this;
            var text = me.ul.find(":checked")
                .map(function () { return $(this).parent().text(); })
                .toArray();
            if (text.length === 0)
                me.text(me.optionLabel);
            else
                me.text(text.join(', '));
        },
        _setValues: function () { // set selectedIndexes based on selection
            var me = this;
            var values = me.ul.find(":checked")
                .map(function () { return this.value; })
                .toArray();
            me.selectedIndexes = values;
            me.element.val(values);
        }

    });

    window.kendo.ui.plugin(MultiSelectBox);

})(jQuery);
// ===========================================================

// view model
// -----------------------------------------------------------
var testVM = kendo.observable({
    testItems: [],
    testItemSource: new kendo.data.DataSource({
        data: [
            { Value: 1, Text: "Test 1" },
            { Value: 2, Text: "Test 1" }
        ]
    }),
});
// ===========================================================

$(document).ready(function () {
    kendo.bind($("#testView"), testVM);
    kendo.bind($("#templateView"), testVM);
    
});

Css:
body { font-family: sans-serif; }

Thanks in advance.....