I would like to build a 2 sided multi select control like the following using Kendo UI MVC:
http://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/
I would imagine to do this I would need to create a custom Kendo UI widget by inheriting from the base widget class?? Does anyone have any examples or ideas how to do this?
Thanks in advance,
Dave
Hi there,
I am trying to filter my grid using 2 dropdownlists in the toolbar template section of the grid. I have been able to copy the example http://demos.telerik.com/aspnet-mvc/grid/toolbar-template which works absolutely fine and I have also been able to replicate the code for another dropdownlist but they are performing separate filtering.
I would like to be able to filter by one dropdownlist and then filter the results of that filter by the next dropdownlist.
the grid code I currently have is:
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<label class="site-label" for="site">Show reports by site:</label>
@(Html.Kendo().DropDownList()
.Name("sites")
.OptionLabel("All")
.DataTextField("SiteName")
.DataValueField("ClientSiteId")
.AutoBind(false)
.Events(e => e.Change("sitesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Sites", "Report");
}))
</div>
<div class="new-toolbar">
<label class="type-label" for="type">Show reports by type:</label>
@(Html.Kendo().DropDownList()
.Name("type")
.OptionLabel("All")
.DataTextField("StockTypeName")
.DataValueField("StockTypeId")
.AutoBind(false)
.Events(e => e.Change("typesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Types", "Report");
}))
</div>
</text>);
})
// the Script
function sitesChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "ClientSiteId", operator: "eq", value: parseInt(value) });
} else {
grid.dataSource.filter({});
}
}
function typesChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "StockTypeId", operator: "eq", value: parseInt(value) });
} else {
grid.dataSource.filter({});
}
}
Any help would be greatly appreciated.
Regards
Hi there,
I set up my grid to use multiple grid filters which are combo boxes. These filters allow you to refine your displayed data however there is a slight problem when using them. Initially they work fine but when you use them in conjunction with one another you get an error
System.FormatException: String was not recognized as a valid DateTime.I made 4 filters, 3 of them are string values and 1 of them is a datetime (see below).
@(Html.Kendo().ComboBox() .Name("periods") .Suggest(true) .Filter("contains") .DataTextField("Text") .DataValueField("Value") .Events(e => e.Change("filterChange")) .BindTo(new List<SelectListItem>() { new SelectListItem() { Text = "All", Value = "30000" }, new SelectListItem() { Text = "3 Months", Value = "90" }, new SelectListItem() { Text = "21 Days", Value = "21" }}))
@(Html.Kendo().ComboBox() .Name("locations") .Placeholder("-- Filter Region --") .Suggest(true) .Filter("contains") .DataTextField("Text") .DataValueField("Value") .AutoBind(false) .Events(e => e.Change("filterChange")) .BindTo(new List<SelectListItem>() { new SelectListItem() { Text = "Aberdeen", Value = "1" }, new SelectListItem() { Text = "Norway", Value = "2" }, new SelectListItem() { Text = "Southern Sector", Value = "3" }, new SelectListItem() { Text = "North Sea", Value = "4" }, new SelectListItem() { Text = "Brazil", Value = "7" }, new SelectListItem() { Text = "Other", Value = "8" }, new SelectListItem() { Text = "All", Value = "" }}))@(Html.Kendo().ComboBox() .Name("owners") .Placeholder("-- Filter Owner --") .Suggest(true) .Filter("contains") .DataTextField("company_name") .DataValueField("company_name") .AutoBind(false) .Events(e => e.Change("filterChange")) .DataSource(ds => { ds.Read("toolbar_Owners", "Home"); }))
@(Html.Kendo().ComboBox() .Name("vessel_types") .Placeholder("-- Select Type --") .Suggest(true) .Filter("contains") .DataTextField("spot_name") .DataValueField("spot_name") .AutoBind(false) .Events(e => e.Change("filterChange")) .DataSource(ds => { ds.Read("toolbar_Types", "Home"); }))If you filter on PERIODS and REGION there is no error at all. If you filter on PERIODS and any other filter the above error regarding datetime is thrown. Here is the javascript that handles the filters:
function filterChange() { var filters = []; var grid = $('#Grid').data('kendoGrid'); var ddl_owners = $("#owners").getKendoComboBox().value(); var ddl_region = $("#locations").getKendoComboBox().value(); var ddl_types = $("#vessel_types").getKendoComboBox().value(); var ddl_periods = $("#periods").getKendoComboBox().value(); var value = this.value(); //Convert value of dropdown to int intDays = parseInt(value), today = new Date(), addDays = ddl_periods.value; today.setDate(today.getDate() + intDays); today.setHours(0, 0, 0, 0); if (ddl_owners) { filters.push( { field: "owner_company", operator: "eq", value: ddl_owners } ); } if (ddl_region) { filters.push( { field: "current_location_spotlist_id" && "spotlist_id", operator: "eq", value: ddl_region } ); } if (ddl_types) { filters.push( { field: "vessel_type", operator: "eq", value: ddl_types, } ); console.log("Type" + ddl_types); } if (ddl_periods) { filters.push( { field: "fixture_stop", operator: "lte", value: today } ); console.log("Period: " + today); } grid.dataSource.filter({ logic: "and", filters: filters }); }I am looking for some help on where I may have gone wrong.
Thanks
@(Html.Kendo().Grid<Indato.Data.EF.Models.Oplovk>() .Name("grid") .Columns(columns => { columns.ForeignKey(c => c.idCategory, (System.Collections.IEnumerable)ViewData["Categories"], "idCategory", "Name").Title("Category").EditorTemplateName("Category"); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.id); }) ) .ClientDetailTemplateId("template")@model object @( Html.Kendo().DropDownListFor(m => m) .AutoBind(false) .DataSource(ds => { ds.Read("Catgories", "Category", new { Area = "Tabellen" }); }) .DataTextField("Name") .DataValueField("idCategory"))
I have an AutoComplete control in a in a client template that uses the ToClientTemplate method
@(Html.Kendo().AutoComplete() .Name("presenter") .DataTextField("DisplayText") .Filter("contains") .MinLength(3) .HtmlAttributes(new { style = "width:100%" }) .DataSource(source => { source.Read(read => { read.Action("Search", "People", new { SPHostUrl = ViewBag.SPHostUrl }) .Data("onPresenterAdditionalData"); }) .ServerFiltering(true); }) .Template("<div><span class=\"k-state-default\">${ data.DisplayText }</span></div><div><span class=\"k-state-default\">${ data.Title }</span></div>") .ToClientTemplate())The controller is returning data and I have used Fiddler to make sure it is being sent to the browser.
The dropdown just shows "undefined" for DisplayText and "null" for Title.
The above control is in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"> and render using
var template = kendo.template($("#documentDetailsTemplate").html());
When I select one of the options, it displays the DisplayText of the selected option.

