DropDown List in Client Detail Template - Kendo grid - kendo-ui

I'm trying to add dropdownlist in client template, but somehow not able, could someone please help me on this?
columns.Bound(o => o.ImportFunctionText).ClientTemplate("# if (ImportFunction == 0) { # Account # } else if (ImportFunction == 1) { # Row # } #")
.EditorTemplateName("DropDownList")
.EditorViewData(new
{
Id = "ImportFunction",
Data = ViewBag.dropDownList,
FieldName = "value:ImportFunction"
})
.Width(210)
.Title("Function");
Thanks.

in order to make use of editor templates you have to store your editor template within the folder ~/Views/Shared/EditorTemplates/tmp_dropdown_attribute.cshtml as a partial view.
according to the telerik asp net mvc docs your should the template look like the following:
#(Html.Kendo().DropDownList()
.Name("Employee") // Name of the widget should be the same as the name of the property
.DataValueField("EmployeeID") // The value of the dropdown is taken from the EmployeeID property
.DataTextField("EmployeeName") // The text of the items is taken from the EmployeeName property
.BindTo((System.Collections.IEnumerable)ViewData["employees"]) // A list of all employees which is populated in the controller
)
and your controller should bind the viewdata container within the controller method which generates the view like that:
public ActionResult Index()
{
ViewData["employees"] = new NorthwindDataContext()
.Employees
.Select(e => new Employee
{
EmployeeID = e.EmployeeID,
EmployeeName = e.FirstName + " " + e.LastName
})
.OrderBy(e => e.EmployeeName);
return View();
}
for further reading please refer to the docs which can be found here:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/templating/editor-templates

Related

KendoUI for ASPMVC TreeView: display the Json response on behalf of the Tree

I am trying to display a tree of categories with remote data binding.
here is the Controller method:
public JsonResult KendoTree(Guid? id)
{
var categoriesBO = _categoryManager.GetAllCategory().
Where(c=> id==null ? c.ParentId==null : c.ParentId == id).
Select(c=> new
{
id = c.Id,
Name = c.Name,
hasChildren = c.CategoryChilds.Any()
});
return Json(categoriesBO, JsonRequestBehavior.AllowGet);
}
here is the cshtml file
#{
ViewBag.Title = "KendoTree";
}
<h2>KendoTree</h2>
#Html.Kendo().TreeView().Name("Categories").DataSource(dataSource => dataSource
.Read(read => read.Action("KendoTree", "CategoryManagement")
)).DataTextField("Name")
The browser display the Json result(an array) on behalf of the tree.
Am I missing something?
I got it: I have to have a Controller action that returns a view then call the kendo Html helper from inside the related view.

Restrict Kendo Grid to Current Route Id

I'm trying to include a Kendo UI ASP.NET MVC Grid on the Edit page of my MVC application and I would like to restrict that grid to only return values from the current route id. I've been researching ways to do this, but can't find anything that's exactly what I need, or I'm just too new at this to connect the dots.
My ideas so far are to either apply a filter to the DataSource or send a parameter to the controller and have it restrict the DataSourceResult.
For the DataSource filter in the view, I can do this:
.Filter(filters => { filters.Add(d => d.CompanyId).IsEqualTo(2); })
But I can't figure out how to replace the hardcoded 2 with the value from, say, #ViewContext.RouteData.Values["id"], or something.
Passing a parameter to the controller, I can get the following:
public ActionResult Divisions_Read([DataSourceRequest]DataSourceRequest request, int id)
{
using (var db = new AppContext())
{
IQueryable<Division> divisions = db.Divisions;
DataSourceResult result = divisions.ToDataSourceResult(request, division => new DivisionViewModel
{
DivisionId = division.DivisionId,
CompanyId = division.CompanyId,
CountryId = division.CountryId,
DivisionName = division.DivisionName
});
return Json(result);
}
}
But I have no idea how to use that id to basically add a "where CompanyId = Id" statement to the result.
Any ideas on what the best way to do this would be? Am I missing something really obvious?
Thanks!
ETA: Passing the parameter to the Controller through the Read action, as suggested by mmillican and other places in my research, and changing
DataSourceResult result = divisions.ToDataSourceResult(request, division => new DivisionViewModel
to
DataSourceResult result = divisions.Where(c => c.CompanyId == companyId).ToDataSourceResult(request, division => new DivisionViewModel
did the trick. That extra bit in the controller was what I was looking for, but couldn't seem to find anywhere.
Assuming you have a model for your page that looks like this:
public class MyViewModel
{
public int Id { get; set; } // assuming Id is what you want to filter by
// .. other VM properties
}
you can do something like this in your grid data binding
.DataSource(ds => ds
.Ajax()
.Model(mdl => mdl.Id(x => x.Id))
.Read("Divisions_Read", "Divisions", new { id = Model.Id })
)
in your controller, you would set the model's Id property to whatever ID that is in the route.

Bind the Kendo DropDownListFor

The kendo dropdownlistfor shows the accurate undefined number of record in dropdown, but it do not show the Item Name. Please help in this regards, Thanks
**Controller**
var cdd = db.Items.Select(x => new
{
x.ItemID,
x.ItemName
}).ToList();
var viewmodel= new Accounting.DAL.Item();
var selec = new SelectList(cdd, "ItemID", "ItemName");
viewmodel.ItemsDrop = selec;
return View(viewmodel);
**Model**
public SelectList ItemsDrop { get; set; }
**View**
#(Html.Kendo()
.DropDownListFor(m => m.ItemName)
.Name("ItemName")
.DataTextField("ItemName")
.DataValueField("ItemID")
.BindTo(Model.ItemsDrop)
)
You're passing a select list to the view so your dropdownlist should look like this:
#(Html.Kendo()
.DropDownListFor(m => m.ItemName)
.Name("ItemName")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.ItemsDrop)
)
If you're controller was just passing a Json result like this:
return Json(cdd.Select( p => new {ItemName = p.ItemName, ItemID = p.ItemID}), JsonRequestBehavior.AllowGet);
then how you had your dropdownlistfor() would be fine as is.

