Questions on Kendo UI for jQuery Forum

2 answers

115 views

bug IE

When I'm opening my page with IE my webpage directly opens at the kendo charts. I don't want this offcourse. When I try to open my webpage in chrome, it's correct.

Example:
http://cedric.yourhostmanager.com/bigpicture/

Does anybode know a solution for this problem? I already set the animation prop for the windows on false.

Window

answered on 04 Aug 2014

1 answer

393 views

Kendo Scheduler customeditortemplate window close event

Hello,

I am using CustomEditorTemplate for Scheduler add/edit popup. I would like to capture the Close Event of customeditortemplate so that i can destroy some other child Windows i opened from customeditortemplate. So i would like to know what Event gets fired when x button is pressed on customeditor popup window. How can i use Close Event of this window so that if window is closed by clicking x or save or cancel Buttons i can reach same function and destroy what i want. I have used Scheduler save and cancel Events to destroy but then when x is pressed i cannot destroy.

Thanks

Anamika

Scheduler

answered on 04 Aug 2014

2 answers

80 views

Setting default value in CustomEditortemplate Attendees multiselect gives Null on save

Hello,

I am using CustomeditorTemplate for add/edit new Event. I have a Attendes mutiselect box and bydefault it should load the loggedin user. If i set the Default value then i can see the value selected but on save click Attendees is always null. but if i remove and add again or add another then i get the value. So somehow the Change Event is not triggered when Setting Default value.

here is view code. Charlie is set Default so it Shows selected but on save click attendees is null.
<div class="k-edit-label">
@(Html.LabelFor(model => model.Attendees))
</div>
<div data-container-for="Attendees" class="k-edit-field">
@(Html.Kendo().MultiSelectFor(model => model.Attendees)
.HtmlAttributes(new { data_bind = "value:Attendees" })
.DataTextField("Text")
.DataValueField("Value")
.Value(new[] { new {Text="Charlie",Value="3" }})
.ValuePrimitive(true)
.TagTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
.ItemTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
.BindTo(new[] {
new { Text = "Alex", Value = 1, Color = "\\#f8a398" },
new { Text = "Bob", Value = 2, Color = "\\#51a0ed" },
new { Text = "Charlie", Value = 3, Color = "\\#56ca85" }
})
)

</div>
Anamika

Scheduler

answered on 04 Aug 2014

2 answers

372 views

Issue in kendo Grid with signalr add and edit mode.

from demo example binding with signalR.

i am facing issue in add and edit mode in this scenario.
so i checked online demo and updated only 2 or 3 lines as per my requirement and found out that this issue is with kendo only not my code.

please help me here. in signalr we want popup add and edit mode not inline.
so i updated ( editable: "popup") and i wanted edit also so added edit command with destroy also.
so now if you will check if we click on add new it will open poup and close at a time and add blank record in grid.

in edit mode also if you will change only one field then also it will update that cell only and popup will close.
please help.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/signalr">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div id="grid" style="margin-bottom:20px"></div>
    <span id="notification"></span>
    <script src="../content/web/integration/jquery.signalr-1.1.3.min.js"></script>
    <script>
        $(function(){
            var hubUrl = "http://demos.telerik.com/kendo-ui/service/signalr/hubs";
            var connection = $.hubConnection(hubUrl, { useDefaultPath: false});
            var hub = connection.createHubProxy("productHub");
            var hubStart = connection.start({ jsonp: true });

            $("#notification").kendoNotification({
                width: "100%",
                position: {
                    top: 0,
                    left: 0
                }
            });
            $("#grid").kendoGrid({
                height: 550,
                editable: "popup",
                sortable: true,
                columns: [
                    { field: "UnitPrice" },
                    { field: "ProductName" },
                    { command: ["edit", "destroy"], width: 100}
                ],
                toolbar: ["create"],
                dataSource: {
                    type: "signalr",
                    autoSync: true,
                    // Handle the push event to display notifications when push updates arrive
                    push: function(e) {
                        var notification = $("#notification").data("kendoNotification");
                        notification.success(e.type);
                    },
                    schema: {
                        model: {
                            id: "ID",
                            fields: {
                                "ID": { editable: false, nullable: true },
                                "CreatedAt": { type: "date" },
                                "UnitPrice": { type: "number" }
                            }
                        }
                    },
                    sort: [ { field: "CreatedAt", dir: "desc" }],
                    transport: {
                        signalr: {
                            promise: hubStart,
                            hub: hub,
                            server: {
                                read: "read",
                                update: "update",
                                destroy: "destroy",
                                create: "create"
                            },
                            client: {
                                read: "read",
                                update: "update",
                                destroy: "destroy",
                                create: "create"
                            }
                        }
                    }
                }
            });
        });
    </script>
    <div class="box">
        <h4>Information</h4>
        <p>This example demonstrates real-time push-notifications from <a href="http://signalr.net/">SignalR</a>. To see the real-time updates:</p>
        <ol>
            <li>Open this page in another browser window by clicking <a href="./signalr" target="_new">here</a></li>
            <li>Create, update or destroy grid items.</li>
        </ol>
        <p><strong>Note:</strong> To further enhance real-time experience, the Grid will also display changes from other users,
            which currently happen to perform CRUD operations on the same demo.
            If you refresh the page, all changes will be lost, because the remote service only broadcasts changes, it does not actually save them.</p>
    </div>
