I read somewhere here in the forums that if you don't set a grid height you don't get the ajax spinner showing that data is loading....

Is this correct?

I want the grid to be only as tall as the data in it so it doesn't look ugly if I have a grid 800 tall with only 1 row in it...

How can I achieve this and still let the user see the spinner?

Trying to get a templated column in a kendo grid declaratively.  Something like:

<div id="sitesGrid" data-role="grid" style="width: 800px;"
                 data-sortable="true"
                 data-columns='[{ "field": "accountName", "title": "Account", "width": "150px" }, 
                { "field": "subAccountName", "title": "Sub Account", "width": "180px" }, 
                { "field": "siteName", "title": "Site", "width": "150px" }, 
                { "field":  { "template": "#= <input type='checkbox' />"}, "width": "80px"}]'
                data-source="AuroraSurveyTool.lovs.siteList">

But this doesn't work.   Completely screws up the HTML.    Some help would be appreciated.  Don't have a clue what I'm doing wrong.  Been through every example I can find.    I don't really need a check box.  Could also use a simple CSS style to switch between icons, but that doesn't seem to work either.   I just need to display two different states (true/false) in a column and fire an event.

The date time picker doesn't work with european date and time format. The time dropdown shows AM/PM format but the field populates properly with 24 hours format.

Code and screen shots attached.

Hi, I think ths is a real bug, because in th real world all need to refresh data in grid, but anyway... When I reload data in the grid, grid resets all expanded subtrees to collapsed state. Why I need to remember grid state each time I need to refresh data? And what I need to do to save state and load it back to the grid? Coud you provide source code which will save all expanded subtrees to expand them when data will be reloaded.

Hi!

I am implementing a treeview using HierarchicalDataSource. When I expand a node in the tree the tree is making a request to the server and the tree is populated with the retrieved children. The dataSource is set to be updated on dataSource.sync() when a user clicks a save button using a batch update.

// Add nodes problem
One of my problems is that I don't know how to add nodes to the tree and datasource. E.g. to a node, three steps down in the hierarchy. I am not sure I am doing this right.

If I do dataSource.add(node)
The node is added at the very end of the root which seems right. But how do I add a node to a specific place in the tree?

I have tried dataSource.insert(index, node) but it does not seem to work. What is this index? It seems like the data items existing in the dataSource has an index related to their parent, not a global index, i.e. there are multiple 0 indexes in the tree. Or has my treeview been built in a wrong way? I have tried with different indexes without success.

If I use treeView.append()/insertBefore/insertAfter the node is added to the tree but when i call dataSource.sync() they are not pushed to the server using the transport.create. I guess this is expected behavior since the dataSource does not know about these changes.

How should this be implemented?

// Drag drop problem
When I rearrange nodes using drag and drop and then do a dataSource.sync() the drag and drop changes seems to be sent as transport.destroy. Is this expected behavior? I would rather want an transport.update action.


Regards,
/ Mårten

Hello,

I looked up all existing threads now and had a look in implementations in the web, but did never found an option to ad an filter to <g> that allows a drop shadow effect. Any pointers to render this with Kendo, like described on SVG tutorials? I do not want to parse the rendered Graphs after generation to add the filter. There must be an API, or? ;)

<filter id = "i1" width = "150%" height = "150%">
      <feOffset result = "offOut" in = "SourceGraphic" dx = "30" dy = "30"/>
      <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10"/>
      <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>

http://www.svgbasics.com/filters3.html

Thanks in Advance,

HH

Hello,

I'm quite new to Kendo, and I bumped into a difficulty figuring out what is the best way to work with Kendo styles for the simple controls (button, textbox, checkbox, etc..)
Button was quite simple, cause adding the k-button class did all the work, but what about other controls?
I took a look at the source of the theme builder page, and I saw that for some controls more than one class is used.. 

I wonder whether adding the k-... class for each control is the best practice for simple controls, or am I missing something?

