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?

I have a grid below rendered by knockout, and have some pre-defined information returned from server which need to be shown as in footer.
It works fine in ie9, but not ie7/8 by saying "SCRIPT5022: Unable to parse bindings."


I remove header/footerAttributes, the grid is rendered, but the other columns are squeezed to the space below the first column. so I think the exception is caused by footerAttributes, isn't it?

btw, is there a way to setup a rowtemplate for the footer with pre-defined data, instead of setting the aggregation from each column? so that, we can set the grand total regardless of the data of the grid.
I checked http://docs.kendoui.com/api/web/grid, but cannot find any clue...

------------------------------------------------------------------------------------------------------------------------------------
knockout: v2.1.0
jQuery: v1.8.3
jquery-ui-1.8.24

  <div class="ItemsGrid" data-bind="kendoGrid: {
    data: data.Items
    , rowTemplate: 'rowTmpl'
    , columns: [
          { field: 'Product.Description', title: 'Description',width:'40%' 
            , headerAttributes: { style: 'text-align: left;' }
            ,footerAttributes: { class:'ui-widget-header',style: 'text-align: right;'}
            , footerTemplate: function () { return                 'Warehouse Line Item Count: '+data.Basket.Summary.TotalItems +'<br/>Total Line Item Count: '+$root.data.OrderSummary.TotalItems;}
            }
        , { field: 'Product.Price', title: 'Price' 
            , headerAttributes: { style: 'text-align: right;' } 
            , footerAttributes: { class:'ui-widget-header', style: 'text-align: center;' }
            }
        , {
            field: 'Quantity', title: 'Qty', align: 'center',width:'5%'
            , headerAttributes: { style: 'text-align: center;' } 
            ,footerAttributes: { class:'ui-widget-header', style: 'text-align: center;' }
        }
    ]
    , useKOTemplates: true
}"></div>

------------------------------------------------------------------------------------------------------------------------------------

Your examples show your controls.  How about one that shows a whole form?

Hi Below is my code :

The issue is when I try to add the sections marked as bold I get this exception  The model item passed into the dictionary is of type 'System.Int32', but this dictionary requires a model item of type 'System.String'.

Note : I have a single controller that serves multiple views from multiple controller.