Hi,

I'm trying to set custom labels on the Y-axis in a line chart, but no success. I've looked around ALOT on the forums search google without any success.
The closest to a solution I've come is to hide the actual labels and use valueAxis.notes instead.
The problem I'm facing with the notes is that the are placed directly on the horizontal lines in the chart which makes them very hard to read, and trying to use the position option doesn't seem to help anything at all. I would like to have them placed below the line, if notes are to be used.
I'd rather just be able to set the actual labels to my own strings so that instead of "0" it would say "Lousy", 25 = "Bad", 50 = "Normal" etc.

Here's is my code for the chart.


And here is a jsFiddle.

We have a grid with row set to inline edit. In the grid we have some actions defined in the toolbar. We want to show checkbox in each row. User should be able to select multiple rows and click on action button.

Expectations are:
1. on checking the checkbox for a row, should not affect any other rows.
2. changing checkbox should not afect dirtyness of that row.

Hi,
I am new to kendo ui, trying to work with endless scrolling with local data in json form, but this shows me all data at once, i want to show first 5 records first than as user scrolls down it should show 5 more and so on,
Here is my code, please help me to make it done,.


(function (global) {
    var WeatherViewModel,
        app = global.app = global.app || {};

    WeatherViewModel = kendo.data.ObservableObject.extend({
        weatherDataSource: null,
        init: function () {
            var that = this,
            dataSource;
            kendo.data.ObservableObject.fn.init.apply(that, []);

            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "data/weather.json",
                        dataType: "json"
                    }
                },
                parameterMap: function (options) {
                    var parameters = {
                        pageSize: options.pageSize,
                        page: options.page
                    }

                    return parameters;
                },
                schema: {
                    total: function () { return 16; }
                },
                total: function (data) {
                    return data.count; // total number of items
                },
                change: function(e) {
                    var data = this.data();
                    console.log(data.length);
                },
                serverPaging: true,
                serverSorting: true,
                pageSize: 3
            });


            $("#home-data-ul").kendoMobileListView({
                dataSource: dataSource,
                template: $("#home-data-template").text(),
                endlessScroll: true
            });

            that.set("weatherDataSource", dataSource);
        }
    });

    app.weatherService = {
        viewModel: new WeatherViewModel()
    };
})(window);

I really love the switch instead of checkboxes, and now that I can use it on regular web I intend to just stop using checkboxes everywhere :)

...what's the minimum I need to include on the page to get it to work?  Like I don't want to push down the entire mobile script.

Thanks,
Steve

Hi,

So, im using a template binded to remote data. Everything works well on the emulator but on the device only the button appears.
code:

    <form>
            <ul id="books" data-template="template" data-role="listview" data-style="inset" data-bind="source:fields"></ul>
            <button data-role="button" id="save" type="button" class="login-button">Save</button>
  </form>
   <script id="template" type="text/x-kendo-template">
           <li >
                    <label for="page">#: Caption #</label>
                    # if (EditConfigType =="Lookup"){
                    #<select id="dropdown"></select>#
                    }
                    if (EditConfigType =="Integer"){
                    #<input type="number"  />#
                    }#
          </li>
  </script>
<script>
            $(function () {
                // create a template using the above definition    #: Caption #
                var template = kendo.template($("#template").html());

                var dataSource = new kendo.data.DataSource({
                    transport: {
                        // specify the XML file to read. The same as read: { url: "books.xml" }
                        read: {
                            url: "http://41.74.247.118/3GS_API/appapi.svc/uitemplatefields/2120b826-8db8-435c-97db-a1a753fc3e1a",
                            dataType: "json"
                        },
                        
                    },
                    schema: {
                        model: {
                            fields: {
                                IdEditConfig: { type: "string" },
                                Caption: { type: "string" },
                                EditConfigType: { type: "string" },
                                Required: { type: "number" },
                            }
                        }
                    },
                    change:
                        function (e) {
                        $("#books").html(kendo.render(template, this.view()));
                    }
                });

                dataSource.read();
                dataSource.fetch(function () {
                    var data = this.data();
                    console.log(data[0].IdEditConfig + " | " + data[0].Caption + " | " + data[0].EditConfigType + " | " + data[0].Required + " | ");
                });
            });
        </script>

please help! Thanks!

I followed the instructions to successfully create a Chrome Packaged App at: http://www.telerik.com/kendo-ui/chrome-packaged-app

I'd like to add the KendoEditor to the test project in the instructions.  The instructions have us create a main.html that is located outside the sandbox with a full screen iframe pointed to an index.html that is located inside the sandbox.  The Kendo UI uses a templating system that requires it is located in the sandbox.  It appears the KendoEditor uses an iframe and that causes the error pasted below when I add it to index.html.  How do I add a KendoEditor to a Chrome Packaged App?  Thanks.

