Hi,

I have implemented a popup window that display a text and I need to close the popup if the user clicks outside of the window. Searching in telerik forums I have found that there is way to do this using the method $telerik.isMouseOverElementEx. But this method is available only for Telerik ASP.NET Ajax.

Is there an equivalent for this method in the product Telerik ASP.NET MVC?

Hi,

I'm trying to format the filter control for an integer column to not use decimals, separators or spinners. I'm using Kendo.Mvc version 2017.1.118.545.

Using the answer from another question I've tried the following approach:

However as per attached screenshot, this doesn't work.

Please advise how to achieve this behaviour as according to the API guide (and other questions), this is correct.

Thanks,

Chris

HI,

submenu's aren't working like I expect them to work.

In my menu the submenu below personal (line 20) & account (line 104) works like I would like it to work.

The menu's below hr-test (line 72) and hr (line 92) are strange and aren't showing all items

See also the attachment of hr-test. only 2 out of the 5 real menu items are shown

I can't find the reason why I only get some submenu's.

Could somebody help?

Hi there, Im using MVC 5 and really battling to populate the model with what is currently in the listbox. I have done some research and can see recommendations to use Ajax but surely this should be a basic model binding?

I can pass the selected items correctly back to the controller via the event on add however Im still lost how I can assign this to the DeviceList object within the model. Am I being silly? Many thanks :)

See Model :

    public class DeviceGroupDetailModel
    {
        public int Id { get; set; }
        [Display(Name = "Name")]
        public string Name { get; set; }
        public string Company { get; set; }
        public List<DeviceModelList> DeviceList { get; set; }


        public DeviceGroupDetailModel()
        {
            DeviceList = new List<DeviceModelList>();
        }
    }

See Razor :

(In Create.cshtml)

@using (Html.BeginForm("Create", "DeviceGroups", new { area = "" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>New group details</h5>
                    </div>
                    <div class="ibox-content">
                        @Html.Partial("_DeviceGroupDetail", Model)
                        @Html.Partial("_DeviceList", Model)
                        <div class="form-group">
                            <div class="col-sm-10">
                                <button class="btn btn-primary" type="submit">Create group</button>
                                &nbsp;|&nbsp;
                                @Html.ActionLink("Cancel", "Index", "DeviceGroups", new { area = "" }, null)
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        var dataSource;
        $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                serverFiltering: false,
                transport: {
                    read: {
                        url: '@Url.Action("DeviceList_Read", "DeviceGroups")',
                    dataType: "json"
                }
            },
            requestStart: function () {
                kendo.ui.progress($("#alldevicesid"), true);
                kendo.ui.progress($("#selectedid"), true);
            },
            requestEnd: function () {
                kendo.ui.progress($("#alldevicesid"), false);
                kendo.ui.progress($("#selectedid"), false);
            },
            batch: false
        });

        dataSource.fetch(function () {
            var data = this.data();
            var alldevices = $("#alldevices").data("kendoListBox");
            var selected = $("#selected").data("kendoListBox");
            for (var i = 0; i < data.length; i++) {
                alldevices.add(data[i]);
                selected.add(data[i]);
            }
        });
    });

        function onSelectListBoxAdd (e) {
            //debugger
            $.ajax({
                type: "POST",
                url: "/DeviceGroups/SelectedDevices",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ selectedItems: $('#selected').data('kendoListBox').dataItems() }),
                dataType: "json",
                success: function (result) {
                    alert("Successfully sent to server: " + result.map(function (x) {
                        return x.SerialNumber
                    }))
                }
            });
    }
    </script>
}

(In DeviceList partial view)

