Telerik MVC 3 Grid 3 level master detail - asp.net-mvc-3

Here's my grid
Class year > Course > Student
Problem
1. How can I get the key from the first grid? (classyearID from classyear grid?)
The reason I need it because I have more than 5 class years, but only have 2 courses. so basically those two coursse will exist in every class year. and since I cant get the class yearID, students are reappearing on each class year, please help
check my view below:
#(Html.Telerik().Grid<ClassYear>().HtmlAttributes(new { style = "width: 100%" })
.Name("grdClassYear")
.DataBinding(binding => binding.Ajax()
.Select("GetClassYears", "Home"))
.DataKeys(keys => keys
.Add(o => o.ClassYearID)
.RouteKey("classyearID"))
.Columns(cols =>
{
cols.Bound(c => c.ClassYearDate);
cols.Bound(c => c.Name);
})
.DetailView(course => course.ClientTemplate(
Html.Telerik().Grid<Course>()
.Name("grdCourse_<#= ClassYearID #>")
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("GetCourses", "Home"))
.DataKeys(keys => keys.Add(o => o.CourseID))
.Columns(cols =>
{
cols.Bound(c => c.CourseName);
cols.Bound(c => c.Description);
})
.DetailView(stu => stu.ClientTemplate(
Html.Telerik().Grid<Student>()
.Name("grdStudent_<#= CourseID #>")
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("GetStudentsA", "Home", new { classyearID = "<#= ClassYearID #>", courseID = "<#= CourseID #>" })))
.DataKeys(keys => keys.Add(o => o.PersonID))
.Columns(cols =>
{
cols.Bound(c => c.PersonID).ReadOnly().Hidden();
cols.Bound(c => c.MidshipmenNumber);
cols.Bound(c => c.LastName);
cols.Bound(c => c.FirstName);
})
.Sortable()
.ToHtmlString()
))
Thanks

i am not sure, whether this has been resolved yet or not. but just wants to give answer on it, so it might help somebody.
make your detail grid name as example,
.Name("grdStudent_<#= ClassYearID #>_<#= CourseID #>")
basically, each Detail View name should be unique.

Related

WEB API Kedo Grid with Grouping

I am new at using Kendo .
I have searched all over but could not see any hint on using group on kendo grid , with server/client side grouping.
#(Html.Kendo().Grid<TemperatureRecord>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(temperatureRecord => temperatureRecord.RecordId).Width(100);
columns.Bound(temperatureRecord => temperatureRecord.MemberIdentity).Width(150);
columns.Bound(temperatureRecord => temperatureRecord.Location);
columns.Bound(temperatureRecord => temperatureRecord.TemperatureCelcius).Width(200);
columns.Bound(temperatureRecord => temperatureRecord.Remark).Width(300);
})
.Groupable(g => g.Enabled(false))
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
.DataSource(dataSource => dataSource
.WebApi()
.Batch(true) // Enable batch updates
.Group(groups => groups.Add(temperatureRecord => temperatureRecord.MemberIdentity))
.Model(model =>
{
model.Id(temperatureRecord => temperatureRecord.RecordId);
})
.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
.Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
)
)
The code which I have do not show any error on screen but it hangs.
Same thing happens when I manually group the grid on browser.. It hangs.
After a number of tries , I discovered that Model needs to be added on the field which you want to group.
Changed the code to following and it worked
#(Html.Kendo().Grid<IHiS.Noss.Web.Models.TemperatureRecord>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(temperatureRecord => temperatureRecord.RecordId).Width(100).Hidden(true);
columns.Bound(temperatureRecord => temperatureRecord.MemberIdentity).Width(150).Groupable(true).Hidden(true);
columns.Bound(temperatureRecord => temperatureRecord.Location).Width(100);
columns.Bound(temperatureRecord => temperatureRecord.TemperatureCelcius).Width(200);
columns.Bound(temperatureRecord => temperatureRecord.Remark).Width(300);
})
.Groupable(g => g.Enabled(false))
.ToolBar(toolbar =>
{
toolbar.Save(); // The "save" command saves the changed data items
})
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell)) // Use in-cell editing mode
.DataSource(dataSource => dataSource
.WebApi()
.ServerOperation(false)
.Batch(true) // Enable batch updates
.Group(groups => groups.Add(temperatureRecord => temperatureRecord.MemberIdentity))
.Model(model =>
{
model.Id(temperatureRecord => temperatureRecord.RecordId); // Specify the property which is the unique identifier of the model
model.Field(temperatureRecord => temperatureRecord.MemberIdentity);
})
.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })).Data("getdate"))
.Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TemperatureRecord" })))
)
)

DropDown In Kendo Grid