I have a page where the update is put in motion using a custom button click that resides in the Kendo Toolbar.
The editing is done using GridEditMode.InCell and everything is working for the update but at the end of the process the little red triangle is remaining in the modified cells.
I have tried the following to clear them but it is not working:
....
grid.dataSource.read();
resetGridDirtyIndicators();
...
function resetGridDirtyIndicators (){ var grid = $('#Grid').data().kendoGrid; var $gridData = grid.dataSource.data(); for (var i = 0; i < $gridData.length; i++) { var row = grid.tbody.find("tr[data-uid='" + $gridData[i].uid + "']"); var cell = row.find("td:eq(" + $gridData[i].ColumnIndex + ")"); if (cell.hasClass("k-dirty-cell")) { debugger; cell.removeClass("k-dirty-cell"); } } }
Any Help would be greatly appreciated.
Thanks,
Reid

Good day,
In the spreadsheet control any time you type a string that resembles a date or time, the format for the cell changes to Date.
For instance, if you go to the DataSource Binding demo at http://demos.telerik.com/aspnet-mvc/spreadsheet/datasource and type 10:00 PM in the ProductName column the current date will be displayed in the cell. If you type 10-10-10 it will be changed to 10/10/2010. If you type 10:99 it gets changed to 11:39.
So with a spreadsheet that is bound to a datasource. How do you force a column to keep the input string as a string?
Thanks and Regards