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
);
}
Hi folks,
I am having the following column template :
<
script
id
=
"gridTemplate"
type
=
"text/x-kendo-template"
>
<
tr
data-uid
=
"#= uid #"
>
<
td
>
<
input
type
=
"color"
kendo-color-picker
=
"colorPicker"
k-palette
=
"trend.colors"
value
=
"#= color #"
on-change
=
"trend.changeColor(colorPicker.value(), this)"
/>
<
button
type
=
"button"
style
=
"background-color:black; float:right;"
class
=
"btn btn-default btn-xs white"
ng-click
=
"trend.deleteSeries('#= tag#');"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
button
>
</
td
>
<
td
>
#= tag#
</
td
>
<
td
>
#= description#
</
td
>
<
td
>
#= unit#
</
td
>
</
tr
>
</
script
>
The problem is with setting the color of the color picker (via the value attribute) in the first column.Initially in the dataItem, the value of color was in the form of #rrggbb, but this was resulting in an error (because of the "#" symbol). I changed it in rgba() and it was working fine with 2014 kendo release. Today I update to 2015 and now it does not work. Any suggestion how to fix it?