</div>

</body>
</html>

Grid

answered on 02 Aug 2014

4 answers

1.1K+ views

Show/Hide columns using CSS

I am working on a site that requires responsive design, such that when the site is being accessed from a small mobile device, I can hide some of the columns due to the smaller real estate available.

The typical method to doing this is using media queries in CSS. As such, I have applied some classes to the columns in my MVC view like so:

columns.Bound("memberName").Title("columnTitle").HtmlAttributes(new {@class = "col-desktop"})

I can see in the resulting HTML page that the class is applied to the td tag, and not the col tag in the table. As such, when I set the visibility of the class to collapse the row header is still there. If I apply the class to the row header as well, then the column is not visible although the grid still seems like it leaves a space where the column would be.

What would be the best way to accomplish this?

Grid

answered on 01 Aug 2014

2 answers

283 views

Empty value and moving dash

Hi,

I have two issues with the masked textbox:

1) I want to set the value to empty/null/"" when the page is shown. But the masked textbox does not accept that. If I enter any string, the value is set correctly, but I was not able to set an empty value.

2) The format I use is "AAA-AAA". When I enter characters, the "-" in the middle is moving aroung depending on the width of the characters being used. Is there a way to use a fixed width for each character here?

Thanks in advance, best regards,
Volker

MaskedTextBox

answered on 01 Aug 2014

2 answers

336 views

Pivot Grid Configurator doesn't show fields for local data source

We would like to use a locally bound Pivot Grid to display some reports. I can get the columns and rows to my liking but the configurator does not display the fields so there is no way to really configure the grid. This dojo shows my issue. http://dojo.telerik.com/eqax/2 Is this not supported? Is there a work around I could use?

PivotGrid

answered on 01 Aug 2014

2 answers

789 views

Is there a better way of auto resizing the grid pop up editor?

So I have been working with the grid's a lot and was wondering if my resize solution can be improved.

The aim of my code are the following:

1) Load the editor pop up template to cover 80% width and 80% height of the viewable screen area
2) Always keep the cancel, update button viewable on the screen
3) If the editing content area is taller than the actual viewport window this should scroll in the Y axis only
4) On the auto resize re-center the popup editor.

I guess what I am trying to do is make this as "responsive" as possible.

This is called from the grid's edit event.

So after a lot of trial and error I have finally come up with this javascript function

01.function ResizeWindow()

02.{

03. //Get the Kendo PopUp Window

04. var popUpWindow = $(".k-popup-edit-form").data("kendoWindow");

05. //Get the inner content area of the editoring window

06. var contentArea = $(".k-edit-form-container");

07. //Get the actual form that is used for editing (using the bootstrap .form-horizontal to indicate forms)

08. var innerForm = $(".form-horizontal");

09. //Get 80% of current browser window height/width and set the editing window to these

10. contentArea.height($(window).innerHeight() * 0.8).width($(window).innerWidth() * 0.8);

11. // re-center the editing window otherwise it will position towards top-right and partially of screen

12. popUpWindow.center();

13.

14. //Get the viewable content area height and minus 70px so that the buttons are viewable

15. var fixedHeight = (contentArea.height() - 70);

16. //set the viewable content width to 99% of the editing screen. (otherwise get a X-Scrollbar)

17. var fixedWidth = contentArea.width() * 0.99;

18.

19. //configure the editing form and set max height, max width and overflow options.

20. //using !important as otherwise this gets overridden

21. innerForm.height(fixedHeight).width(fixedWidth).css({

22. maxHeight: fixedHeight + 'px !important',

23. maxWidth:fixedWidth + 'px !important',

24. overflowY: 'scroll',

25. overflowX: 'hidden'

26.

27. });

28.}

This has been tested using IE 11, Chrome (plus a lot of the emulation modes for tablets) , IPad Air (physical unit) and it seems to function fine and resize correctly.

I just need to adapt/ create a version of this for when the pop up editor is resizeable so that it adjusts the form nicely. But thought this would be a nice bit of code for others to use/ adapt as they need.

Grid

answered on 01 Aug 2014

1 answer

68 views

Window position ignores HTML5 header

Hello

I'm having a problem with the window widget. When I'm placing a window on my onepager site, it ignores the header that has a fixed position. You can find the example here:

http://cedric.yourhostmanager.com/bigpicture/#dashboardresultaatpage

When you scroll to the top you will see that the window places itself in front of the navigation header in stead of behind.

What is the reason?

Thanks in advance

Window

answered on 01 Aug 2014

1 answer

120 views

MVVM and SEO

Let's suppose an HTML page accessed via http://www.example.com/page?id=xxxxx where id identifies the persisted object displayed in the page.
This HTML page has several kendo ui widgets bound to an observable view model via MVVM in complaince with the framework.

The requirement is to have this page properly indexed by search engines. In other words, we need this page to display the persisted object with a text browser (no javascript). What is the proper way to achieve this?

My current approach is to load values in input controls server side, with a serialized copy of the persisted object in a hidden field.

When the page with layout and data reaches the browser, the view model reads its values from the hidden field and the input controls are initialized to display as Kendo UI widgets and bound to the view model.

When the page is read by a search engine crawler, the data is indexed whether the crawler has some Javascript capabilities or not.

Is there a better approach?

MVVM

answered on 01 Aug 2014