Hi I am Using Telerik MVC Grid Control in my MVC 3.0 Project
I am trying to add Additional Column to the Grid
columns.Template(e =>
#Html.ActionLink("Edit", "Action", "Controller",
new { id = e.ID}, new { #class = "standard button" })
);
This code is Creating an Additional Column But not displaying the Edit link in that column.
Can Any one Help me with this. How can make this work?
If you come from a WebForms (ASPX) ViewEngine world it can be a little confusing when working with column templates as traditionally you used to have to do columns.Template(e => .... );. However, with Razor we can now approach this a little differently. First of all, the usage of # is embraced, so you don't need to use "e => ". Also, instead of having "e" we now can use the #item object which represents the entity tied to our Grid. So, this leaves us with the following snippet of code (which will produce the end-result you're looking for):
columns.Template(
#<text>
#(Html.ActionLink("Edit", "Action", "Controller", new { id = #item.ID }, new { #class = "standard button" }))
</text>
);
Related
I am new to ASP.NET MVC. I am facing one or other issues to design the layout for below scenario. Could you someone help me with a solution and I will definitely appreciate your help.
The requirement is:
This is an existing application. While loading view there is a Master View and inside few partial views already defined.
In one of the Partial view, I need to have a same layout multiple times on demand. It is depends on the user how many required. may be 1 or 2 or more. We are using Telerik Kendo controls extensively in our UI and in existing View we strongly typed Model object with View.
I would like to go with Kendo Tabstrips control and add Tab dynamically when required by the user. Also, the layout is exactly same, So, would like to design (Html table with many controls like textbox, dropdown etc.) each tab layout as Partial View so that I can reuse the design. Please let me know whether this approach is best or any better approach is available.
I need to get the entire data when the user Submit the master view . Each main partial View contains and the parent of the Tabstrips Partial view also contains a but not defined for each tabstrip partial view as I need data as collection of objects in one of the property in Parent Partial View Model Object.
Can you please let me know how to design model object for each tabs(Partial View) as well as Parent Partial View. it could be good, if you could show a small example code.
The below are the issues faced during designing this
Unable to add inside another as getting below error
Inline markup blocks (#Content) cannot be nested. Only one level of inline markup is allowed.
#(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(#<text>
<form id="frm_#(panelName)" onsubmit="DisableEvent(event)">
<div style="width:100%; height:auto;">
<button class="k-button">Add new PCG</button>
#(Html.Kendo().TabStrip()
.Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
.Items(items =>
{
items.Add()
.Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
.Encoded(false)
.Selected(true)
.HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
//.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
.Content(#<text>#(Html.Partial("_PCGTab"))</text>);
})
)
</div>
</form>
</text>)))
2.Then Changed the design as shown below. defined partial view in Parent View
#helper RenderPCGTab()
{
<div style="width:100%; height:auto;">
<button class="k-button">Add new PCG</button>
#(Html.Kendo().TabStrip()
.Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
.Items(items =>
{
items.Add()
.Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
.Encoded(false)
.Selected(true)
.HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
//.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
.Content(#<text>#(Html.Partial("_PCGTab"))</text>);
})
)
</div>
}
and designed Kendo panel as shown below the Parent Partial View
#(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(#<text>
<form id="frm_#(panelName)" onsubmit="DisableEvent(event)">
#RenderPCGTab()
</form>
</text>)))
Since you use a strongly typed View, I would recommend using a Tuple as the model.
The Item1 would hold the required model details, while Item2 would hold the required number of tabs (it holds the names of the tabs).
#model Tuple<[Model],List<string>>
Now create a Kendo Tabstrip control, with dynamic items (based on model's Item2)
#(Html.Kendo().TabStrip()
.Name("KendoTabStrip") //You need to dynamically change the name by appending a unique parameter in case you need multiple Tabstrips
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
var TabItemIndex = 0;
foreach (var TabItem in Model.Item2)
{
tabstrip.Add().Text(TabItem)
.Selected(false)
.HtmlAttributes(new { id = "TabStripButton" + TabItem + "_" + TabItemIndex, title = TabItem}) //Generate a dynamic ID for each Tab
.Content(" ");
TabItemIndex++;
}
})
)
Once you have created the structure of the Tabstrip, you need to populate each tab with its corresponding content
In the View (Parent Partial View) itself, create a Ready function for the tabstrip and serialize the object using JSON
$(("KendoTabStrip")).ready(function () {
_TBSModelName = #Html.Raw(JsonConvert.SerializeObject(this.Model.Item1))
TabStripUserControl();
});
Note: This is in case you need the Model Data in your child partial view.
Create a javascript file and place the function TabStripUserControl() in it. This function will create your content and place it into the tab.
function TabStripUserControl()
{
var _LocalTBSModel = _TBSModelName
var items = "#KendoTabStrip" + " .k-tabstrip-items";
$(items).click(function (z) {
}
);
}
Inside the function (click function), create a div and provide a dynamic ID for the same before placing it inside the tab using Javascript/JQuery.
var div = $("<div/>");
Use Ajax call to call your controller, which in turn will call your Child Partial View (which contains HTML controls) and render the partial view inside the above created div on Ajax call's success.
$.ajax({
url: 'Controller/ActionMethod',
data: JSON.stringify({ Value: "SomeValue" }),
type: 'POST',
contentType: 'application/json;',
async: false,
success: function (data) {
div = data;
}
});
Hope this helps.
I've been looking for the solution and I haven't find a way to get my head around it. So I hope you could give me some clues to achieve that.
Basically I need to change a value of a _Layout from its rendered PartialView. I use to do this using webforms .aspx master pages and FindControl method but I cannot find a solution to do this in MVC Razor engine.
My Layout page has an ActionLink and a div tag place-holder to display the partial-views, Now I need to know how to change the value of Text1 from the partial-view pages within the DIV tag:
Is JavaScript the only way that I can do this ?
<input id="Text1" type="text" />
<div>
#Ajax.ActionLink("Personal Info", "Personal", "Portal", new { area = "Resume" },
new AjaxOptions { UpdateTargetId = "result", HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
OnBegin = "blockUi",
OnSuccess = "onTabChanged(this, 'Personal Information')"
},
new { #class = "text-strong" })
</div>
<div id="result">#RenderBody()</div>
Appreciate your contributions in advance.
Javascript is the way this is handled I think.
You might be able to do some trickery with controllers and the ViewBag (like how the page title is set with the ViewBag in a default MVC project).
You could also maybe set it to some global variable or something, and have your partial view change that variable.
Both those solutions though would require a page reload.
But using javascript is probably the best, you could do it in the onTabChanged function.
<script>
function onTabChanged(param1, param2) {
var el = document.getElementById("Text1");
el.value = "Whatever you want here";
}
</script>
I think the easiest way is using a ViewBag that you play around with in your controller/view/partial view.
In WebForms you can use the FindControl method because a PostBack was made. So the entire page was rendered again.
In the example you posted, I assumed that the request made by Ajax.ActionLink that update the div result, returns a view that may use the same Layout, but is in another context so you don't have access to the same input text from the rendered page where Ajax.Action link was triggered.
So, if you have multiples Ajax.ActionLink that updates the <div id="result">, you need to handle the success method on onTabChanged, like #Kyle Gobel suggested.
I have an asp.net MVC application where I am using telerik grid to show the data/records.I am using the Entity Model.
My requirement is that sometime I want to show only some of the columns specified at the runtime/may the user select. How do I bind View with only those columns as selected by the user . Initially view is binded with Model class with all columns .
Is there any other way other than telerik to show the customized columns as selected by the user then it will be also OK .
Thanks In Advance
In below link, there is some solution, but can someone explain the solution how to populate model?
<%= Html.Telerik() .Grid(Model.Customers) .Name("Grid") .Columns(columns => { if (Model.IsShowFirstName) { columns.Bound(customer => customer.FirstName); } if (Model.IsShowLastName) { columns.Bound(customer => customer.LastName); } })%>
show dynamically selected columns in asp.net mvc grid at runtime
Something like this should work.
public ActionResult Index()
{
ViewData["Customers"] = db.cust_table.Where(w => w.cust_id == 1234);
ViewData["IsShowFirstName"] = true;
ViewData["IsShowLastName"] = false;
return View();
}
OK so I have 2 pages where this kind of behaviour is implemented. It works on one but doesn't work in another and I have no idea why. Despite the data containing a list of selectitems and one of them is selected the dropdown list is not displaying this selection (ie. it resets to the blank item).
I don't know how to further debug this.
In my page:
<%= Html.DropDownList("CampusId", ViewData.Model.Campuses, new { #class = "large search_box" })%>
In my controller.
Campuses = AdminRepository
.ListAll<Campus>(a => a.Description)
.ToSelectListItem<Campus>(a => a.CampusId, a => a.Description, criteria.CampusId, true);
I can see that campuses does have the correct list item marked as selected - so why when it is displayed on the page is it no longer marked as selected?! I can't see anything else obviously modifying the list.
Thanks :)
OK so in trying different google search terms I came across this:
ASP.NET MVC Html.DropDownList SelectedValue
The issue was my drop down list had the same name as in the model. So I changed my html to be
<%= Html.DropDownList("CampusIdDD", ViewData.Model.Campuses, new { #class = "large search_box" })%>
So problem solved!!! Hopefully we'll be able to upgrade from MVC 1 !!
Model.Campuses
Model.CampusId
<%= Html.Hidden("CampusId") %>
<%= Html.DropDownList("CampusId", ViewData.Model.Campuses, new { #class = "large search_box" })%>
I have an aspx page which allows me to edit articles. Among things I can edit is which category the article belongs to. The category is chosen through a DropDownList as shown here,
<%= Html.DropDownList("categoryID", (IEnumerable<SelectListItem>)ViewData["CategoryID"], new { #class = "textbox" }) %>
However, the articles category isn't selected when I go to that page. The ViewData I use for the DropDownList looks like this,
ViewData["CategoryID"] = new SelectList(categories, "CategoryID", "Title", article.CategoryID);
Which should select the article.CategoryID as it's selected value.
Have I done this wrong?
You're assigning the ViewData property a SelectList, but casting it to IEnumerable<SelectListItem> - try typing directly to SelectList instead:
<%= Html.DropDownList("categoryId", (SelectList)ViewData["CategoryID"], new { #class = "textbox" }) %>
The best I could suggest is that you ensure your "Category" class has a property called "CategoryID" and is not just "ID". From what you've given us that's the best guess I can make as to the problem.
If it is just "ID", then your function will need to go:
ViewData["CategoryID"] = new SelectList(categories, "ID", "Title", article.CategoryID);