Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.6K+ views

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:

c.Bound(m => m.Id)
  .Title("ID")
  .Filterable(ftb => ftb
    .Cell(cell => cell
      .Operator("eq")
      .ShowOperators(false)
    ).UI("integerFilter"));

 

function integerFilter(el) {
  el.kendoNumericTextBox({
    spinners: false,
    format: "#",
    decimals: 0
  });
}

 

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

Preslav
Telerik team
 answered on 17 Nov 2017
2 answers
241 views

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?

001.@(Html.Kendo().Menu()
002.            .Name(componentName: "Menu")
003.            .Animation(enable: true)
004.            .HtmlAttributes(new {@class = "m-k-menu-header"})
005.            .Items(items =>
006.            {
007.                items.Add()
008.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
009.                    .Text(value: "Portal")
010.                    .Action(actionName: "Index", controllerName: "Home")
011.                    .Items(innerChildren =>
012.                    {
013.                        innerChildren.Add()
014.                            .Text(value: "Improvementlist")
015.                            .Action(actionName: "index", controllerName: "improvement")
016.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
017.                    });
018.                items.Add()
019.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
020.                    .Text(value: "Personal").Action(actionName: "OverviewPresence", controllerName: "Presence")
021.                    .Items(innerChildren =>
022.                    {
023.                        innerChildren.Add()
024.                            .Text(value: "Manage presence")
025.                            .Action(actionName: "ManagePresence", controllerName: "Presence")
026.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
027.                        innerChildren.Add()
028.                            .Text(value: "Overview presence")
029.                            .Action(actionName: "OverviewPresence", controllerName: "Presence")
030.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
031.                        innerChildren.Add()
032.                            .Text(value: "Set week complete")
033.                            .Action(actionName: "Index", controllerName: "WeekComplete")
034.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
035.                    });
036.                items.Add()
037.                    .Text(value: "Plan")
038.                    .Action(actionName: "Index", controllerName: "Planned")
039.                    .HtmlAttributes(new {@class = "m-k-menu-header"});
040.                items.Add()
041.                    .Text(value: "Write")
042.                    .Action(actionName: "Index", controllerName: "Written")
043.                    .HtmlAttributes(new {@class = "m-k-menu-header"});
044.                items.Add()
045.                    .Text(value: "Client")
046.                    .Action(actionName: "Index", controllerName: "Client")
047.                    .HtmlAttributes(new {@class = "m-k-menu-header"});
048.                items.Add()
049.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
050.                    .Text(value: "Project")
051.                    .Action(actionName: "NotFinished", controllerName: "Project")
052.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
053.                    .Items(innerChildren =>
054.                    {
055.                        innerChildren.Add()
056.                            .Text(value: "All Projects")
057.                            .Action(actionName: "Index", controllerName: "Project")
058.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
059.                        innerChildren.Add()
060.                            .Text(value: "All active Projects")
061.                            .Action(actionName: "NotFinished", controllerName: "Project")
062.                            .HtmlAttributes(new {@class = "m-k-menu-header"});
063.                    });
064.                items.Add()
065.                    .Text(value: "Employee")
066.                    .Action(actionName: "Index", controllerName: "Employee")
067.                    .HtmlAttributes(new {@class = "m-k-menu-header"});
068.                items.Add()
069.                    .Text(value: "PS")
070.                    .Action(actionName: "WrittenComplete", controllerName: "PS")
071.                    .HtmlAttributes(new {@class = "m-k-menu-header"});
072.                items.Add()
073.                    .Text("HR")
074.                    .Items(children =>
075.                    {
076.                        children.Add().Text("Billability").Action("Billability", "HR").HtmlAttributes(new {@class = "m-k-menu-header"});
077.                        children.Add().Text("Jeans");
078.                        children.Add().Text("Compensation").Action("Compensation", "HR").HtmlAttributes(new {@class = "m-k-menu-header"});
079.                        children.Add().Text("Jeans");
080.                        children.Add().Text("Leave").Action("Leave", "HR").HtmlAttributes(new {@class = "m-k-menu-header"});
081.                        children.Add().Text("Jeans");
082.                        children.Add().Text("OverviewPresence").Action("OverviewPresence", "HR").HtmlAttributes(new {@class = "m-k-menu-header"});
083.                        children.Add().Text("Jeans");
084.                        children.Add().Text("YearTarget").Action("YearTarget", "HR").HtmlAttributes(new {@class = "m-k-menu-header"});
085.                        children.Add().Text("Jeans");
086.                        children.Add().Text("Knitwear");
087.                        children.Add().Text("Shirts");
088.                        children.Add().Text("Belts");
089.                        children.Add().Text("Socks");
090.                        children.Add().Text("Fan Zone");
091.                    });
092.                items.Add()
093.                    .Text(value: "HR")
094.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
095.                    .Items(innerChildren =>
096.                    {
097.                        innerChildren.Add().Text(value: "Billability").Action(actionName: "Billability", controllerName: "HR", routeValues: null).HtmlAttributes(new {@class = "m-k-menu-header"});
098.                        innerChildren.Add().Text(value: "Compensation").Action(actionName: "Compensation", controllerName: "HR", routeValues: null).HtmlAttributes(new { @class = "m-k-menu-header" });
099.                        innerChildren.Add().Text(value: "Leave").Action(actionName: "Leave", controllerName: "HR", routeValues: null).HtmlAttributes(new { @class = "m-k-menu-header" });
100.                        innerChildren.Add().Text(value: "OverviewPresence").Action(actionName: "OverviewPresence", controllerName: "HR", routeValues: null).HtmlAttributes(new { @class = "m-k-menu-header" });
101.                        innerChildren.Add().Text(value: "YearTarget").Action(actionName: "YearTarget", controllerName: "HR", routeValues: null).HtmlAttributes(new {@class = "m-k-menu-header"});
102.                    });
103. 
104.                items.Add()
105.                    .HtmlAttributes(new {@class = "m-k-menu-header"})
106.                    .Text(value: "Account")
107.                    .Items(innerChildren =>
108.                    {
109.                        innerChildren.Add().Text(value: "Manage").Action(actionName: "Index", controllerName: "Manage", routeValues: null).HtmlAttributes(new {@class = "m-k-menu-header"});
110.                        innerChildren.Add().Text(value: "Log off").Url(value: "javascript:document.getElementById('logoutForm').submit()").HtmlAttributes(new {@class = "m-k-menu-header"});
111.                    });
112.            })
113.            )

 

 