How to populate the retrieved values from DB in ListBox using asp.net mvc

Can anyone help me how to populate the retrieved values in ListBoxFor. I tried this but doesn't works.
Code in Model:-
public List<SelectListItem> SafetyRepresentataives { get; set; }
public List<string> BusinessUnitSiteSafetyRepresentative { get; set; }
Code in Controller:=
var site = entityDB.ClientBusinessUnitSites.FirstOrDefault(m => m.ClientBusinessUnitSiteId ==
siteId);
var siteRepresentatives = from representatives in entityDB.ClientBusinessUnitSiteRepresentatives
where representatives.ClientBUSiteID == siteId
select representatives;
local.SafetyRepresentataives = (from o in entityDB.SystemUsersOrganizations.ToList()
from c in entityDB.Contact.ToList()
where o.OrganizationId == clientId && c.UserId ==
o.UserId
select new SelectListItem
{
Text = c.FirstName + "," + c.LastName,
Value = c.UserId.ToString()
}).ToList();
foreach (var representative in siteRepresentatives)
{
local.BusinessUnitSiteSafetyRepresentative.Add(representative.SafetyRepresentative.ToString());
}
Code in View:-
#Html.ListBoxFor(x => Model.BusinessUnitSiteSafetyRepresentative, new
MultiSelectList(Model.SafetyRepresentataives,"Value","Text"))
I have retrieved the values from DB as shown above. But I am unable to link these retrieved values to ListBox so as to populate them. How to do this?? Help me out please!!!!!!!!!
I think this link should help you
http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/using-the-dropdownlist-helper-with-aspnet-mvc
In the sample they pass the combobox items in the viewbag.
I recomend you use a jquery plugin like autocomplete or typeahead from twitter bootstrap. So you can load asynchronously the elements.
Simply adding a default list helped me in resolving my issue. Here is the solution.
local.BusinessUnitSiteSafetyRepresentative = new List<string>();
foreach (var representative in siteRepresentatives)
{
local.BusinessUnitSiteSafetyRepresentative.Add(representative.SafetyRepresentative.ToString());
}

drop down list in mvc 3

Hey friends I am using drop down list in my mvc 3 project. Here the user choose one of the options and save it. And when he/she revisit the page than i have to make the initially saved value as selected value. Actually i am doing this with custom html helper as per need. But i am getting problem on it. I am doing this as:
else if (question_type == 7)
{
EAI.DAL.EaiEntities entities = new DAL.EaiEntities();
QuestionnaireRepository repository = new QuestionnaireRepository(entities);
SelectList typesList = repository.PopDdlList(qid);
output.Append(helper.Label(questiontext));
if (answer == "")
{
output.Append(helper.DropDownList("ddl" + question_id, typesList, "-- select type----));
}
else
{
output.Append(helper.DropDownList("ddl" + question_id, typesList, answer));
}
return helper.Raw(output.ToString());
}
Actually above code renders the selected value from database but it actually replacing the "-- select type ---" . So, After saving once if i visit the same page and save the page than i can get empty value in Formcollection.
So, please suggest the appropriate way of doing this
I usually add a few properties in my model:
int SelectedCategory { get; set; }
IEnumerable<SelectListItem> Categories { get; private set; }
and then load the data in my model constructor:
ProductService productService = new ProductService();
this.Categories =
productService.GetCategories()
.Select(c => new SelectListItem() { Text = c.Name, Id = c.Id.ToString() });
this.Categories.InsertAt(0, new SelectListItem() { Text = "--- Please Select ---", value = "" });
then in my Razor markup do something like:
#Html.DropDownListFor(m => m.SelectedCategory, Model.Categories)
This should auto wire up in the standard MVC way. Hope this helps.

Resources