Kendo TreeView does not generate data attributes for custom template - kendo-ui

I am using Kendo.Mvc.UI.TreeViewItemModel to build kendo treeview. Othe than Id and Text property this class also has HtmlAttributes property of type IDictionary<string, string>
I can add any additional data into HtmlAttributes property while building model, and kendo would render these Html Attributes as html data attribute on tree node.
public IEnumerable<TreeViewItemModel> BuildTreeView(IEnumerable<MyGroup> groups)
{
var nodes = new List<TreeViewItemModel>();
foreach (var grp in groups)
{
var root = new TreeViewItemModel()
{
Id = "0",
Text = grp.Key,
HasChildren = grp.Any()
};
foreach (var item in grp)
{
var dictionary = new Dictionary<string, string>();
dictionary.Add("data-template-id",item.TemplateID.ToString());
dictionary.Add("data-filename", item.FileName);
root.Items.Add(new TreeViewItemModel()
{
Text = item.DisplayText,
HasChildren = false,
HtmlAttributes = dictionary
});
}
nodes.Add(root);
}
return nodes;
}
cshtml
#(Html.Kendo().TreeView()
.Name("MyTreeView")
.DataTextField("Text")
.BindTo(Model.Items))
and then in JS i can access this data
var _treeView = $("#MyTreeView").getKendoTreeView();
var htmlItem = _treeView.select();
var templateid = htmlItem.data("template-id");
var filename = htmlItem.data("filename");
This is working fine as long as im using kendo's default template. However if i use custom template then Kendo does not generate data attributes
#(Html.Kendo().TreeView()
.Name("MyTreeView")
.TemplateId("treeViewItemTemplate")
.BindTo(Model.Items))
<script type="text/x-kendo-tmpl" id="treeViewItemTemplate">
<span>#=item.text#</span>
# if (!item.items){#
<span class="glyphicon glyphicon-plus-sign" aria-hidden=true></span>
#}#
</script>
now when the page renders and using F12 if look at the tree node ( which is li tag) i don't see any data attributes

Related

Umbraco problem getting chilld properties

I have Umbraco Content List containing multiple Umbraco Content pages. When I try to find some content page properties like Page Title or Heading or bodyText I'm getting "The function evaluation requires all threads to run.". Here is my code.
#using Umbraco.Web
#using Umbraco.Web.Mvc
#{
Layout = "T";
}
#{
var UContentList = Model.Content.Children;
var SContentList = new List<MyProgram.Models.MyContent>();
foreach (var uContent in UContentList)
{
var SContent = new IMyProgram.Models.MyContent(
uContent.pageTitle.ToString(),
uContent.contentExcerpt.ToString()
);
SContentList.Add(SContent);
}
Please help how do I get the values from these properties
I've managed to do it. First need to debug and do this: https://blogs.msdn.microsoft.com/eliofek/2012/12/12/why-do-we-get-the-function-evaluation-requires-all-threads-to-run/
Then here is the source:
#inherits UmbracoTemplatePage
#using Umbraco.Web
#using Umbraco.Web.Mvc
#using ContentModels = Umbraco.Web.PublishedContentModels;
#{
/**/
Layout = "";
}
#{
var UContentList = Model.Content.Children();
var SContentList = new List<MyProgram.Models.MyContent>();
foreach (var uContent in UContentList)
{
var SContent = new MyProgram.Models.MyContent(
uContent.GetPropertyValue("pageTitle").ToString(),
uContent.GetPropertyValue("contentExcerpt").ToString(),
uContent.Url.ToString()
);
SContentList.Add(SContent);
}
The difference is the #inherits and #using ContentModels.

dropDownList doesn't show real data

i have added the model in my view:
#model Tuple<List<EshopTheme.Areas.Administrators.Models.ThemeGroupsModel>,
EshopTheme.Areas.Administrators.Models.AdminModel,
EshopTheme.Areas.Administrators.Models.ThemesModel>
in my Controller i have added this action:
public ActionResult AddTheme()
{
AdminSrv adminService = new AdminSrv();
AdminModel adminModel = new AdminModel();
ThemesModel themeModel = new ThemesModel();
Tuple<List<ThemeGroupsModel>, AdminModel, ThemesModel> tuple =
new Tuple<List<ThemeGroupsModel>, AdminModel, ThemesModel>
(adminService.getAllThemeGroupByAdmin(), adminModel, themeModel);
return View(tuple);
}
i have used this DropDownListFor :
#Html.DropDownListFor(x => x.Item1, new SelectList(Model.Item1))
but, DropDownListFor , shows the list of:
EshopTheme.Areas.Administrators.Models.ThemeGroupsModel
EshopTheme.Areas.Administrators.Models.ThemeGroupsModel
EshopTheme.Areas.Administrators.Models.ThemeGroupsModel
why?????????????
this is my getAllThemeGroupByAdmin() code:
public List<ThemeGroupsModel> getAllThemeGroupByAdmin()
{
List<ThemeGroupsModel> ThemeGr = new List<ThemeGroupsModel>();
ThemeGroupsModel ThemeGrTemp;
using (var context = new EShopThemeDBEntities(idbconnection.ConnStr))
{
var ThemeGroupList = (from o in context.ThemeGroups
select o).ToList();
foreach (var item in ThemeGroupList)
{
ThemeGrTemp = new ThemeGroupsModel();
ThemeGrTemp.ThemeGroupName = item.ThemeGroupName;
ThemeGrTemp.ThemeGroupId = item.ThemeGroupID;
ThemeGr.Add(ThemeGrTemp);
}
}
return ThemeGr;
}
You should use Text and Value property;
SelectList selectList = new SelectList(selectListItems, "Value", "Text");

