
Hi
Is it possible to use templates in a databound panelbar?
Pseudo:
<ul kendo-panel-bar k-data-source="files.panelData.data()" k-rebind="files.panelData.data()"> <span k-template> <i class="fa fa-folder-open" ng-hide="{{!dataItem.expanded}}"></i> <i class="fa fa-folder" ng-hide="{{dataItem.expanded}}"></i> {{dataItem.text}} <span ng-show="dataItem.count!= 0">({{dataItem.count}})</span> </span></ul>(gives --> k-template without a matching parent widget found. It can be one of the following: ?^^kendoTreeMap, ?^^kendoMobileListView, ?^^kendoMobileScrollView, ?^^kendoListView, ?^^kendoTreeView )

<script type="text/javascript">
function ImgTemplate(data) {
var html = "<img src='" + data + "' />";
return html;
}
</script>
@(Html.Kendo().Grid(Model)
.Name("ObjGrid")
.Mobile(MobileMode.Tablet)
.HtmlAttributes(new { style = "height: 300px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
}
})
.ServerOperation(false)
)
.Columns(columns =>
{
for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
{
if(ViewBag.ListHeader[i, 0] != null){
if (ViewBag.ListHeader[i, 1] == "imagePath")
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title("Typ").ClientTemplate("#= ImgTemplate(imagePath) #").Width(12);
}
else
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]).Width(150);
}
}
}
})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.ToClientTemplate()
)
This code Displays Image properly when run on Desktop Browsers. But the view for tablet with same code does not diosplay Image but Displays the path. This partial view gets embeded in a tab using LoadContentFrom
What can cause this
Thanks
Anamika
$("#grid").kendoGrid({ dataSource: { transport: { read: { url: "@Url.Action("GridDataSource")", contentType:"application/json; charset=utf-8" } } }, columns:[{field:"Name",title:"Name"}] });public JsonResult GridDataSource() { return Json(ProductsList, JsonRequestBehavior.AllowGet); }$("#grid").data("kendoGrid").dataSource.read(); $("#grid").data("kendoGrid").refresh();$("#grid").data("kendoGrid").dataSource.sync();
Hi,
I have created a kendo-drop-down-list in angularjs. I called a web service for records. Suppose i got around 15 array object as in the response but kendo drop down list bind only 10 records. If i search from the filter then i can see respective data. but not visible all records in drop down list.
Please have a look with code as well. Let me know what is the issue.
<select id="CARRIER_NAME" class="form-control" kendo-drop-down-list k-options="carrierOptions" name="carrierName" ng-model="test.carrierName"></select>
<script id="noDataTemplate" class="noDataTemplate" type="text/x-kendo-tmpl">
<div> No data found. Do you want to add new item - '#: instance.filterInput.val() #' ? {{someAngularFunction()}}
</div>
<br />
<button class="k-button add-new-item-btn" ng-click="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
</script>
CallWebServiceFactory.getDropDownData(reqData).then(function Success(response) {
if(response.isSuccess){
$scope.carrierData = response.data;
$scope.carrierOptions = {
filter: "startswith",
dataSource: $scope.carrierData,
dataTextField: "name",
dataValueField: "id",
noDataTemplate: $(".noDataTemplate").html(),
index: -1
};
}
}, function(error) {
console.log(error);
});
Thanks,
Lokesh Pareek



Hello
I've got a treeview on a dark barkground. That way I can't see the expand/close arrow on each node tough its still there. So I wondered how I can change their colors. They are probably icons so changing color by CSS is not possible.I've found some examples many years ago that don't seem to work anymore. I've tried to affect the expand/collapse area in any way, but no changes will show up:
.k-icon .k-i-collapse .k-i-expand { background-color: #8ea03a !important; background: url("../image/arrowclose.svg") center center;}.k-treeview .k-plus { background-color:yellow !important;; color:yellow !important;;}
So I wonder how can I change the color and/or expand/collapse icons of a treeview?
Regards

function toggleClick(expand) { var grid = $("#Orders").data("tGrid"); grid.$rows().each(function () { if (expand) { grid.expandRow(this); }else{ grid.collapseRow(this); } }); } function expandDetails() { toggleClick(true); } function collapseDetails() { toggleClick(false); }