Questions on Kendo UI for jQuery Forum

3 answers

118 views

Custom Widget user templating

My code is:

var MatjazChooser = kendo.ui.Widget.extend({

init: function(element, options) {

var that = this;

kendo.ui.Widget.fn.init.call(that, element, options);

that.wrapper = that.element;

element = that.element;

element.addClass('k-chooser');

var template = that.options.template;

if (template == "")

{

template = '<span class="k-button" data-group="# if (data.group != undefined) { ##=data.group##} else {#default#}#" data-uid="#= data.uid #">';

template += '# if (data.imageUrl != undefined) { #';

template += '<img src="#= data.imageUrl #"><br>';

template += '#}#';

template += '#= text #';

template += '</span>';

}

that.template = kendo.template(template);

that._dataSource();

},

The important line is: data-uid="#= data.uid #
If the user (programmer) defines template without uid, the Widget will not work as expected.

How can I check if user define template with data-uid, or not? How can I added it, if not exists?

Templates

answered on 04 Aug 2014

2 answers

137 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

417 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

104 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

400 views

[Solved] 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.2K+ 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

314 views

[Solved] 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

375 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

855 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

82 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