Using UI for MVC (Q1 2016)
@(
Html.Kendo().ComboBoxFor(m => m)
.Filter(FilterType.Contains)
.AutoBind(false)
.Placeholder("Choose Course")
.HtmlAttributes(new { style = "width:400px;" })
//Removed for brevity
)
The following width style in the HtmlAttributes above will cause the combobox dropdown button wrapper div to increase as a percentage of the entire combobox (ie. the div gets wider as the entire combobox gets wider.). Is this the native behavior when changing the width of the combobox? I also have not had this issue with any other widgets.
See attached png file.
I am using Kendo UI 2016.1.226, Windows 7 Enterprise SP 1, Google Chrome 51.0.2704.79 m, SQL Server 2012
I created a ListView for available report filters (Filter List), which loads from a stored procedure and uses the HTML ListView wrapper. On Filter List databound, I am dynamically creating 2 more listviews (Available items and Selected items) for each item in the primary ListView. When an item is selected from the primary, if no items are currently in the available list, the datasource is read from a stored procedure, passing the report filter ID, and returns a list of KeyIndex (int) and Value (string) items from various DB tables. These are supposed to be loaded in the Available ListView's databound event. However, there are no items in the datasource after return from the stored procedure call.
I suspect the issue is a JSON vs. OData format issue (see 12/5/2011 post here: http://www.telerik.com/forums/connect-grid-to-mvc-controller-method). I don't care about grouping, filtering, and sorting of the items, but it seems like I may need to send a request object to the controller in order to call ToDataSourceResult, which I'm guessing converts JSON to OData format. The Available datasource has AutoBind set to false, so that I can load only the report filters as needed. When I try to pass information in the request, I get the following error because there is no data to group, filter, or sort yet:
jquery.min.js:3 Uncaught TypeError: Cannot read property 'length' of undefined
var availableDataSource = listViewAvailable.dataSource;
var parameterMap = availableDataSource.transport.parameterMap;
var request = parameterMap({ filter: availableDataSource.filter(), group: availableDataSource.group(), sort: availableDataSource.sort() });
availableDataSource.transport.options.read.url =
"/ReportCategory/GetFilterValues?FilterID=" + dataItem.ReportFilterID + "&TplNum=" + @ViewBag.TplNum + "&request=" + request;
availableDataSource.read();
If I leave the parameterMap empty, my controller routine is called, the JSON data is populated and returned to the client, but the number of items in the datasource is 0:
var request = parameterMap({ });
public async Task<ActionResult> GetFilterValues([DataSourceRequest]DataSourceRequest request, int FilterID = 0, int TplNum = 0)
{
var url = string.Format("{0}{1}/{2}", GlobalVariables.ApiBaseUrl.Replace("api", "GetFilterValues"), FilterID, TplNum);
var jsonResult = await Request.GetSerializedJsonResult<FilterValues>(url);
IList listFilterValues = (IList)jsonResult;
return Json(listFilterValues.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}
Datasource definition:
filterDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "/api/GetFilterValues/" + filterRecord.ReportFilterID + '/' + @ViewBag.TplNum,
type: "GET",
dataType: "json"
},
},
schema: {
model: {
fields: {
KeyIndex: { type: "number" },
Value: { type: "string" }
}
},
data: function(data) { return data.value; },
total: function(data) { return data["odata.count"]; }
},
serverFiltering: true,
serverGrouping: true,
serverSorting: true
});
Available ListView:
idString = "Filters_1_" + filterIndex;
divString = '<div id="' + idString + '" class="filterlist1" style="display: none;"><h2>Available Values</h2></div>';
divStringInner = '<div class="filterlist1_inner"></div>';
$(divString).insertAfter('#ReportFilters');
$(divStringInner).insertAfter('#' + idString + ' h2').kendoListView({
dataSource: filterDataSource,
dataBound: onAvailableDataBound,
autoBind: false,
pageable: false,
selectable: selectableType,
template: kendo.template($('#' + templateName).html())
});
ListView item template (TBD being eventually replaced by the Value string in the datasource):
<script type="text/x-kendo-tmpl" id="options">
<div class="filter2">
<h3 value='0'>TBD</h3>
</div>
</script>
I saw something for SQL Server called FOR JSON AUTO that may help make the stored procedure OData compliant (https://msdn.microsoft.com/en-us/library/dn921897.aspx), but that is for SQL Server 2016 on. Any ideas?
public
JsonResult GetContainers()
{
List<Container> containers =
new
List<Container>();
containers.Add(
new
Container() { ContainerId = 1, ContainerName =
"Container1"
});
containers.Add(
new
Container() { ContainerId = 2, ContainerName =
"Container2"
});
return
Json(containers);
}
@(Html.Kendo().ComboBox()
.Name("TestContainerName")
.DataTextField("ContainerName")
.DataValueField("ContainerId")
.Filter(FilterType.Contains)
.DataSource(dataSource =>
{
dataSource.Read(read =>
{
read.Action("GetContainers", "Common");
});
})
.SelectedIndex(0)
)
I am using Kendo Grid and also using its Foreign Key column editing option.
When I build my project on local host, it seems everything is perfect.
However, when I publish it, it does not working as on my local host.
On my local, it is a dropdownlist but when I publish it, it seems like its a numeric textbox.
How can I fix this ?
Hi!
After a while, I was able to have a working EditorTemplate for a List<MyObject> type. I'm calling the Template using UIHint over the collection property n the parent ViewModel. The grid on the EditorTemplate is however complete Widget-based now. It is working with the data array woth matching properties as of the actual ViewModel. How do I map the final rows of a kendo grid to the Model?
This isn't really specific to MobileView but I'm using a MobileView in a partial view that I'm using as a layout template and I want to make the Title dynamic by using ViewBag.Title as the string.
@(Html.Kendo().MobileView()
.Title(ViewBag.Title)
.Name("two-drawer-home")
.Header(obj => Html.Kendo().MobileNavBar().Content(navbar =>
@<
text
>
@(Html.Kendo().MobileButton().Name("btnLeftDrawer").Align(MobileButtonAlign.Left).Rel(MobileButtonRel.Drawer).Url("#left-drawer").ClickOn("down"))
@navbar.ViewTitle("Hello there")
@(Html.Kendo().MobileButton().Name("btnRightDrawer").Align(MobileButtonAlign.Right).Rel(MobileButtonRel.Drawer).Url("#right-drawer").ClickOn("down"))
</
text
>)
.HtmlAttributes(new { style = "height: 46px;" })
)
.Content(@<
text
>@RenderBody()</
text
>)
)
But this isn't valid. I've also tried @ViewBag.Title and various other incarnations. I'm wondering if this type of thing is possible in the Title of the MVC controls.
//Old recurrence exception:
recurrenceException:
"20160603T050000Z;20160503T050000Z;"
//New recurrence exception:
recurrenceException:
"20160603T050000Z,20160503T050000Z"