Column with menu in each cell with menu items - razor

I want to create a menu item in each cell using Kendo Grid MVC I have managed to get the grid to display with the menu item in each cell but when I click on the menu I don't see the menu items.
Need the menu items to show in their own column this is why I have not bound it to a specific property.
Any ideas on what I'm doing wrong?
#(Html.Kendo().Grid(Model)
.Name("gridDropDownMenu")
.Columns(columns =>
{
columns.Template(#<text></text>).Title("").Width(120).HtmlAttributes(new { #class = "templateCell" }).ClientTemplate(
Html.Kendo().Menu()
.Name("menu_#=ProductID#")
.Items(its =>
{
its.Add().Text("Actions").Items(nested =>
{
nested.Add().Text("Test 1");
nested.Add().Text("Test 2");
});
})
.ToClientTemplate().ToHtmlString()
);
columns.Bound(p => p.ProductName);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
//model.Field(p => p.ProductID).Editable(true);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)

Resolved by adding the following: .Events(ev => ev.DataBound("initMenus"))
function initMenus(e) {
$(".templateCell").each(function(){
eval($(this).children("script").last().html());
});
}

Related

Kendo MVC Grid - Tab navigation in non editable cells

I am new to kendo mvc grid. I working on an mvc page where I am showing a n kendo grid in which none of the cells are editable.
The requirement is to navigate between the cells while pressing the tab. can someone help me here?
#(Html.Kendo().Grid<History>()
.Name("grid")
.HtmlAttributes(new { style = " max-width: 950px ; width: auto " })
.Columns(columns =>
{
columns.Bound(p => p.JobName).Title("Job Name").Width(150);
columns.Bound(p => p.FileName).Title("File Name");
columns.Bound(p => p.ExecutionOn).Title("Execution Date").Format("{0:MM/dd/yyyy}").Width(100);
columns.Bound(p => p.ExecutionOn).Title("Execution Time").Format("{0:h:mm:ss tt}").Width(100);
columns.Bound(p => p.ExecutionStatus).Title("Execution Status").Width(110);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 20, 50, 100})
)
.Sortable()
.Filterable()
.Resizable(r => r.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "History"))
)
)

Newly added row gets disappear in kendo grid

I have a kendo grid and a AddRow button.On AddRow Button click I am adding a new row to kendo grid.When I click on AddRow button, new row gets added sucessfully but clicking anywhere else in the page except first column of newly added row,row disappears.Here is my code on button click:
$('#AddRow').click(function () {
grid = $('#grdclaimantTypeTips').data("kendoGrid");
grid.addRow();
row = grid.tbody.find(".k-grid-edit-row");
grid.select(row);
}
Here is my code for kendo grid:
#(Html.Kendo().Grid<ClaimPro.Data.ClientAttributeDO>()
.Name("grdclaimantTypeTips")
.Columns(columns =>
{
columns.Bound(Type => Type.claim_type_name).Title(Resource.ClaimType).Width(80).EditorTemplateName("ClientAttributesDDL").EditorViewData(new { columnName = "claim_type_cd" });
columns.Bound(Type => Type.claimant_name).Title(Resource.Claimant).Width(120).ClientTemplate("#=claimant_name_changed#");
columns.Bound(Type => Type.tip).Title(Resource.Tip).Width(200).HtmlAttributes(new { #class = "Wrap" });
columns.Bound(Type => Type.tip).Hidden();
columns.Bound(Type => Type.tip).Hidden();
columns.Bound(Type => Type.id).Hidden();
})
.Scrollable()
.Sortable()
.Filterable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Single);
selectable.Type(GridSelectionType.Row);
}
)
.Pageable(pageable => pageable.Input(true).PageSizes((int[])ViewData["DefaultDropdownSize"]))
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Edit("onEditGrid"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(true)
.Model(model => model.Id(c => c.id))
.Model(model => model.Field(p => p.claimant_name).Editable(false))
.Read(read => read.Action("GetClaimantTypeDetails", "ClientAttribute"))
)
)

Kendo Grid simple ajax binding and sorting