<div id="alldevicesid" class="col-sm-3">
                        <label for="alldevices" id="all">All Devices</label>
                        @(Html.Kendo().ListBox()
                            .Name("alldevices")
                            .Toolbar(toolbar =>
                            {
                                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                toolbar.Tools(tools => tools
                                    .TransferTo()
                                    .TransferFrom()
                                    .TransferAllTo()
                                    .TransferAllFrom()
                                );
                            })
                            .DataValueField("DeviceId")
                            .DataTextField("SerialNumber")
                            .Draggable(true)
                            .DropSources("selected")
                            .ConnectWith("selected")
                            .BindTo(new List<DeviceModelList>())
                            .Selectable(ListBoxSelectable.Multiple)
                        )
                    </div>

                    <div id="selectedid" class="col-sm-3">
                        <label for="selected">Selected Devices</label>
                        @(Html.Kendo().ListBox()
                                .Name("selected")
                                .Draggable(true)
                                .DropSources("alldevices")
                                .DataValueField("DeviceId")
                                .DataTextField("SerialNumber")
                                .ConnectWith("alldevices")
                                .BindTo(new List<DeviceModelList>())
                                //.BindTo(Model.DeviceList)
                                .Selectable(ListBoxSelectable.Multiple)
                                .Events(events => events
                                .Add("onSelectListBoxAdd"))
                        )
                    </div>

In Controller:

        public ActionResult SelectedDevices(List<DeviceModelList> selectedItems)
        {
            return Json(selectedItems);
        }

        private IEnumerable<DeviceModelList> GetDeviceList()
        {
            List<Device> devices = Managers.DeviceManager.GetList(DevicePart.VCM001, PaginationOptions.NoPaging()).Take(10).ToList();
            return Mapper.Map<IEnumerable<DeviceModelList>>(devices);
        }

        public ActionResult Create()
        {
            return View(new DeviceGroupDetailModel());
        }

        [HttpPost]
        public async Task<ActionResult> Create(DeviceGroupDetailModel model)
        {

        }

I don't know how I can use linq query in bounding a grid column to display a value.

If I use this code

    @(Html.Kendo().Grid<MYMODEL>(Model)
    .Name("myObject")
    .Columns(columns =>
    {
        columns.Bound(ViewBag["myList"].Where(p => p.Value == "2").Text);

I have an error : "cannot  use lamba expression without casting before.

Any help will be very much appreciated

Hi,

I'm using the Bootstrap v3 Telerik MVC theme.  Can I style the text box Placeholders and dropdown list OptionLabels to have the same default placeholder color?  Right now the defaults for Placeholders are gray and the defaults for OptionLabels are black.

Thanks!

Is it possible to add a ListBox to a Window?  Tried the below with no joy.  I have dynamically (onclick) created many moveable popup windows.  Within the windows there will be items that I want to allow a user to drag to another popup window. 

I can get the below code to work with a ListView but then I need to make all the hooks to drag items around.  I am trying to take advantage of what already exists.

var w = $("<div>Window</div>");
$("#map").append(w);
var kw = w.kendoWindow({});
var klvb = w.kendoListBox({});

Thanks for any help!

I have an MVC5 application running the latest version of Kendo. I have a ViewModel with a DateTime property:

MyViewModel.cs

And in my controller I am instantiating this VM and setting the StartDate property to UtcNow:

MyController.cs

And in my view I create a KendoDateTimePicker and bind it to my StartDate property in my model:

Index.cshtml

 The datetimepicker will display the time in UTC, and when the form is submitted the time returned to the controller is in UTC.

 However I'm looking at accomplishing two things:

1. Display local time to the client in the date time picker

2. Return the value of the date time picker in UTC to the server

 This means that somewhere on the client side the conversion from UTC to Local time must be made for display purposes. Then another conversion from Local Time to UTC when posting back the date to the server.

Is there anyway of having the DateTime picker display a local datetime when bound to a UTC date? If not, is there some event or hook I can use to pre-process the value that the datetimepicker is bound to on the client side?

Similar question for when submitting the form. Is there an event or hook I can use to have the value of the datetimepicker be returned as its UTC equivalent?

Hi,

I'm new to using kendo

We want to allow user to drag and drop to show/hide columns from a column chooser box.  We want to allow user to be able to drag a column from the list box and drop it in the column header of the grid. So it will be easy for user to design their grid columns layout.  Is there an example to do that?

Please check the attached image for the screenshot about the function we want.

I have a multiselect with serverfiltering set to true. It works fine to filter. Now, when I post the control to my controller, I get the ids and that is fine too. But, when I return to my view with the same set of ids, the multiselect textbox is empty. The ids come back, but there is no select option to show the values. How can I retain the values in multiselect texbox when serverfiltering true and returning to the same view.