Hi Folks,
I have been on with this problem since morning.

I am trying to use the Kendo UI Auto-complete.

Given below are the scripts that I include

Given below is the HTML code picked up from the demo and slightly modified.



Given below is the format of the data that is returned.



The remote service is getting properly called and I also get the data (I viewed it using Fiddler).

However,
Even though the matching data is received the auto-complete dropdown just does not show anything. What am I missing?

Please help me on this. I am pretty sure I am missing something extremely simple.

Thanks in advance.

Hello Kendo guys,

Great framework! 
However, I'm having issues related with IE7 like sprites showing in the background on hovering, displacement of windows etc...
Could you please take a look at www.snickers-online.be/werk ?
Using IE8+, Chrome and Safari (on PC, not on iPad), the site shows fine. Using IE 7, the site is not usable at all.

Thank you in advance,

Wim

Hi,

We want to send the list of checked node IDs in a treeview to the controller.
We are facing an issue when we check the parent node, we are not able to retrieve the children node IDS for the checked parent node.
This is because we are using the treeviews on change event of checkbox.
When we check the parent node, the children nodes would not have been checked by then in onchange event of treeview.
We want some post node selection event so that by then children nodes wouild have been checked automatically by default and we get their node IDs.
We tried using databound or requestend events,we were not able to capture the children node IDs.

we are getting the node IDs this way.
var checkedNodes=$("input:checked",treeview)

Please help.!

Thanks.!

I'm using a Detailview grid that has a custom popup editor with an upload widget. When I hit edit, the popup displays as expected and I can upload a file. On successful file upload the popup window automatically closes (I would like to stop this from happening) and I get an exception "Uncaught TypeError: Object 1 has no method 'unbind'" in kendo.all.min.js, line 11.

Anyone have any ideas on what could be causing the exception and how to stop the popup window from closing once the upload is complete? I've been fighting with this all day and am no closer to finding a solution...

For reference I'm using KendoUI v2012.3.1304, below is the source code in all its hacked up glory.

@model List<MMWIDPlus.Areas.Admin.Models.ApplicationViewModel>

@section head {
    <script type="text/javascript">
        function KendoGrid_Error(e) {
            var window = $("#window").kendoWindow({
                width: '350px',
                height: '150px',
                modal: true
            }).data("kendoWindow");

            if (e.errorThrown.indexOf("authorized") > -1) {
                $("#ApplicationCategoryGrid").hide();
                $("#ApplicationGrid").hide();

                window.title("Authorization Error");
                window.content("<div style=\"background: url( '../images/lock-icon_32x32.png' ) no-repeat; padding-left: 40px;\">" + e.errorThrown + "</div><div style=\"text-align:right;\"><input type=\'button\' id=\'close\' value=\'Ok\' />");
            } else {
                window.title("Error");
                window.content("<div style=\"background: url( '../images/App-warn-icon_32x32.png' ) no-repeat; padding-left: 40px;\">" + e.errorThrown + "</div><div style=\"text-align:right;\"><input type=\'button\' id=\'close\' value=\'Ok\' />");
            }

            $("#close").click(function () {
                $("#window").data("kendoWindow").close();
            });

            window.center();
            window.open();
        };

        $(document).ready(function () {
            var applicationCategoryDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action( "ApplicationCategoryList", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    create: {
                        url: '@Url.Action( "CreateApplicationCategory", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    }
                },
                schema: {
                    model: {
                        Id: 'Id',
                        fields: {
                            Title: { type: 'string' },
                            Description: { type: 'string' }
                        }
                    }
                },
                error: KendoGrid_Error,
                pageSize: 10,
                serverPaging: true,
                serverFiltering: false,
                serverSorting: false
            });

            var applicationDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action( "ApplicationList", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    create: {
                        url: '@Url.Action( "CreateApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    update: {
                        url: '@Url.Action( "UpdateApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    destroy: {
                        url: '@Url.Action( "DeleteApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            ApplicationCategoryId: { type: 'number' },
                            ApplicationCategoryTitle: { editable: false, type: 'string' },
                            Id: { editable: false, type: 'number' },
                            Title: { type: 'string' },
                            Icon: { type: 'string' },
                            Description: { type: 'string' },
                            Timestamp: { editable: false, hidden: true },
                            URL: { type: 'string' }
                        }
                    }
                },
                error: KendoGrid_Error,
                pageSize: 10,
                serverPaging: true,
                serverFiltering: false,
                serverSorting: false
            });

            $("#ApplicationCategoryGrid").kendoGrid({
                columns: [
                    { field: 'Title', title: 'Title', type: 'string', width: 200 },
                    { field: 'Description', title: 'Description', type: 'string' }
                ],
                dataSource: applicationCategoryDataSource,
                detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit,
                editable: {
                    mode: 'popup',
                    create: true,
                    update: false,
                    destroy: false,
                },
                height: $(document).height() - 350,
                navigatable: true,
                pageable: {
                    pageSize: 10,
                    input: true,
                    previousNext: true,
                    refresh: true,
                    info: true,

                },
                resizable: true,
                scrollable: true,
                sortable: true,
                toolbar: [
                    'create'
                ]
            });

            function detailInit(e) {
                var detailRow = e.detailRow;

                detailRow.find("#ApplicationGrid").kendoGrid({
                    dataSource: applicationDataSource,
                    editable: {
                        mode: 'popup',
                        create: true,
                        update: true,
                        destroy: true,
                        template: $("#popup_editor").html(),
                    },
                    edit: function (e) {
                        $("#IconUpload").data("kendoUpload").bind("upload", function (e) {
                            e.data = { Id: $("#Id").val() }
                        });

                        $("#IconUpload").data("kendoUpload").bind("success", function (e) {
                            applicationDataSource.read(); // Can probably remove this when the "Object has not method called 'unbind' error is fixed.
                        });
                    },
                    scrollable: false,
                    sortable: {
                        mode: 'multiple',
                    },
                    pageable: {
                        pageSize: 10,
                        input: true,
                        previousNext: true,
                        refresh: true,
                        info: true,

                    },
                    resizable: true,
                    navigatable: true,
                    toolbar: [
                        "create"
                    ],
                    columns: [
                        { template: '<img src="#=Icon#" alt="#=Icon#" width="100%" />', title: 'Icon', width: 80 },
                        { template: '<div style="font-weight:bold;">#=Title#</div><div>#=Description#</div><div><a href="#=URL#" target="_blank">#=URL#</a>', title: 'Details', width: 300 },
                        { command: ['edit', 'destroy'], title: 'Action', width: 180 }
                    ]
                });
            }
        });

        function resizeGrid() {
            var gridElement = $("#ApplicationCategoryGrid");
            var dataArea = gridElement.find(".k-grid-content");
            var newGridHeight = $(document).height() - 350;
            var newDataAreaHeight = newGridHeight - 65;
            dataArea.height(newDataAreaHeight);
            gridElement.height(newGridHeight);
            $("#ApplicationCategoryGrid").data("kendoGrid").refresh();
        }

        $(window).resize(function () {
            resizeGrid();
        });
    </script>
}