The error that i have received when tried to sort the Kendo grid by clicking on the Customer ID column is: {"Invalid property or field - 'CustomerID' for type: OMS_CUSTOMER"}. What else is needed to bind the columns of grid, model view and model. Thanks
controller _read function:
IQueryable<OMS_CUSTOMER> CustomerList = this.dbContext.OMS_CUSTOMERs;
DataSourceResult result = CustomerList.ToDataSourceResult(request
, ModelState
, c => new CustomerViewModel
{
CustomerID = c.OMS_CUSTOMER_ID,
CustomerName = c.CUSTOMERNAME
});
return Json(result);
View:
#model IEnumerable<NCBA.ViewModels.CustomerViewModel>
#(Html.Kendo().Grid<NCBA.ViewModels.CustomerViewModel>()
.Name("grid-CustomerViewModel")
.DataSource(dataSource => dataSource
.Ajax()
.Model(
model =>
{
model.Id(cust => cust.CustomerID);
}
)
.Create(create => create.Action("_Create", "Customer"))
.Read(read => read.Action("_Read", "Customer"))
.Update(update => update.Action("_Update", "Customer"))
.Destroy(destroy => destroy.Action("_Delete", "Customer"))
)
.Columns(columns =>
{
columns.Bound(c => c.CustomerID);
columns.Bound(c => c.CustomerName);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("Commands").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
)

Multiple Kendo UI Grid with dropdown editor templates edit issues in ASP.NET MVC razor page

I have two Kendo UI grids with drop down editor template columns in an ASP.NET MVC razor page.Both grids are having one row always and working fine with edit and update.
But when the user clicks one first grid edit and trying to click the second grid edit then the editor templates are not working for the second grid. it is showing the grid values within a textbox. Both grids are sharing same editor templates for the columns. No errors in the browser console.
I tried moving these grids in partial views and try to create different editor templates for each grid but always the result is the same.
The funny thing is that if you edit in the second grid first and then click the first grid edit it doesn't create any problem and shows all the dropdown values with editor templates. (first and second grid means from top to bottom)
both grids have different models but share the same class for the model.
I am giving the sample code here ..please help me ..already spent lot of time on this.
#model ProjectName.ViewModel.EmployeesViewModel
#(Html.Kendo().Grid(Model.CasualEmployees)
.Name("GridCasualEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().Grid(Model.PermanentEmployees)
.Name("GridPermanentEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
public class EmployeesViewModel
{
public List<Employee> CasualEmployees{ get; set; }
public List<Employee> PermanentEmployees{ get; set; }
}
Thanks in advance,

Kendo Grid Custom Filter Dropbox

I am trying to use the custom filtering features of the Kendo Grid. Using Telerik's documentation, I attempted to code the grid per the script below. Notice the "filterable" property on the "Image Type" column. When I pass in a simple boolean true or false, it works. When I use the documentation provided on Telerik's site and pass in a delegate value, it breaks. We're on Kendo version v2013.3.1324. Is this a known issue? Was this area improved after this release?
#(Html.Kendo().Grid<OKN02.Models.ImagingEvent>()
.Name("grid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Columns(columns =>
{
columns.Bound(p => p.ImagingEventId).Hidden();
columns.Bound(p => p.PatientName).Title("Patient Name").Width(90);
columns.Bound(p => p.PatientDOB).Title("DOB").Width(40);
columns.Bound(p => p.Prescriber).Title("Prescriber").Width(80);
columns.Bound(p => p.Site).Title("Site").Width(60);
columns.Bound(p => p.ConfirmationsComplete).Title("Confirmations Complete").Width(90);
columns.Bound(p => p.ImagingDate).Title("Imaging Date").Format("{0:yyyy/MM/dd hh:mm tt}").Width(80);
columns.Bound(p => p.ImageType)
//.Title("Image Type")
.Filterable(filterable => filterable.UI("ImageTypeFilter"))
//.Filterable(true)
.Width(40);
columns.Bound(p => p.OverallStatus).Title("Overall Status").ClientTemplate("#= buildStatusTemplate(OverallStatus) #").Width(40);
})
.Filterable(filterable => filterable
.Extra(true)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
.Events(events =>
{
events.Change("GridChange");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ImagingEventId);
model.Field(p => p.PatientName);
model.Field(p => p.PatientDOB);
model.Field(p => p.Prescriber);
model.Field(p => p.Site);
model.Field(p => p.ImagingDate);
model.Field(p => p.ImagingType);
})
.PageSize(15)
.Read(read => read.Action("MDPortalFiles_Read", "MDPortal").Type(HttpVerbs.Post))
))