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
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.
)
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>
|
@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
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?
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.
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...