Questions on Kendo UI for jQuery Forum

1 answer

152 views

I have just use this simple kendo window, it works fine but suddenly it stop working.
i have used in asp.net simple website but getting error...

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="Kendo_New/kendo.common.min.css" rel="stylesheet"
        type="text/css" />
    <link href="Kendo_New/kendo.default.min.css" rel="stylesheet"
        type="text/css" />
         <script src="jquery.min.js" type="text/javascript"></script>
    <script src="Kendo_New/kendo.web.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function () {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

            var onClose = function () {
                undo.show();
            }

            if (!window.data("kendoWindow")) {
                window.kendoWindow({
                    width: "600px",
                    title: "About Alvar Aalto",
                    actions: [
                                "Pin",
                                "Minimize",
                                "Maximize",
                                "Close"
                            ],
                    close: onClose
                });
            }
        });
        </script>
</head>
<body>
<form id="form1" runat="server">
    <div id="example">
        <div id="window">
            <div class="armchair">

                Artek Alvar Aalto - Armchair 402</div>
            <p>
                Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers
                at the iittala factory still meticulously handcraft the legendary vases that are
                variations on one theme, fluid organic shapes that let the end user decide the use.
                Interpretations of the shape in new colors and materials add to the growing Alvar
                Aalto Collection that remains true to his original design.</p>
            <p>
                Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
                was noted for his humanistic approach to modernism. He studied architecture at the
                Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
                Aino Marsio.</p>
            <p>
                Alvar Aalto was one of the first and most influential architects of the Scandinavian
                modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
                Major architectural works include the Finlandia Hall in Helsinki, Finland, and the
                campus of Helsinki University of Technology.</p>

        </div>
        <span id="undo" style="display: none" class="k-button">Click here to open the window.</span>

        <style scoped>
            #example
            {
                min-height: 500px;
            }

            #undo
            {
                text-align: center;
                position: absolute;
                white-space: nowrap;
                padding: 1em;
                cursor: pointer;
            }
            .armchair
            {
                float: left;
                margin: 30px 30px 120px 30px;
                text-align: center;
            }
            .armchair img
            {
                display: block;
                margin-bottom: 10px;
            }
        </style>
    </div>
    </form>
</body>
</html>

Window

answered on 17 Feb 2015

1 answer

110 views

[Solved] kendo window not working

I have just use this simple kendo window, it works fine but suddenly it stop working.
i have used in asp.net simple website but getting error...

Window

answered on 17 Feb 2015

2 answers

486 views

How to hide a drawer element dynamically

I have a declaratively specified list of drawer options:

<ul data-role="listview" id="tabletDrawer" data-click="drawerClick">

<li>

<a href="views/oc.html" data-icon="fa-calculator">Order Calculator</a>

</li>

<li>

<a href="views/oc.html" data-icon="fa-refresh">Reset</a>

</li>

<li>

<a href="views/settings.html" data-icon="spc-settings">Settings</a>

</li>

<li>

<a href="#logView" data-icon="spc-log">Log</a>

</li>

<li>

<a href="skunkworks.html" data-icon="spc-settings">IT Development Area</a>

</li>

<li>

<a href="debug.html" data-icon="spc-settings" class="spc-debug">IT Debug Info</a>

</li>

</ul>

How can I remove one of them at runtime (for example, if I wanted to remove an item from the list based on a setting in a build configuration).

Thanks,
Jason

Drawer (Mobile)

answered on 17 Feb 2015

5 answers

343 views

[Solved] Initial load locally with remote datasource

I have a scenario where I would like to load the data for the Grid locally on the first page load, and then have the Grid use a remote datasource for any subsequent paging.

Take search for example. A user enters search parameters that are POSTed to the server, which then finds results and displays them in a grid on a page. Since I have those first set of results on the server when I'm rendering the page the first time, I want to load the Grid with them. But, then I want to use ajax for any paging beyond that first set.

What's the best way to do that?

Grid

answered on 17 Feb 2015

1 answer

255 views

Dynamically adding elements to editor

Hello,

I am seeing an issue in the editor for the diagram when I attempt to dynamically add elements to a bound source. I have setup a kendo template that binds to each element of an array off of the dataItem's model. I then want to be able to add or remove elements from this array. However when I add an element to the array the rendering of this new element gets appended within the first element as shown in this example: http://dojo.telerik.com/osOmA/2

I have worked around this issue by wrapping the inner template in a div however this behavior seems strange and should probably be fixed: http://dojo.telerik.com/osOmA

Thanks

Diagram

answered on 17 Feb 2015

1 answer

224 views

OData 406 Not Acceptable

I've been struggling to get OData results to show up in Kendo Grid without luck. Even when I would get the endpoint returning a JSON result set, the grid still would fail to display any records. I can also save new records, although the grid gets back a 406 message and does not realize the record was successfully saved.

public class ListController<TObject> : ApiController where TObject : class, IListItem

