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.

When I set a filter on the datasource used by my autocomplete widget, the filter seems to be cleared the moment you search inside the autocomplete. Is there a way to override this functionality? I have a grid that I am filtering in several different ways and I want the autocomplete data to be updated to show these other filters. Code can be found below.

    var ds = new kendo.data.DataSource({data: createRandomData(50)})

    //create AutoComplete UI component
    var autoComplete = $("#input").kendoAutoComplete({
        dataSource: ds,
        dataTextField: 'FirstName',
        filter: "startswith",
        placeholder: "Search by First Name..."
    });
    var grid = $('#grid').kendoGrid({
        dataSource: ds,
        columns: [
            {field: 'FirstName', title: 'First Name'}
        ]
    });
    
    ds.filter([{ field: "FirstName", operator: "contains", value: "La" }]);

The filter I manualy add in is automatically removed the moment I begin typing inside the autocomplete where instead I want to simply add an additional filter using the autocomplete. Any help is appreciated.

Thanks