Ivan Danchev
Telerik team
 answered on 17 Nov 2017
3 answers
868 views

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)
        {

        }

David
Top achievements
Rank 1
 answered on 17 Nov 2017
9 answers
903 views
Hi,

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

Stefan
Telerik team
 answered on 17 Nov 2017
4 answers
440 views

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!

Brian
Top achievements
Rank 2
Iron
 answered on 16 Nov 2017
2 answers
164 views

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!

Dimitar
Telerik team
 answered on 15 Nov 2017
1 answer
11.3K+ views

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

MyViewModel.cs

private DateTime _startDate;
public DateTime StartDate
{
    get { return _startDate; }
    set
    {
        if (value.Kind == DateTimeKind.Local)
            value = value.ToUniversalTime();
        _startDate = new DateTime(value.Ticks, DateTimeKind.Utc);
    }
}​

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

MyController.cs

public virtual ActionResult ​Index()
{
    var vm = new MyViewModel { StartDate = DateTime.UtcNow };
    return View(vm);
}

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

Index.cshtml

@model MyViewModel
 
@using (Html.BeginForm("Index", "MyController", FormMethod.Post, new { @role = "form" }))
{
    @(Html.Kendo().DateTimePickerFor(x => x.StartDate)
        .Format("yyyy/MM/dd HH:mm")
        .TimeFormat("HH:mm")
    )
    <button type="submit">Submit</button>
}

 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?

Stefan
Telerik team
 answered on 15 Nov 2017
1 answer
493 views

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.

 

Stefan
Telerik team
 answered on 15 Nov 2017
3 answers
279 views

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.

 

 

Nencho
Telerik team
 answered on 15 Nov 2017
4 answers
1.8K+ views

I know in my Grid, I can set the Width of the PopUp Edit dialog.  However, the controls inside of that edit window do not seem to care about the width of the window.  For example, here is my Grid code:

@(Html.Kendo().Grid<Provider>()
    .Name("providerGrid")
    .Columns(cols =>
    {
        cols.Bound(c => c.ProviderName);
        cols.Bound(c => c.Active).ClientTemplate("#: Active ? 'Yes' : 'No' #");
        cols.Command(c =>
        {
            c.Edit();
            c.Destroy();
        });
    })
    .DataSource(ds => ds
        .Ajax()
        .Model(m =>
        {
            m.Id(d => d.RecordId);
            m.Field(d => d.ProviderName);
            m.Field(d => d.Active);
        })
        .Update(u => u.Action("UpdateProvider", "Policy"))
        .Read(r => r.Action("GetProviders", "Policy").Type(HttpVerbs.Get))
        .Destroy(d => d.Action("DeleteProvider", "Policy"))
    )
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ProviderEdit").Window(w => w.Title("Edit Provider").Width(500)))
)

 

But the edit window looks like utter crap now.  See attached image. SO what do I need to do to actually get a decent looking edit dialog in this thing?

The more and more I work with this grid, the more and more I dislike it.  It's basic functionality, out of the box really is quite lame.  The only way to get a decent grid is by overriding everything in it, and I'm so very tired of writing grids...  ARGH!!!  

Sorry about that last bit, just had to vent for a bit...

 

IanV
Top achievements
Rank 1
Veteran
 answered on 15 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?