I need to add a dropdown in a Kendo Grid. I have tried to add by using EditorTemplate but something is not right in the code that's why it is not working for me.The dropdown have 3 values (Donate, Refund, Undo). Below is my kendo grid and i need to display dropdown on the first column. Please help.
#(Html.Kendo().Grid<GA.CustomerCare.Web.Synergy.Models.CustomerOrderARInfo>
(Model.CustomerOrderARInfoResult)
.Name("SearchResultsGridParent")
.Columns(columns =>
{
columns.Bound(e => e.ActionList).Width(100).EditorTemplateName("ActionDropdownEditor");
columns.Bound(e => e.TransNumber).Width(85);
columns.Bound(e => e.OriginalTransNumber).Width(85);
columns.Bound(e => e.DateEntered).Width(115);
columns.Bound(e => e.TransDate).Width(85);
columns.Bound(e => e.TransType).Width(130);
columns.Bound(e => e.Status).Width(100);
columns.Bound(e => e.Amount).Width(100);
columns.Bound(e => e.AmountApplied).Width(100);
columns.Bound(e => e.AvailableFunds).Width(85);
columns.Bound(e => e.AdjustmentReason).Width(85);
columns.Bound(e => e.CcCheckGiftCard).Width(155);
columns.Bound(e => e.PaypalTransID).Width(135);
columns.Bound(e => e.Area).Width(85);
columns.Bound(e => e.EnteredBy).Width(115);
columns.Bound(e => e.Reference).Width(155);
columns.Bound(e => e.DateCapture).Width(155);
columns.Bound(e => e.AmountCapture).Width(155);
})
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn)
)
.Resizable(resize => resize.Columns(true))
.ColumnResizeHandleWidth(10)
.Scrollable(scrolling => scrolling.Height(190))
//.ClientDetailTemplateId("template")
//.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetCustomerOrderAR", "Order", new { CustomerOrderID = Model.CustomerOrderID }))
)
)
Below is the property i am using in the Model :
[Display(Name = "ActionList")]
public string ActionList { get; set; }
Below is my ActionDropdownEditor :
#model string
#(Html.Kendo().DropDownList()
.Name("ActionList") //Important, must match the column's name
.Value(Model)
.SelectedIndex(0)
.BindTo(new string[] { "Donate", "Refund", "Undo" }))
I also tried using the kendo Grid with DropDown in the same way as you did and it worked.
Please check it with your code whether some references are missing.
column.Bound(p => p.ActionList).ClientTemplate("#= ActionList !=null ? ActionList : '' #").EditorTemplateName("_Sex").Title("ActionList");
I am giving my whole Dropdown in EditorTemplates Folder for you to check with your code:
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.Name("ActionList").HtmlAttributes(new { #style = "font-size:12px", #class = "PaxType" })
.BindTo(new string[] { "Donate", "Refund", "Undo" }))
You can place a DropDownList into a Kendo Grid by using html in a ClientTemplate. I achieved something similar using the following...
column.Bound(p => p.WFKeyType).Title("Type").ClientTemplate("<select class='form-control'><option value='' disabled='disabled' selected='selected'>Select Key Type</option><option value='String'>String</option><option value='Integer'>Integer</option><option value='DateTime'>DateTime</option><option value='Currency'>Currency</option><option value='Bool'>Bool</option></select>");
which produces a DropDownList in the Grid Column containing 'String', 'Integer', 'DateTime', 'Currency', & 'Bool' as options. The 'form-control' class is from Bootstrap and helps the column look more clean. Your project would need to add Bootstrap 3 before the class would be accessible.

How to Get Model Values in DataCellTemplate() of Kendo-PivotGrid-MVC

#(Html.Kendo().PivotGrid<Models.MyModel>()
.Name("pivotgrid")
.DataSource(dataSource => dataSource.Ajax()
.Transport(transport => transport.Read("ActionMethod", "Controller"))
.Schema(schema => schema.Cube(cube => cube.Dimensions(dimensions =>
{
dimensions.Add(model => model.FirstName).Caption("Learner");
dimensions.Add(model => model.CompetencyCode).Caption("Competency Codes");
dimensions.Add(model => model.OutComeRTOCode).Caption("OutCome RTO");
dimensions.Add(model => model.StudentId);
dimensions.Add(model => model.GroupId);
dimensions.Add(model => model.CompetencyId);
})
.Measures(measures => measures.Add("OutComeRTOCode Count").Field(model => model.OutComeRTOCode).AggregateName("Count").Field(a => a.StudentId).Field(a => a.GroupId).Field(a => a.EnrolmentId).ToString())
))
.Columns(columns => { columns.Add("CompetencyCode").Expand(true); })
.Rows(rows => rows.Add("FirstName").Expand(true))
.Rows(rows => rows.Add("StudentId"))
.Rows(rows => rows.Add("GroupId"))
.Rows(rows => rows.Add("CompetencyId"))
.Measures(measures => measures.Values("OutComeRTOCode Count")))
.DataCellTemplate("<a onclick='GroupEnrolment(StudentId)'>#:kendo.toString(dataItem.value)#</a>")
)
Here in the code ,i am trying to get the StudentId in DataCellTemplate('<'a onclick='GroupEnrolment(Want to Pass StudentId as Parameter here )'>'#:kendo.toString(dataItem.value)#'<'/a'>').
And trying to Pass StudentId in GroupEnrollment(StudentId) as argument, i don't know how to get StudentId from Model and pass it to function-GroupEnrollment in anchor tag.
Or is there any other way to create a link in cells of the Kendo Pivot Grid.
Any help will be appreciated.
Thanks in Advance .

How do I make a bootstrap 3 datepicker work in a kendo mvc in-cell batch edit grid

So I can make this work fine in newer browsers, but in IE9 when a date is clicked on the datepicker the cell turns back as unselected, empty and not dirty.
An example of my code is
MODEL
public string name { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}", NullDisplayText = "")]
[Display(Name = "Actual Start")]
public DateTime? ActualStartDate { get; set; }
public DateTime? ActualEndDate { get; set; }
GRID
Html.Kendo().Grid<MilestoneDto>()
.Name("editMilestoneList")
.Columns(columns =>
{
columns.Bound(m => m.Name).Title("Name");
columns.Bound(m => m.Status).EditorTemplateName("_milestoneStatus");
columns.Bound(m => m.PlannedStartDateStringValue);
columns.Bound(m => m.ProjectedStartDateStringValue);
columns.Bound(m => m.ActualStartDate).EditorTemplateName("GenericDatePicker");
columns.Bound(m => m.PlannedEndDateStringValue);
columns.Bound(m => m.ProjectedEndDateStringValue);
columns.Bound(m => m.ActualEndDateStringValue).EditorTemplateName("GenericDatePicker");
columns.Bound(m => m.CommentCount).ClientTemplate("#=CommentCount#</span>#}else{#<span class=\"fa fa-plus-circle\"></span>#}#").Title("Comments").Sortable(false).IncludeInMenu(false);
})
.HtmlAttributes(new { #class = "hidden results table-responsive" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("DataSource", "Milestone").Data("additionalParams"))
.Update(update => update.Action("BatchEdit", "Milestone"))
.Batch(true)
.Events(e => e.Sync("SyncGrid"))
.ServerOperation(false)
.Model(m => {
m.Id(mf => mf.Id);
m.Field(f => f.Name).Editable(false);
m.Field(f => f.Status).Editable(ViewBag.IsBaselined);
m.Field(f => f.PlannedStartDateStringValue).Editable(false);
m.Field(f => f.PlannedEndDateStringValue).Editable(false);
m.Field(f => f.CommentCount).Editable(false);
m.Field(f => f.ProjectedStartDateStringValue).Editable(false);
m.Field(f => f.ProjectedEndDateStringValue).Editable(false);
m.Field(f => f.ActualStartDate).Editable(ViewBag.IsBaselined);
m.Field(f => f.ActualEndDate).Editable(ViewBag.IsBaselined);
})
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ColumnMenu()
.Filterable()
.Sortable();
}
EDITOR TEMPLATE
#model DateTime?
#Html.TextBoxFor(model => model, new { #class="k-textbox bootStrapDatePicker form- control" })
<script type="text/javascript">
$('.bootStrapDatePicker').datepicker({ startDate: '0', format: "m/d/yyyy", autoclose: true });
</script>
You have two (better) options that will automatically set up the DateTimePicker for you:
1) In the grid columns/models, use your ActualStartDate properties. Then you can use the .Format() method on your columns to format it how you'd like.
2) I don't know what the exact syntax is, but when you're defining the Model in the Grid, I I believe there is a DataType() or similar method to set it as a date time.
It's been a while but it turns out the problems was the version of jquery was incorrect.

