hi there,

I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.

here is my view

<div id="computerTab" class="container">
    <div id="computerDetailsSection"></div>    
</div>

<script type="text/x-kendo-template" id="myTemplate">
    <div>
        <!-- Loop for sections -->
        <dl>
        #for (var i=0,len=Sections.length; i<len; i++){#
            #if(Sections[i].Fields.length>0)#
            #{#
                <dt>${ Sections[i].Title }</dt>
                <!-- Loop for fields -->
                #for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
                    <dd>${ Sections[i].Fields[j].Name }</dd>
                #}#
            #}#
        # } #
    </dl>
 
    </div>
</script>

here is my script

<script>
    function getComputerData() {
        var result;
        $.ajax({
            url: 'myurl',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                console.log('success');
                result = data;
            },
            error: function () {
                console.log('Error');
            }
        });
        return result;
    }

    var ajaxData = getComputerData();
    var scriptTemplate = kendo.template($("#myTemplate").html());
    $("#computerDetailsSection").html(scriptTemplate(ajaxData));

here is a sample of the data that i get from my ajax call
Sections: [
             { Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
             {
                 Fields: [
                        { Order: 1, Name: "Company-owned Location", Value: null },
                        { Order: 2, Name: "Country", Value: null },
                        { Order: 3, Name: "State", Value: null },
                        { Order: 4, Name: "Site", Value: null },
                        { Order: 5, Name: "Address Line 1", Value: null },
                        { Order: 6, Name: "Address Line 2", Value: null },
                        { Order: 7, Name: "Building", Value: null },
                        { Order: 8, Name: "Floor", Value: null },
                        { Order: 9, Name: "City", Value: null },
                        { Order: 10, Name: "Zip", Value: null },
                        { Order: 11, Name: "Room", Value: null },
                        { Order: 12, Name: "Where can you be found?", Value: null }
                 ],
                 Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
             }]
but when i run this in my browser i always get this exception JavaScript runtime error: Object expected

what am i doing wrong?

thanks!

I currently have 4-5 views in my app, I use a flat scheme, and I use same background image which I set in CSS:

.km-flat .km-view .km-content {
    background-image: url(../styles/images/background11.png);
    background-size: cover;
    background-repeat: no-repeat;
}

I want to have a function where a user can choose another background image.  I've implemented a listview, where I get the item the user selects and then I implement a switch case as follows. 

 switch(text1)
                {
                    case "1":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background11.png')");
                        break;
                     case "2":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background12.png')");
                        break;
                     case "3":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/background13.png')");
                        break;
                     case "4":
                        $(".km-flat .km-view .km-content").css('background-image',"url('./styles/images/ background14.png')");
                        break;     
                }

However I am not getting the desired results.Sometimes the image only switches for 1-2 view instead of all views.  I also get an ugly screen flash when I navigate between views.  It's as if every time I pick a new view, the new background image keeps being reset/updated which results in the screen flash

Can someone help me resolve these bugs?

I just started using the zoomable view to display an image. It works great but I have one major complaint. It always starts with the full size image (most of it is off the screen) and you have to "zoom out" to see the whole image. This is counterintuitive, how can i make it start "zoomed out" so the user only has to zoom in if they wish?

Please see this jsbin:
http://jsbin.com/kizuy/2/edit

My data is in the form:
​ [{"name":"General","monthEnd":"2013-12-31T00:00:00","balance":50.00},
{"name":"Special","monthEnd":"2013-12-31T00:00:00","balance":120.00},
{"name":"Savings","monthEnd":"2013-12-31T00:00:00","balance":20.00},
{"name":"General","monthEnd":"2014-01-31T00:00:00","balance":100.00},
{"name":"Special","monthEnd":"2014-01-31T00:00:00","balance":120.00},
{"name":"Savings","monthEnd":"2014-01-31T00:00:00","balance":50.00}]


I would like a stacked bar chart that shows the months on the x axis, and stacked columns for the balance, where each portion of the total column is based on the name field.  The end user controls the name, so I can't define the stacked groups statically.  The current JSBin shows the max balance value for each date (which I know is the default aggregation), rather than a stack of the total.

I have ensured that the data source contains the same number of data points for each group and date.  Most of the examples have data in a different structure (values are all together, separate from the categories).

Is there any way to achieve the desired stacked column chart?

I have an example page at the following URL that has the Kendo CSS files placed after my main CSS file but yet the Kendo CSS text-decoration: none in the k-button style is being overriden by my main CSS file.  Shouldn't the Kendo's CSS rules override my main CSS rules since they are placed after the main CSS file in the header?

http://example.rengr.co

Hi Kendo team!

We are using Kendo scrollview to switch between views. On one page, there is a HTML table with table rows (tr). The scenario is, when we click on a row, It appends another table row beneath it with Kendo chart.
The problem is, If we resize the page, while the chart is still open, it disturbs the scrolling directions. It becomes free to move in any direction. 
Here is the problem video:

http://screencast.com/t/zrk8Jm3CD

Regards.

Hello
I have TreeView in ASP MVC project.
How to check all checkboxes in nodes after load tree view?

I am wondering if the is a way to edit the value of a cell when the editor template is not focus on that cell while using batch editing.

For example, I have a drop-down in column A and depending on what I select from that drop-down I will send "Selection 1" to Column B's cell.
This works fine when using inline editing, but when using batch editing the value is never passed.  

Is this possible with the grid while in batch editing? If not is there a way to open the editor for the cell I want to add it to problematically?

Thanks

Hello there !

I'm a super-noob here and my question may seems totally obvious for you guys but i'm totally lost and I'm here to find salvation :)

What I want to do ?

I want to display relation of my model in a list.

How am I trying to do so ?

I'm using the backend services to store my datas and I created two Types. One for my Recipes (I'm trying to create a recipes application) and another for my ingredients named Elements.
So, I created a Recipe called "Recipe 1" in which I linked 2 elements in a field name Elements.

Here is my Recipes table structure:

Id Identifier
CreatedAt Date
TimeModifiedAt DateTime
CreatedBy <-> Users Relation
ModifiedBy <-> Users Relation
Owner <-> Users Relation
Name Text
Elements <-> Elements Relation (multiple)

Now, I don't know how to retrieve Elements' names neither how to create my model..







I know there is something wrong somewhere but I can identify exactly what and where...

Also, I don't know if I just explained my problem properly but ask me anything about my code if it's needed.

Thanks for reading !

I'm sure this is pretty simple, but it seems I can't figure it out and I'm also not able to find any example on this.

I'm using a HierarchicalDataSource together with a ListView. Inside the schemas error event, I'd like to navigate to an app-global login page in case the server returns an 401 error. Now it seems I'm stuck in this event, since no matter what I do in there, I can't get to another page. I tried e.preventDefault() (not sure if it makes much sense there) as well as dataSource.cancelChanges() (which will only stop the loading animation).

categories: new kendo.data.HierarchicalDataSource({
            schema: {
                errors: "error"
            },
            error: function(e) {
                if (e.errorThrown == "Unauthorized") {
                    // ...navigate("#login");
                }
            }
})

Thanks for any hints on this.