I have the following binding in my treeview:.BindTo(Model, mappings =>
{
mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding
.ItemDataBound((item, layer) =>
{
item.Template.InlineTempate =
@<text>
@Html.TextBoxFor(l => layer.Name)
</text>;
item.Text = layer.Name;
})
.Children(layer => layer.Children));
})
But the syntax on this is clearly not right. The l in the LINQ statement of the TextBoxFor points to the list. So I tried limiting it to the layer.Index but that didn't do the trick. How do I create a template that allows for a textboxfor for the Name property of the current item?
Thanks!
15 Answers, 1 is accepted
Rank 1
The actual error I am getting is: "error CS0136: A local variable named 'item' cannot be declared in this scope because it would give a different meaning to 'item', which is already used in a 'parent or current' scope to denote something else" Based on that I changed the code block to appear as below:
.BindTo(Model, mappings =>
{
mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding
.ItemDataBound((itm, layer) =>
{
itm.Template.InlineTempate =
@<text>
@Html.TextBoxFor(l => l[layer.Index].Name)
</text>;
})
.Children(layer => layer.Children));
})
However, now the For section of the mappings declaration is underlined in red with the following error: "Telerik.Web.Mvc.UI.TreeViewItem' does not contain a definition for 'For' and no extension method 'For' accepting a first argument of type 'Telerik.Web.Mvc.UI.TreeViewItem' could be found (are you missing a using directive or an assembly reference?)"
You can also see here how I tried to apply the index of the selected item to pull the property I am looking for. Bottom line, is this possible? If so, how do I do this?
Thank you!
Rank 1
@{Html.Telerik().Splitter()
.Name("Outline")
.Orientation(SplitterOrientation.Horizontal)
.Panes(hPanes =>
{
hPanes.Add()
.Collapsible(true)
.Size("30%")
.Content(Html.Telerik().TreeView()
.Name("Outline")
.BindTo(Model, mappings =>
{
mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding
.ItemDataBound((item, layer) =>
{
item.Value = layer.ID.ToString();
item.Content = () => { Html.RenderPartial("_Layer", layer); };
})
.Children(layer => layer.NonQuestionChildren));
})
.ToString()
);
hPanes.Add()
.Collapsible(true)
.Size("70%")
.Content(@<p>Questions go here</p>);
})
.Render();
}
It puts the right controls on the screen but not in the right order. I have attached an image of what the output looks like. The View for the RenderPartial is:
@model ACS.CSG.ReviewContentManager.Models.LayerViewModel
@Html.HiddenFor(x => x.ID)
@Html.CheckBoxFor(x => x.InDesignator) @Html.TextBoxFor(x => x.Designator) @Html.TextBoxFor(x => x.Name)
I could really, truly use some help on this.
To your questions:
- The item variable referred in the error message is the Raroz's item which comes into scope when using the Content method.
- In order for the compiler to pick the right overload of the BindTo method you should declare the type of the mappings parameter to be NavigationBindingFactory<TreeViewItem>.
- When nesting components you should use the Render method e.g:
.Content(()=>Html.Telerik().TreeView().Name("Outline").BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>{mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding.ItemDataBound((item, layer) =>{item.Value = layer.ID.ToString();item.Content = () => { Html.RenderPartial("_Layer", layer); };}).Children(layer => layer.NonQuestionChildren));}).Render());
Greetings,
Daniel
the Telerik team
Rank 1
However, I was already successful, sort of, using the RenderPartial command. It just puts the controls in the wrong place. Using exactly what you posted here the result is 100% the same as the image I attached to my third post. So, still not solving my problem. What do I need to do go ensure the controls appear actually IN the treeview and not on top of it and outside the scope of the panel even?
Thanks!
At least on my side, the TreeView is rendered correctly. I attached a screenshot of the page and the project used to generate it. Could you check it and see if I missed something?
All the best,
Daniel
the Telerik team
Rank 1
The Splitter code looks like this:
@{Html.Telerik().Splitter()
.Name("Outline")
.Orientation(SplitterOrientation.Horizontal)
.Panes(hPanes =>
{
hPanes.Add()
.Collapsible(true)
.Size("30%")
.Content(Html.Telerik().TreeView()
.Name("OutlineTree")
.DragAndDrop(true)
.ClientEvents(events => events.OnSelect("tv_OnSelect"))
.BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding
.ItemDataBound((item, layer) =>
{
item.Text = layer.Designator + " " + layer.Name;
item.Value = layer.ID.ToString();
if (layer.InDesignator)
{
item.ImageUrl = "~/Content/Common/Images/Icons/accept.png";
item.ImageHtmlAttributes.Add("style", "width: 16px; height: 16px;");
item.ImageHtmlAttributes.Add("alt", "Included in Designator");
}
else
{
item.ImageUrl = "~/Content/Common/Images/Icons/spacer.png";
item.ImageHtmlAttributes.Add("style", "width: 16px; height: 16px;");
item.ImageHtmlAttributes.Add("alt", "Not Included in Designator");
}
})
.Children(layer => layer.NonQuestionChildren));
})
.ToString()
);
hPanes.Add()
.Collapsible(true)
.Size("70%")
.Content(@<p>Questions go here</p>);
})
.Render();
}
Eva
The template is rendered on the top because you are using the ToString method instead of the Render method on the TreeView. This way the template gets written directly into the response and not as part of the node.
To set the template as the node's root you should set it to the Text property. You should also set the Encoded property to false when there are HTML elements in the Text.
.Content(Html.Telerik().TreeView() .Name("OutlineTree") .DragAndDrop(true) .ClientEvents(events => events.OnSelect("tv_OnSelect")) .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) => { mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding .ItemDataBound((item, layer) => { item.Text = Html.Partial("_Layer", layer).ToString(); item.Encoded = false; item.Value = layer.ID.ToString(); }) .Children(layer => layer.NonQuestionChildren)); }) .Render());Regards,
Daniel
the Telerik team
Rank 1
Thank you so much for you continued attention.
I am sorry. I missed a part in the code snippet. The Content should be declared as an Action e.g.
.Content( () => Html.Telerik().TreeView() .Name("OutlineTree") .DragAndDrop(true) .ClientEvents(events => events.OnSelect("tv_OnSelect")) .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) => { mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding .ItemDataBound((item, layer) => { item.Text = Html.Partial("_Layer", layer).ToString(); item.Encoded = false; item.Value = layer.ID.ToString(); }) .Children(layer => layer.NonQuestionChildren)); }) .Render());Kind regards,
Daniel
the Telerik team
Rank 1
1) Cannot convert lambda expression to type 'string' because it is not a delegate type
2) Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type
3) Delegate 'System.Func<object,object>' does not take 0 arguments
Rank 1
.Content(@<text> @Html.Partial("_LayerTree") </text> );
The treeview partial view looks like as follows. I have given up on the inline editing entirely and am doing this via a button, etc. now.
@{
Html.Telerik().TreeView()
.Name("OutlineTree")
.DragAndDrop(true)
.ClientEvents(events => events.OnSelect("tv_OnSelect"))
.BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<ACS.CSG.ReviewContentManager.Models.LayerViewModel>(binding => binding
.ItemDataBound((item, layer) =>
{
item.Text = Html.Partial("_LayerTreeItem", layer).ToString();
item.Value = layer.ID.ToString();
item.Encoded = false;
if (layer.InDesignator)
{
item.ImageUrl = "~/Content/Common/Images/Icons/accept.png";
item.ImageHtmlAttributes.Add("style", "width: 16px; height: 16px;");
item.ImageHtmlAttributes.Add("alt", "Included in Designator");
}
else
{
item.ImageUrl = "~/Content/Common/Images/Icons/spacer.png";
item.ImageHtmlAttributes.Add("style", "width: 16px; height: 16px;");
item.ImageHtmlAttributes.Add("alt", "Not Included in Designator");
}
})
.Children(layer => layer.NonQuestionChildren));
})
.Render();
}
Only, doing it this way, the item Value is not being set. I am sure I will be able to find a workaround for that as well, but it seems like the value feature should work using this method outlined above.
The Troubleshooting section of the documentation contains the known causes for the error you are getting. Loading the TreeView from a Partial View should also work.
I am not sure what may be preventing the value from being set. Could you send a sample project which reproduces the problem so I could check the exact setup?
Regards,
Daniel
the Telerik team
Rank 1
Thank you so much for all your help here as I would not have gotten to where I am now without it. Even though it is not the original way I was looking to do it, it was still a successful forum thread if you ask me!
So again, THANKS!!
Rank 1
The model item passed into the dictionary is of type 'System.Data.Objects.ObjectQuery`1[TreeViewDB.Sales_Org_Master]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[TreeViewDB.Models.SalesOrgTree]'.
Can you please help me out with this?
I am trying to bind treeview to a model .
My Model Class:
public class SalesOrgTree
{
public int OrgId { get; set; }
public string ParentId { get; set; }
public string Name { get; set; }
}
My Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Sales Org Tree";
return View(GetNodes());
}
public ActionResult About()
{
return View();
}
private IEnumerable<Sales_Org_Master> GetNodes()
{
MyCompR2Entities ENT = new MyCompR2Entities();
return ENT.Sales_Org_Master.Where(e => e.ParentId==null);
}
My View:
@model IEnumerable<TreeViewDB.Models.SalesOrgTree>
@{
ViewBag.Title = "Sales Org Tree";
}
@(Html.Telerik().TreeView()
.Name("TreeView")
.HtmlAttributes(new { style = "width: 300px; float: left; margin-bottom: 30px;" })
.ShowCheckBox(true)
.DragAndDrop(true)
.BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<TreeViewDB.Models.SalesOrgTree>(binding => binding
.ItemDataBound((item, sot) =>
{
item.Text=sot.Name.ToString();
})
.Children(child => child.Name));
})
)
Look forward for your reply.
Thank You.
J
As the exception message suggests, the returned type from the controller is not the same as the one declared in the view. You should either use projection to convert the collection to one with generic type SalesOrgTree or change the model definition in the view and in the TreeView binding configuration to use Sales_Org_Master.
Daniel
the Telerik team