How to use different action in Command Column in Grid for Telerik MVC extension

I am using Telerik MVC extension version 2012.1.419.340. I had a problem with Command Column in Grid. I will use the example code on Telerik website to explain my problem.
I have view like:
#model IEnumerable<Order>
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.ShipAddress);
columns.Command(commands => commands
.Custom("viewDetails")
.Text("View Details")
.DataRouteValues(route => route.Add(o => o.OrderID).RouteKey("orderID"))
.Ajax(true)
.Action("ViewDetails", "Grid"))
.HtmlAttributes(new { style = "text-align: center" })
.Width(150);
})
.ClientEvents(events => events.OnComplete("onComplete"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("_CustomCommand", "Grid"))
.Pageable()
.Sortable()
.Filterable()
)
and my Order model like
public class Order{
public int OrderID {get;set;}
public string ShipAddress {get ; set; }
public bool CanEdit {get; set;}
}
I would like my Command Column to use different Action depending on CanEdit value. For example, if CanEdit is false, using action
columns.Command(commands => commands
.Custom("viewDetails")
.Text("View Details")
.DataRouteValues(route => route.Add(o => o.OrderID).RouteKey("orderID"))
.Ajax(true)
.Action("ViewDetails", "Grid"))
.HtmlAttributes(new { style = "text-align: center" })
if CanEdit is true, using action
columns.Command(commands => commands
.Custom("editDetails")
.Text("Edit Details")
.DataRouteValues(route => route.Add(o => o.OrderID).RouteKey("orderID"))
.Ajax(true)
.Action("EditDetails", "Grid"))
.HtmlAttributes(new { style = "text-align: center" })
Can you give me some idea how to implement it?
Thanks
Finally I solved this issue by using Template Column in the Grid. I found there is no way to change Text for command column on demand. Thanks

Resources