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.....

The code below places drop down filter boxes on to the page.  The row appears to be inside an attribute called K-grid-header-wrap.

I want to change the text weight, the code below changes the size and if I change to bold will change some menu headers to bold, but will remove the bold from the menu headers but not the filters headers.  I have tried changing the attributes for k-header k-filterable and k-grid-filter but nothing seems to affect the weight of the font.

/*this is the code for the menu list and the headings across the page*/
.k-link {
    font-weight:normal;
    font-size:10px;
}

This is the scripting generated by the programmers
<th class="k-header k-filterable" scope="col" data-title="Category" data-field="MedicalCategory" data-role="sortable"><a class="k-grid-filter" tabindex="-1"> … </a><a class="k-link" href="/Clients/ReturnClientMedicalIssues?CUID=1&MedicalGrid-sort=MedicalCategory-asc"> … </a></th>

Any help appreciated
Kind regards

I was trying to bind a data grid with plain JSON object array and it does not seem to work with grid.

http://jsfiddle.net/63LPg/14/

Can you help me with this?

Been noticing some weird things with the formatting buttons and how they affect the text

Repro steps:
1. press bold
2. start typing: 'asdf'
3. press italic
4. type more: 'qwert'

Expected:
'asdf' is in bold while 'qwert' is bold and italic

Actual:
'f' is bold and italic

is this a known bug?

I already have a custom icon font I created and have been using elsewhere that is prepended with 'icon-' instead of 'km-'. I have various reasons for wanting to not switch it to us 'km-' within the tabstrip.

How can I do this?