For example, if I want to have a textbox that has its style changing on hover, do I have to add a JavaScript code that adds the k-state-hover class to that element? Or is there any other way to do that?

What are the best practices in the simple UI controls? 

Any help will be appreciated.
Irit.

Our widgets reside in a div that has positioned fixed, and it has a vertical scroll. When using an KendoDropDownList for example, it gets positioned correctly, until i scroll inside that div, since the dropdown list has it's position relative to < body >.

I've tried patching the kendoPopup.js (i think it's the right one?) like so:

line 73: options.appendTo = $($(options.appendTo)[0] || parentPopup[0] || $("#container") || BODY);
line 360: viewport = $("#container"),

This fixes the scrolling issue, but ONLY when the #container's scrollTop is at 0, if I scroll down a bit before i open a dropDownList, the position of the list goes in a negative direction, way off.

Is there any fix for this?

<script type="text/javascript">
    var crudServiceBaseUrl = "api/VMDWebAPI";
    var deferReasonGrid = $("#DeferReasonGrid");
    $(document).ready(function ()
    {
        var DeferReasonDS = new kendo.data.DataSource({
            transport: {
                read: {
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "GET",
                    complete: function (jqXHR, textStatus) { }
                }
                ,
                create: {
                    cache: false,
                    contentType: "application/json;charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "POST",

                    complete: function (jqXHR, textStatus)
                    {
                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }
                },
                update: {
                    cache: false,
                    contentType: "application/json;charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "PUT",

                    complete: function (jqXHR, textStatus)
                    {
                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }
                },
                destroy: {
                    url: crudServiceBaseUrl,

                    type: "DELETE",
                    complete: function (jqXHR, textStatus)
                    {

                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }

                },
                parameterMap: function (data, operation)
                {

                    if (operation == "update" || operation == "create") {
                        if (data.models[0].DeferReasonID == null && operation != "destroy") {
                            operation = "create";
                        }
                        else {
                            operation = "update";
                        }
                        return kendo.stringify({ DeferReason: data.models[0] });
                    }
                    else if (operation == "destroy") {

                        return kendo.stringify({ DeferReason: data.models[0] });
                    }
                }
            }
            ,
            batch: true,
            pageSize: 12,
            schema: {
                model: {
                    fields: {
                        DeferReasonID: { editable: false, nullable: true, defaultValue: '00000000-0000-0000-0000-000000000000' },
                        Description: { validation: { required: true, validationmessage: "Required:Description"} },
                        CreatedDate: { type: "date", editable: false, template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #' },
                        ModifiedDate: { type: "date", editable: false, template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #' }
                    }
                }
            }
        });


        var DeferReasonGrid = deferReasonGrid.kendoGrid({
            dataSource: DeferReasonDS,
            pageable: false,
            navigatable: false,
            selectable: true,
            sortable: false,
            editable: { mode: "popup", destroy: "true", update: "true", confirmation: "Are you sure you want to remove this Defer Reason?" },
            toolbar:
                    [
                        "create"
                    ],
            columns:
                    [
                        {
                            field: "Description",
                            title: '<span style=\'text-align:left;\'>Description</span>',
                            width: "360px"
                        },

                        {
                            command: "destroy"
                        }
                    ]
        });
    });
</script>


Here is my API

public class VMDWebAPIController : ApiController
    {

        [HttpGet]
        public DeferReason[] GetAllDeferReason()
        {
            try
            {
                return DeferReasonDAL.GetAllDeferReasons().ToArray();
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpPost]
        public void InsertDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Insert(DeferReason);
             
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpPut]
        public void UpdateDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Update(DeferReason);
              
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpDelete]
        public void DeleteDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Remove(DeferReason.DeferReasonID);
               
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }


    }

Is it possible for the grid header's functions, like sort, filter etc to drop down on hover like the kendo menu.
like the question state, i was just wonder if this is possible, i have try to use jquery hover etc but nothing seems to work,