{

[Queryable]

public IEnumerable<TObject> Get()

{

var results = _repository.GetAll();

return results.AsEnumerable();

}

public static class WebApiConfig

{

public static void Register(HttpConfiguration config)

{

// Web API configuration and services

var cors = new EnableCorsAttribute("*", "*", "*");

config.EnableCors(cors);

config.EnableCaseInsensitive(true);

config.Formatters.JsonFormatter.SerializerSettings.PreserveReferencesHandling =

Newtonsoft.Json.PreserveReferencesHandling.All;

// Web API routes

config.MapHttpAttributeRoutes();

//config.Routes.MapHttpRoute(

// name: "DefaultApi",

// routeTemplate: "api/{controller}/{id}",

// defaults: new { id = RouteParameter.Optional }

//);

ODataModelBuilder builder = new ODataConventionModelBuilder();

builder.EntitySet<LotStatus>("lotstatuses");

config.MapODataServiceRoute(

routeName: "odata",

routePrefix: "",

model: builder.GetEdmModel());

}

<script>

var remoteDataSource = new kendo.data.DataSource({

batch: false,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

type: "odata",

transport: {

read: {

url: "http://localhost:55097/lotstatuses",

dataType: "json",

//contentType: "application/json"

},

create: {

url: "http://localhost:55097/lotstatuses",

dataType: "json",

contentType: "application/json",

type: "POST"

},

update: {

url: "http://localhost:55097/lotstatuses",

dataType: "json",

contentType: "application/json",

type: "PUT"

},

destroy: {

url: "http://localhost:55097/lotstatuses",

dataType: "json",

contentType: "application/json",

type: "DELETE"

},

parameterMap: function (options, operation) {

var paramMap = kendo.data.transports.odata.parameterMap(options);

delete paramMap.$inlinecount; // <-- remove inlinecount parameter

delete paramMap.$format; // <-- remove format parameter

return paramMap;

}

},

schema: {

data: function (data) {

return data.value;

},

total: function (data) {

return data["odata.count"];

},

errors: function (data) {

},

model: {

id: "Code",

fields: {

Code: { type: "string", editable: true, nullable: false, validation: { required: true } },

Name: { type: "string", editable: true, nullable: false, validation: { required: true } }

}

});

$('#grid').kendoGrid({

dataSource: remoteDataSource,

height: 500,

toolbar: [{ name: "create", text: "Create new Lot Status" }],

filterable: true,

sortable: true,

pageable: true,

editable: "popup",

columns: [

{ field: "Code", title: "Code" },

{ field: "Name", title: "Name" },

{ command: ["edit", "destroy"] }

]

});

</script>

If I could just find an example of an OData v4 service project that works with Kendo Grid I'm pretty sure I could figure this out. Anyone?

Grid

answered on 17 Feb 2015

1 answer

338 views

Problems modifying k-hiearchy-col style

Hello,

We have a grid where have set the witdth of all the columns to 1% but one that have left without width. This way all the colums fit to its size but the one without width that takes the rest of the space.

Everything is ok this way except when we remove the column without width, then the free space is taken by the hierarchy column (the triangle one). We have tried to set the this hierarchy column to a fixed width modifiying the CSS with this:

.k-grid .k-hierarchy-col {
width: 30px;
}

But didn't get any result and this column still takes the extra space. Is there a way to fix this behaviour so when there is free space in the grid it's divided between the other columns and not by this hiearchy column?

Regards.

Grid

answered on 17 Feb 2015

3 answers

128 views

Proper Localisation for scheduler

Hi

In your demo even when switching to Chinese the Scheduler still displays "Mon 6/10, Tue 6/11" in american formatting.

http://demos.telerik.com/kendo-ui/scheduler/localization

Bug? How can I also apply localisation to this?

Many thanks

Grid

answered on 17 Feb 2015

5 answers

164 views

Display static tooltips

We are trying to display statically the tooltips for each of the 3 individual series, but only for Q4 of each year, where applicable for each series. Could we somehow enable the hover-over effect and prevent the tooltip values from being hidden, or something to that effect? What would be the easiest way to accomplish our goal?

Thank you.

ToolTip

answered on 17 Feb 2015

2 answers

104 views

[Solved] WCF Datasource for MVVM Grid with server paging

Hi,
I have an MVVM Grid that is getting data from a WCF service. It all works apart from the format of the data that arrives at the datasource. The json is

{"GetRequestSummaryRestResult":"{\"Data\":[{\"Id\":0.0,\"RequestId\":121.0,\"Creator\":\"Elmer Fudd\",\"Recipient\":\"Bugs Bunny\",\"Assignee\":null,\"RequestType\":\"EquipmentLoan\",\"Description\":\"Mobile phone with the Android operating system\",\"CreationDate\":\"2015-01-14T10:45:09\",\"Status\":null,\"Comments\":null},{\"Id\":1.0,\"RequestId\":2.0,\"Creator\":\"Porky Pig\",\"Recipient\":\"Tweety Pie\",\"Assignee\":null,\"RequestType\":\"EquipmentAcquisition\",\"Description\":\"Holds the laptop at eye height\",\"CreationDate\":\"2014-06-03T11:27:38\",\"Status\":null,\"Comments\":\"me has\"}],\"Total\":11}"}. For some reason the Data and Total are wrapped in an object that is the name of the WCF Service method plus the word Result. I have gotten around it by adding the following to the schema part of the datasource definition:

        schema: {
            data: function (data)
            {
                return jQuery.parseJSON(data.GetRequestSummaryRestResult).Data;
            },
            total: function (data)
            {
                return jQuery.parseJSON(data.GetRequestSummaryRestResult).Total;
            },
            model: requestsummary
        },

Is this the expected behaviour and is my solution the best way to deal with it? Please let me know.
Thanks

Data Source

answered on 17 Feb 2015