<div id="window" style="display: none;"></div>

<div id="ApplicationCategoryGrid"></div>

<script type="text/x-kendo-template" id="template">
    <div id="ApplicationGrid"></div>
</script>

<script id="popup_editor" type="text/x-kendo-template">
<input type="hidden" name="Id" id="Id" data-bind="source:Id">

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th scope="row">Title:</th>
        <td>
            <label for="Title"></label>
            <input type="text" name="Title" id="Title" data-bind="source: Title">
        </td>
    </tr>
    <tr>
        <th scope="row">Description:</th>
        <td>
            <label for="Description"></label>
            <input type="text" name="Description" id="Description" data-bind="source:Description">
        </td>
    </tr>
    <tr>
        <th scope="row">URL:</th>
        <td>
            <label for="URL"></label>
            <input type="text" name="URL" id="URL" data-bind="source:URL">
        </td>
    </tr>
    <tr>
        <th scope="row">Icon:</th>
        <td>
            <label for="Icon"></label>
            <img src="#=Icon#" alt="#=Icon#" width: 60px;>#=Icon#</a>
            <input type="hidden" name="Icon" id="Icon" data-bind="source:Icon">
            <input type="file" name="IconUpload" id="IconUpload" data-role="upload" data-async='{saveUrl:"@Url.Action( "UploadApplicationIcon", "Applications", new {
                                                                                                                                 @Area = "Admin"
                                                                                                                             } )", autoUpload:"false"}'
        </td>
    </tr>
    <tr>
        <th scope="row">Category:</th>
        <td>
            <label for="Category"></label>
            <select name="ApplicationCategoryId" id="ApplicationCategoryId" data-bind="source:ApplicationCategoryId" />
        </td>
    </tr>
</table>
</script>

Hi, i'm currently using the treeview component with two levels of checkboxes. I have to invert the selected values of them. My problem is that when I manually change the child check values, they don't trigger their change event so I have call the event handler manually too, that way the parent values don't change either. Is there a way to do this using the treeview object? By the way, I tried using .click() with the child checks, but it made the browser crash.

Thanks for your answers!    

Hi,

I trying to use splitter in my project but it works little wired.

Please see the attachement.

Thank You
Rana

There is one very real scenario that I often encounter and I'm not sure how to approach it with Kendo.

I have a Datasource that has a complex structure, meaning there are nested complex structures, sometimes going 2 levels. Right now I use a regular data source, and display it with a kendo template. When i do chenges i have to "repaint" the template, since the painted template doesnt seem to notice changes in the underlying MVVM bound item. When i reach the nested elements in the template i use javascript for loops to show them all.

It would be nicer to use a nested type of listview or something, but I'm not sure if it's possible or how to achive it?

I'm also not sure if an hierarchical datasource is applyable since from what I understood that should be used when I have to connect more than one API service call, and I do not have that case. I find the hierarchical datasource documentation lacking, and am not sure of all the scenarios where to use it from it. It would be nice if I could define a model and nest another model inside it. Is that possible?

I have set the culture to 'nl-BE' which should display currencies in the '€ 12,34' format. It doesn't however...

Found that applying a row template caused this behaviour.  Worked with column template instead and everything works just fine now.

How can one format the footer of a grid that uses aggregates?  I would like to align text to the right and give the text another color. The correct localization should also be applied.

Found solution by extending the css class .k-footer-template
Regards

Hello

I have next code:
I want to use dataSource var from another view and declared it in global scope. When I use the query method (like so):

dataSource.query({take:12, skip:12});

the AJAX call runs, but in console I get the error:

Does it possible to use  dataSource in this way and how to do it right?