I want to use telerik treeview in mvc, but i don't want to use kendo UI, and i can't fine any example of teleric treeview for mvc.
can any one help me or give me any example so i can learn and understand?
I want to use treeview with checkbox and list is like this...
{
pencil
*natraj
*apsara
pen
*bollpen
>rotomak
>add jel
*Inkpen
Eraser
*natraj
}
This type of list then how can i use teleriK treeview with mvc framework for insert and delete function?
it's relly need please give any example or sample code.
Sample code:
#model YourModelTree
#(Html.Telerik().TreeView()
.Name("TelerikTree")
.ShowCheckBox(true)
.BindTo(Model, mappings =>
{
mappings.For<YourModelTree>
(binding => binding
.ItemDataBound((item, modelItem) =>
{
item.Text = modelItem.Name;
item.Value = modelItem.Id.ToString();
item.Expanded = true;
item.Checked = true;
}).Children(c => c.Children));
})))
Example of model Tree:
public class ModelTree
{
public int Id { get; set; }
public string Name { get; set; }
public IList<ModelTree>() Children {get;set;}
public ModelTree Parent {get;set;}
}
Also you can check telerik documentation .If you have any question please ask me.
Related
I have a list of items TechDocBranch that I want to represent as a tree in Kendo Blazor TreeList.
public class TechDocBranch
{
public long ID { get; set; }
public long ParentID { get; set; }
public string Title { get; set; }
// some another fields
}
I wrote the following code:
<TelerikTreeList Data="#TechDocBranches"
IdField="#nameof(TechDocBranch.ID)"
ParentIdField="#nameof(TechDocBranch.ParentID)">
<TreeListColumns>
<TreeListColumn Field="#nameof(TechDocBranch.ID)"></TreeListColumn>
<TreeListColumn Field="#nameof(TechDocBranch.Title)"></TreeListColumn>
<TreeListColumn Field="#nameof(TechDocBranch.ParentID)"></TreeListColumn>
</TreeListColumns>
</TelerikTreeList>
#code {
public List<TechDocBranch> TechDocBranches;
protected override async Task OnInitializedAsync()
{
TechDocBranches = await ProductionService.GetTechDocBranches();
}
}
But it gave me a simple table, not a tree. I tried using TreeView (only html changed):
<TelerikTreeView Data="#TechDocBranches">
<TreeViewBindings>
<TreeViewBinding
IdField="#nameof(TechDocBranch.ID)"
TextField="#nameof(TechDocBranch.Title)"
ParentIdField="#nameof(TechDocBranch.ParentID)">
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
and it works correct and gives me the tree.
What should I do to get the tree in TreeList?
You must add expandable property for any column to solve this problem. For example:
<TreeListColumn Field="#nameof(TDB.ID)" Expandable="true"></TreeListColumn>
P.S. Please note that Kendo TreeList unlike Kendo TreeView works slow with large data size. (Version 2.18 for Blazor)
I'm trying to make a collection of objects, in this case "AuditPoint" and I want to verify that the list contains the objects I expect it to. I've tried the standard
#foreach (var item in Model)
{
<p>#Html.DisplayFor(m => item)</p>
}
that is normally recommended for this situation but I couldn't get it to display my list. I would really like to double check the contents of my list because I'm picking up this project after my predecessor so I'm lost on a lot of the logic behind his code. So outputting as much as possible to see what I'm doing is always nice but is sometimes difficult due to the intricacy of his program I find it difficult to connect my C# logic to the web logic (which includes html, javascript, typescript, jquery, mustache and I'm sure many other frameworks I have yet to find).
Below is where I am making my collection which I assume is being done right but if you can see anything obviously wrong please point it out. I thought I would include this because it help with anyone's solution.
[HttpPost]
[Route("api/auditpoints")]
public void Post([FromBody]AuditPoint auditPoint)
{
AuditPoints auditPoints = new AuditPoints();
auditPoints.Add(auditPoint);
auditPoints.Save();
//These are my additions below
List<AuditPoint> autoPoints = new List<AuditPoint>();
if (auditPoint.Automated == true)
{
autoPoints.Add(auditPoint);
}
}
Try something like this,
List<AuditPoint> autoPoints = new List<AuditPoint>();
[HttpPost]
[Route("api/auditpoints")]
public void Post([FromBody]AuditPoint auditPoint)
{
AuditPoints auditPoints = new AuditPoints();
auditPoints.Add(auditPoint);
auditPoints.Save();
ListAutoPoints(auditPoint);
}
public void ListAutoPoints(AuditPoint _autoPoint) {
if (auditPoint.Automated == true)
{
autoPoints.Add(auditPoint);
}
}
I think the listing of the items need be separate from the Post logic, then called into existing or new Post method in the controller.
Also, I think, the model needs to be used to populate the list...
#Model IEnumerable<namespace.Models.AutoPoint>
#foreach (var item in Model)
{
<div>
<ul>
<li>#Html.DisplayNameFor(model => model.AutoPoint)</li>
</ul>
</div>
}
Model should fit something like this,
[Table("AuditPoints")
public class AuditPoint
{
[Key]
public AuditPointID { get; set;}
public List<AutoPoint> AutoPoints { get; set;}
}
public class AutoPoint
{
public AutoPointID { get; set; }
public Name { get; set; }
}
Similar answer here: Display List in a View MVC
It isn't a direct answer to the question I posted here but I did solve the problem that this question was related to on my project so I am no longer seeking an answer.
Problem description
I'm currently working on a Wizard mechanism in our ASP.NET MVC application. However, I've faced a problem while trying to bind model in the view. In short:
I've got a wizard model which looks more or less like this:
class WizardViewModel {
public IList<StepViewModel> Steps { get; set; }
// ...
}
Each step except for last has got its own model. The last step (summary) takes whole WizardStepModel and is used only to display data (via disabled controls). Displaying values from all steps leads to this kind of code in the view:
#Html.DropDownListFor(
m => ((ConcreteStepModel)Model.Steps[0]).SelectedValue,
((ConcreteStepModel)Model.Steps[0]).SelectList,
new { disabled = "disabled" }
)
The code works, but continuous casting base step model to a concrete class only to get the value:
Is uncomfortable,
makes code less readable.
What I tried to do?
I thought that I could create an alias for each step:
#{
ConcreteStepModel stepOne = (ConcreteStepModel)Model.Steps[0];
}
And then:
#Html.DropDownListFor(
m => stepOne.SelectedValue, stepOne.SelectList, new { disabled = "disabled" }
)
It works for most of controls, but not for DropDownList. For some reason, value of the dropdown is bound incorrectly and shows first option instead of the selected one.
Question
Is there another way which I could use for creating some kind of aliases for steps from the wizard so that I don't have to perform casting each time I need to get a value? Or maybe I am doing something wrong? I'd be grateful for any help.
Since your 'last step' is just a summary and presumably used as a final 'confirmation step' before saving to the database, then you should not be generating disabled form controls for your properties. It would be rendering anywhere 2-5 times the html that is necessary which will just degrade performance.
Instead just generate the value of the property as text, for example
<div class="field">
<div class="field-label">#Html.DisplayNameFor(m => m.Steps[0].SomeProperty)</div>
<div class="field-value">#Html.DisplayFor(m => m.Steps[0].SomeProperty)</div>
</div>
and use the class names to style the layout (and the result would no doubt save a lot of screen space as well).
For the dropdownlist properties, you would need to add an additional property associated with the selected text, so in addition to public int SelectedValue { get; set; } used in the edit view, you would include an associated public string SelectedText { get; set; } property for the 'final step' view.
It also appears from your code that StepViewModel is an abstract base class and you have a concrete class for each 'step'. If that is the case, then it would be better for your WizardViewModel to contain properties for each step
public class WizardViewModel
{
public Step1Model Step1 { get; set; }
public Step2Model Step2 { get; set; }
....
}
which means if you really did want to generate form controls, it would not be be necessary to cast the type. The code would just be
#Html.DropDownListFor(m => m.Step1.SelectedValue, Model.Step1.SelectList, new { disabled = "disabled" })
I have this data from database with self relation
Parent_ID Name Child_ID
1 cities null
2 Egypt 1
3 Saudi 1
4 technology null
5 vb.net 4
6 c# 4
Now i want to build html navigation bar using this data
To be like the following
<ul>
<li>cities
<ul>
<li>Egypt</li>
<li>Saudi</li>
</ul>
</li>
<li>technology
<ul>
<li>vb.net</li>
<li>c#</li>
</ul>
</li>
</ul>
I don't know what is the best way to da that
My be xml node or my be using linqu ...
Whatever the best way help me please.
you can use asp:reapeater control provide datasource to it and give html format inside it. The easiest and the efficient way.
Explore it more....
Edited: You must mention
in mvc, you can pass data inside viewBag, viewdata whatever you like and on view you can use foreach iteration and inside it generate the required html
like
ViewDate["data whatever"] = your data
and on html
#foreach(var item in ....)
{
<a href='item.whatever Value'>
}
OK, here is one method of creating a n deep menu viewmodel
grab all the data from the table with one select and populate a list of menuItemMVs. create a menuMV object and put this list in the static AllMenuItems list. create a razor view for the root of the menu and bind it to menuMV. create a partial view for a menu item which binds to menuItemVM this should contain a for loop looping through the childern and recursively calling RenderParital itself (the partial view) for each child in the menuItemVM it is rendering.
get your root menu razor to loop over the rootMenuItems and renderpartial your menuitem partial view for each
public class menuVM
{
public static List<menuItemVM> AllMenuItems { get; set; }
public IEnumerable<menuItemVM> rootMenuitems
{
get { return menuVM.AllMenuItems.Where(c => c.ParentId == null); }
}
}
public class menuItemVM
{
public int Id { get; set; }
public string Name { get; set; }
public int ParentId { get;set; }
public IEnumerable<menuItemVM> Childern {
get
{
return menuVM.Childern.Where(c => c.ParentId == this.Id);
}
}
}
ps. I think you have childId and parentId the wrong way around in your
sample data
I am fairly new to MVC, but have quite a bit of experience in development in general, and am having an issue with MVC request life cycle it seems.
Will try to keep this simple, even tho the project is a bit complex in some areas.
I have a view bound to a view model that has a few complex list properties. These properties are displayed via checkboxes who's IDs are not directly related to any property in the model, but instead related to the IDs of the objects in the List<>. Because of this, the checked values do not automatically get applied to the model on POST.
To get around that, I added code in the Action method in the controller that parses the proper controls (in the Request.Form collection) and assigns the checked/selected value to the proper list items in the model.
This works perfectly up to a point.
Now, I also use Fluent Validation, and the problem is when performing custom validation rules when posting a new model to the server. The Validation routine is firing BEFORE the controller's action method, and thus before my processing of the list objects.
So, my question is, is there a way I can override the initial call to the model validation so I can just call the validation manually after my processing? I know I can do that which will fix the problem without overriding the initial call, but some of the validation takes a bit of time to process since it requires linq queries to a live database, so I do not want the validation to fire 2 times - that will quite literally double the time it takes to return no matter if the model is valid or not.
EDIT: Adding a example:
namespace Models
{
[Validator(typeof(MemberValidator))]
public class ViewMember
{
public int MemberID { get; set; }
public short RegionID { get; set; }
public List<PropTypeInfo> PropTypes { get; set; }
}
}
PropTypeInfo class:
public class PropTypeInfo
{
public byte ID { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public bool Selected { get; set; }
public PropTypeInfo(byte i, string n, string d, bool sel)
{
ID = i;
Name = n;
Description = d;
Selected = sel;
}
public static List<PropTypeInfo> GetAll(bool selected = false)
{
List<PropTypeInfo> output = new List<PropTypeInfo>();
OpenAccess.Context context = new OpenAccess.Context();
var list = (from f in context.Prop_Types orderby f.PropType select f).ToList();
foreach (OpenAccess.WebrentzServerPayments.Models.Prop_Type p in list)
output.Add(new PropTypeInfo(p.PropType, p.PropName, p.DisplayText, selected));
return output;
}
}
now here is the code in the view that renders the checkboxes for each item in the list:
<div class="Column Emp-PropTypes">
#foreach (WebrentzServerPayments.Models.PropTypeInfo ptype in Model.PropTypes)
{
<div style="float:right;width:20%;font-weight:bold;">
#Html.CheckBox("ptype_" + ptype.ID, ptype.Selected, new {Value=ptype.ID}) #Html.Raw(" ") #ptype.Name
</div>
}
</div>
And here is the code I use in the Controller Action method to pull that data back in to the List:
foreach (PropTypeInfo info in member.PropTypes)
info.Selected = form[string.Format("ptype_{0}", info.ID)].Contains(info.ID.ToString());
As a little background, a "PropType" is a type of property (house, condo, apartment) - there are about 2 dozen of them, and more can be added/removed at any time. The list in the class called "PropTypes" is first populated with the Name, Description and ID from a table in the database that lists all the available proptypes for that region.
We then will mark the proptypes as "selected" if the user has chosen that particular type. Those are saved to a table called Member.PropTypes (MemberID, ProptypeID).
So, at runtime the list will contain one record for each available proptype and the selected property will be set to yes if that user has selected it. That makes it easy to render the full list in the view...
Its actually quite a bit more complex as there are almost a dozen such lists, but each works the exact same way just with different data, as well as about 200 additional properties that are easier to manage. Only these lists are causing the issue.
Any help appreciated!
Dave