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,

Hello im using KendoWindow and works fine but i can't find how to pass parameter, now im using MVC and passing the parameter throw slash number, is any other way?

        $(document).ready(function () {
            $("#window").kendoWindow({
                content: "AjaxContent/5",
                title: "Async Window Content"
            });
        });

Thanks
Santiago.

I've seen samples that show how to set up paging with the Kendo Grid, but it does not work.   Why isn't it working?

The 'view' code looks like:

and the controller looks like:

I'm modifying a bit of code that originally used the MVC extensions to generate a grid to just use the native code instead. I used the demo code for local data as a sample.

I'm not receiving any errors, but it's not actually working either. I'm sure I'm missing something silly but I'm not really seeing it. Maybe someone else will see what I'm not.

Here's what the page basically looks like:

The grid doesn't render at all - just an empty page. I'm not seeing any kinds of Javascript errors.

Not shown, but included are a reference to jQuery, kendo.web.min,js, etc. I know those references are correct because I've got another page using the same template that works (the only difference is the grid on that page gets its data via JSON).

I have a grid with inline editing enabled. The editor template for one column is a ComboBox which is linked to a dataSource containing currency values and descriptions.
I want to configure this grid so it displays the currency description in the currency column of the table, but the value sent back and forth when editing or adding new rows is the shortened currencyCode (or in another similar instance, a numeric value).  It's easy enough to set up a ComboBox to behave this way, displaying text in the dropdown list, but submitting the value; I just want to get the grid cell functioning the same way.

I have tried to figure out how to use the schema "data" or "parse" options, or the transport "parameterMap" option, but between the documentation, the forums, posted examples, the code library, and Google, I still cannot figure out how to get it to work.

if I use parameterMap(data, operation) {} and try to output the "data" to the console with console.log(data) I receive "undefined", whereas upon returning the data, the grid receives it and operates on it perfectly fine. Because of this, I am unable to ascertain the data structure and figure out how to navigate it and modify it.

With the "data" and "parse" options under schema, there are no functional examples I can use. I found an example of using "parse" to convert a value to a date, but that's all. (here)

Does anyone have any useful examples I may have missed that will help me? Or can anyone explain how to use the "parameterMap" "data" and "parse" functions? It should be simple, but without documentation, it is not.

Thank you.