Questions on Kendo UI for jQuery Forum

1 answer

1.9K+ views

Dynamically Add menu item with HtmlAttributes

Hi,

I have a Kendo menu that renders on Page Load:

@(Html.Kendo().Menu()

.Name("AddWidgetMenu")

.Orientation(MenuOrientation.Horizontal)

.Items(items =>

{

items.Add().Text("Add")

.ImageUrl("~/Content/Images/plus.png")

.ImageHtmlAttributes( new { width = 20, height = 20 })

.HtmlAttributes(new { id = "topWidgetMenuItem" })

.Items(children =>

{

foreach (DashboardWidget widget in Model.AvailableWidgets)

{

children.Add()

.Text(widget.Title)

.HtmlAttributes(new

{

widgetid = widget.WidgetId,

id = "addWidget" + widget.WidgetId,

widgetRequestUrl = Url.Action("_WidgetAdd", "Home", new { widgetId = widget.WidgetId })

});

}

});

})

)

I need to dynamically add new menu links to the menu list which I am able to do, but I cannot figure out how to also include HtmlAttributes so that the menu links work properly. Please advise:

/*Add widget to menu*/

//initialize the menu widget

$("#AddWidgetMenu").kendoMenu()

// get a reference to the menu widget

var menu = $("#AddWidgetMenu").data("kendoMenu");

var addWidgetRequestUrl = $(contentElement).attr('data-addwidgetrequesturl');

var widgetTitle = $(contentElement).attr('data-title');

var noPrefixWidgetId = widgetId.replace("widget", "");

menu.append({

text: widgetTitle,

id: "addWidget" + noPrefixWidgetId,

widgetid: noPrefixWidgetId,

widgetRequestUrl: addWidgetRequestUrl

},

$("#topWidgetMenuItem")

);

The new menu link is added but the HtmlAttributes are being ignored.

<li id="addWidgetUpcomingEvents" class="k-item k-state-default" widgetid="UpcomingEvents" widgetrequesturl="/AppPortal/Home/_WidgetAdd?widgetId=UpcomingEvents" role="menuitem">

<li class="k-item k-state-default k-last" role="menuitem">

<span class="k-link">Recent Sales3</span>

</li>

</ul>

</div>

Thanks,
Mark

Menu

answered on 17 Feb 2015

2 answers

207 views

[Solved] Tooltip with javascript function reference

So, I'm attempting to insert a javascript defined elsewhere on a click event in the tooltip as follows:

'<div class="col-md-2"><a onclick=\'jumpme(2,"' + data[0].id+ '");\'>' + data[0].LastName + ' test</a></div>';

in a content function. If I replace 'jumpme' and the first argument with an alert box, it works fine, but I'm trying to figure out how I can get a function defined elsewhere to fire. The console says the function is undefined, but if I reference it in the row template of the grid that uses this tooltip, it works as expected. How can I get this to fire?
Thanks.

ToolTip

answered on 17 Feb 2015

1 answer

154 views

kendo windo 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...

<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

494 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

359 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

262 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

231 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

341 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

131 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