In my server side code I fetch the data to be displayed in the grid and it's returned as an IEnumerable. Can I use this as a datasource and if so how would I do this server side?

Unfortunately the color binding is not working:

            <div id="CounterChart" class="dsb-production-chart" data-bind="visible: group4ChartView()">                
                <div id="CounterChart2" data-role="chart"
                     data-legend="{ position: 'bottom' }"
                     data-series-defaults="{ type: 'line' }"
                     data-series="[
                                     { field: 'OutputCounter', name: 'Output'},
                                     { field: 'RejectCounter', name: 'Reject'},
                                     { field: 'TotalCounter', name: 'Total'}
                                 ]"
                     data-series-line-color:"['yellow','red','green']"                     
                     data-bind="source: LineChartCounters"></div>
                </div>
            </div>
                   

What did I wrong?

kind regards
Alex

I need to create a dropdownlist in my custom edit view. This is what I've done so far, and shows all the inputs except the dropdownlist

<!--Edit template-->
<script type="text/x-kendo-template" id="editNominationsTmpl">
    <div id="editContainer">
        <table>
            <thead>
                <tr>
                    <td></td>
                    <th>Nominee</th>
                    <th>Nominator</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Name:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedName" value=" #= NominatedName # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorName" value=" #= NominatorName # " /> </td>
                </tr>
                <tr>
                    <th>Job Title:</th>
                    <td><input type="text" class="k-input k-textbox" name="NominatedTitle" value=" #= NominatedTitle # " /></td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorTitle" value=" #= NominatorTitle # " /> </td>
                </tr>
                <tr>
                    <th>Department:</th>
                    <td>
                        <input id="dropdownlistNominee" name="DeptId" />
                    </td>
                    <td><input type="text" class="k-input k-textbox" name="NominatorDept" value=" #= NominatorDept # " /></td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td>
                        <input type="hidden" name="Index" value=" #= NominatedIndex # " />
                        <input type="hidden" name="RequestInfoID" value="#= NominatorIndex # " />
                    </td>
                    <td><input type="email" class="k-input k-textbox" name="NominatorEmail" value=" #= NominatorEmail # " /></td>
                </tr>
            </tbody>
        </table>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
</script>

//Creates a global object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host)
{
    //Loads external templates from path and injects in to page DOM
    return {
        //Method: loadExtTemplate
        //Params: (string) path: the relative path to a file that contains template definition(s)
        //Params: (int) index: user index
        loadExtTemplate: function (path, fileName, index)
        {
            //Use jQuery Ajax to fetch the template file
            $.get(path, { name: fileName },
                function (result) {
                    console.log(result);
                    $(host.body).append(result);
                    console.log($(host.body).html());
                })
                .done(function (data)
                {
                    $(host).trigger("TEMPLATE_LOADED", [path , index]);
                    console.log("Published an event that indicates when a template is done loading");
                });
        }
    };
})(jQuery, document);

// waits until the template is fully loaded
        $(document).bind("TEMPLATE_LOADED", function (e, path, index)
        {
            // send to create the dropdownlist
            createDropdownList(index);

            var wnd = $("#nominationsEdit").data("kendoWindow");
            console.log(wnd);

            var templateContent = $("#editNominationsTmpl").html();
            console.log(templateContent);

            var editTemplate = kendo.template(templateContent);
            console.log(editTemplate);

            $.get("/Admin/GetEditNominations",
                {
                    index: index
                },
                function (data) {
                    console.log(data);
                    //dataTemplate = data;
                    //dataDropwDown = loadDropdownListInfo();
                },
                "json")
                .done(function (data)
                {
                    console.log("success getting the information... now create the dropdaownlist");

                    // populate the template with the information
                    var result = kendo.render(editTemplate, data);

                    // set the default value the dropdownlist will show
                    // $("#dropdownlistNominee").kendoDropDownList().index(data.DeptID);

                    // append the information to the new window
                    wnd.content(result);

                    // show the window
                    wnd.center().open();
                });
        });

function createDropdownList(index)
{
    //create the dropdownlist
    $("#dropdownlistNominee").kendoDropDownList(
        {
            dataTextField: "DeptName",
            dataValueField: "DeptID",
            dataValueField: index,
            dataSource:
                {
                    transport:
                        {
                            read:
                                {
                                    url: "/Admin/GetDeptInfo"
                                }
                        }
                }
        });
}

with this code the custom edit window shows all the inputs information, except the dropdownlist this input, that it shows empty.

What I'm missing?

thanks in advance.

Hi

We have a client requirement to display a graph as per the example attached. We recommended Kendo UI as a platform now we need some assistance to implement this. Has anyone done something like this? My initial thoughts was to combine a line chart with an area chart but was unable to get this working as per the example. (The example was done in excel 2007)

Thanks for the assistance