How to bind listbox items using observable colletion in wp7?

My Code:
ObservableCollection<SampleCheckedData> interestrates = new ObservableCollection<SampleCheckedData>();
XDocument xmlDocu = XDocument.Load(new MemoryStream(System.Text.UTF8Encoding.UTF8.GetBytes(result)));
interestrates = (from rts in xmlDocu.Descendants("Friend")
select new SampleCheckedData
{
Id = (string)rts.Element("userid"),
Name = (string)rts.Element("name"),
Icon = (string)rts.Element("imageurl"),
VisibleStatus = (string)rts.Element("visiblestatus"),
AppStatus = (string)rts.Element("loginstatus"),
imgBubble =bitmapRed,
}).ToList<SampleCheckedData>();
Then Getting Error as can't implicitly convert system.collection.generic.list to system.collection.observablecollection like that.How to bind listbox items using observable collection?
EDIT:
Button b = sender as Button;
var res = interestrates.Where(a => a.Id.Equals(((System.Windows.FrameworkElement)(e.OriginalSource)).Tag)).ToList();
if (res.Count == 1)
interestrates.Remove(res.First());
interestrates = new ObservableCollection<SampleCheckedData>();
lstFriendRequuest.ItemsSource = "";
bindGetFriends();
Here successfully deleting item from list but after calling bindGetFriends() in that binding the items newly then i am not getting new items getting old items.why the service returning old items list?
Use this extension:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
public static class Extensions
{
public static ObservableCollection<T> ToObservableCollection<T>(this IEnumerable<T> collection)
{
var observableCollection = new ObservableCollection<T>();
foreach (var item in collection) observableCollection.Add(item);
return observableCollection;
}
}
Usage:
interestrates = (from rts in xmlDocu.Descendants("Friend")
select new SampleCheckedData
{
Id = (string)rts.Element("userid"),
Name = (string)rts.Element("name"),
Icon = (string)rts.Element("imageurl"),
VisibleStatus = (string)rts.Element("visiblestatus"),
AppStatus = (string)rts.Element("loginstatus"),
imgBubble =bitmapRed,
}).ToObservableCollection<SampleCheckedData>();
Change your Observable collection to List,
List<SampleCheckedData> interestrates = new List<SampleCheckedData>();
You can also bind List to ListBox, instead of ObservableCollection
And to solve your other problem of deleting selected item from listbox, try the following code:
var selectedIndex = listbox.SelectedIndex;
var listItems = listbox.ItemsSource as List<SampleCheckedData>;
listItems.RemoveAt(selectedIndex);
listbox.ItemsSource = null;
listbox.ItemsSource = listItems;
If still you are facing problems, let me know

simple dropdown list

i did not found simple dropdown list .
i'm new in mvc3
this part create and fill : ListMonitoringLicenseModelList = new List();
i fill this objectsList in another part and use it to fill MonitoringLicenseModelList
objectsList = new List(...fill objectsList...);
List<MonitoringLicenseModel>MonitoringLicenseModelList = new List<MonitoringLicenseModel>();
foreach (object o in objectsList)
{
string[] tmpString = o.ToString().Split('#');
int i = 0;
monitoringLicenseModel = new MonitoringLicenseModel();
monitoringLicenseModel.MonitoringID =Convert.ToInt32(tmpString[i++]);
monitoringLicenseModel.LicenseUI = tmpString[i++];
MonitoringLicenseModelList.Add(monitoringLicenseModel);
}
public ActionResult SchedulesIndex()
{
return View(MonitoringLicenseModelList);
}
how can i write dropdownlist to show this
name value
MonitoringID = LicenseUI
#model List<MonitoringLicenseModel>
...
#Html.DropDownList(
"SelectedMotoringID",
new SelectList(Model, "MonitoringID", "LicenseUI")
)

MVC 3 + knockoutjs: adding the data-bind attribute when using EditorFor for a boolean field

Using #Html.EditorFor(model =>model.IsClient), where IsClient is a boolean, renders a drop down list with Not Set, Yes and No as the options.
All well and good.
Now I want to use knockoutjs with the resulting dropdownlist, that I like, so how do I add the data-bind attribute using #Html.EditorFor, that I need for knockoutjs to work with this drop down?
I have tried:
#Html.EditorFor(model => model.IsClient, new Dictionary<string, object> { { "data-bind", "value: Account.IsClient" } })
However, this uses the object additionalViewData parameter, and it doesn't render the data-bind attribute. Which is probably quite natural, as this parameter is probably nothing to do with Html Attributes for the rendered tag.
However, can't find any reasonable documentation, and none of the other overloads look likely candidates for what I want.
TIA any suggestions.
Brad Wilson blogged about display and editor templates in ASP.NET MVC 2. So you could modify the default template for boolean and add the attributes you need (~/Views/Shared/EditorTemplates/MyTemplate.cshtml):
#{
bool? value = null;
if (ViewData.Model != null)
{
value = Convert.ToBoolean(ViewData.Model, System.Globalization.CultureInfo.InvariantCulture);
}
var triStateValues = new List<SelectListItem>
{
new SelectListItem
{
Text = "Not Set",
Value = String.Empty,
Selected = !value.HasValue
},
new SelectListItem
{
Text = "True",
Value = "true",
Selected = value.HasValue && value.Value
},
new SelectListItem
{
Text = "False",
Value = "false",
Selected = value.HasValue && !value.Value
},
};
}
#if (ViewData.ModelMetadata.IsNullableValueType)
{
<!-- TODO: here you can use any attributes you like -->
#Html.DropDownList(
"",
triStateValues,
new {
#class = "list-box tri-state",
data_bind="value: " + ViewData.TemplateInfo.GetFullHtmlFieldName("") // you could also use ViewData.ModelMetadata.PropertyName if you want to get only the property name and not the entire navigation hierarchy name
}
)
}
else
{
#Html.CheckBox("", value ?? false, new { #class = "check-box" })
}
and finally:
#Html.EditorFor(model => model.IsClient, "MyTemplate")
or decorate the IsClient property on your view model with the UIHint attribute:
[UIHint("MyTemplate")]
public bool? IsClient { get; set; }
and then:
#Html.EditorFor(x => x.IsClient)
will automatically pick the custom editor template.
Addendum for knockoutjs users:
#Darin Dimitrov's answer is great, but slightly too rigid to use with knockoutjs, where complex views may lead to viewModels that don't entirely map to the #Model parameter.
So I have made use of the object additionalViewData parameter. To access the additionalViewData parameter from your Custom EditorTemplate, see the following SO question:
Access additionalViewData from Custom EditorTemplate code
Digression:
The additionalViewData param is confusing in that it does nothing with the default editor. It only comes into its own with a custom editor template.
Anyway, my amendments to Darin's code are as follows:
#if (ViewData.ModelMetadata.IsNullableValueType)
{
var x = ViewData["koObservablePrefix"];
if ((x != "") && (x != null)) { x = x + "."; }
#Html.DropDownList(
"",
triStateValues,
new {
#class = "list-box tri-state",
data_bind="value: " + x + ViewData.TemplateInfo.GetFullHtmlFieldName("") // or you could also use ViewData.ModelMetadata.PropertyName if you want to get only the property name and not the entire navigation hierarchy name
}
)
}
else
{
#Html.CheckBox("", value ?? false, new { #class = "check-box" })
}
Note the lines:
var x = ViewData["koObservablePrefix"];
if ((x != "") && (x != null)) { x = x + "."; }
koObservablePrefix is there so that I can add an arbitrary prefix to my viewModel ko.observable. You could do other things if you so choose.
I use the variable x as follows:
data_bind="value: " + x + ViewData.TemplateInfo.GetFullHtmlFieldName("")
That way, if I don't pass in the additionalViewData "koObservablePrefix" it all still works.
So, now I can write:
#Html.EditorFor(model => model.IsClient, "koBoolEditorFor", new { koObservablePrefix = "Account" })
that will render as:
<select class="list-box tri-state" data-bind="value: Account.IsBank" id="IsBank" name="IsBank">
Note the "value: Account.IsBank" data-bind attribute value.
This is useful if, for example, your views strongly typed model is of type Account, but in your accountViewModel for your page, you have a more complex structure, so you need to package your observables in an account object. EG:
function account(accountId, personId, accountName, isClient, isProvider, isBank) {
this.AccountId = ko.observable(accountId);
this.PersonId = ko.observable(personId);
this.AccountName = ko.observable(accountName);
this.IsClient = ko.observable(isClient);
this.IsProvider = ko.observable(isProvider);
this.IsBank = ko.observable(isBank);
}
function accountViewModel() {
var self = this;
this.selectedCostCentre = ko.observable('');
this.Account = new account(#Model.AccountId, #Model.PersonId, '#Model.AccountName', '#Model.IsClient','#Model.IsProvider', '#Model.IsBank');
// etc. etc
}
If you don't have this kind of structure, then, the code will pick up the structure. It is just a matter of tailoring your viewModel js to this, uhmmm, flexible convention.
Hope this isn't too confusing...

Resources