Kendo Grid simple ajax binding and sorting - kendo-grid

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()
)

Related

Set initial filter on a boolean field column on load

Telerik Kendo MVC Grid - How do I set onload/initial filter equals True with checkbox columns?
I am trying to set a True/False column filter to True on initial load. My Viewmodel has a bool property called IsHoliday. I have followed the example in the link above but i don't have any records showing in the grid at startup. My read action returns a JSON of IEnumerable as suggested in the referenced link. My View is as follows:
#(Html.Kendo().Grid<HolidayVM>()
.Name("h_grid")
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.ServerOperation(false)
.Events(events => events.Error("grid_error")) // Handle the "error" event
.Model(model =>
{
model.Id(m => m.Date);
model.Field(m => m.Date).Editable(false);
})
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))
.Read(read => read.Action("Holiday_Read", "Holiday"))
.Update(up => up.Action("Holiday_Update", "Holiday").Data("grid_sendAntiForgery"))
)
.Columns(columns =>
{
columns.Bound(p => p.Date).Width(30).Format("{0:dd-MMMM}");
columns.Bound(p => p.HolidayText).Width(100).Filterable(false);
columns.Bound(p => p.IsHoliday)
.ClientTemplate("<input type='checkbox' #= IsHoliday ? '' : checked='checked' # disabled='disabled' />")
.Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
.Width(30);
columns.Command(cmd =>
{
cmd.Edit().HtmlAttributes(new { title = "Edit" });
}).Title("Commands").Width(25);
})
.Pageable()
.Sortable()
)
Ideally I will like my grid to look like in attached image, on load, with IsHoliday set to True
I finally figured it out.
.Filter(f => f.Add(m => m.IsHoliday).IsEqualTo(true))
instead of
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))
use this easily:
columns.Bound(p => p.ISProperty).ClientTemplate("#= ISProperty? 'Yes' : 'No' #")

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"))
)
)

Column with menu in each cell with menu items

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());
});
}

Kendo Grid Read Action Not Passing Data To Controller Via the .Data Method Call

I have a Kendo Grid (MVC Razor) that I am trying to have pass extra data to the controller via the .Data call off of the Read method:
#(Html.Kendo().Grid<AssignedSiteGridPoco>()
.Name("UnAssignedSiteGrid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Columns(columns =>
{
columns.Bound(p => p.SiteId).Hidden();
columns.Bound(p => p.SiteName).Title("Site Name").Width(180);
columns.Bound(p => p.City).Title("City").Width(80);
columns.Bound(p => p.StateName).Title("State Name").Width(100);
columns.Command(command => command
.Custom("Add")
.Click("unassignedSiteGridClick")
).Width(90);
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Events(events =>
{
//events.Change("GridChange");
//events.DataBound("OnDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SiteId);
model.Field(p => p.SiteName);
model.Field(p => p.City).Editable(false);
model.Field(p => p.StateName).Editable(false);
})
.PageSize(15)
.Read(read => read.Action("GetUnassignedSiteGridDataList", "Manager").Data("getUserRightName"))
))
The Javascript block, placed above the grid div, is as follows:
function getUserRightName() {
return
{
UserRightName : "2"
};
}
And the controller:
public JsonResult GetUnassignedSiteGridDataList([DataSourceRequest]DataSourceRequest request, string UserRightName)
{
var model = new AssignedSiteGridPoco();
var siteList = _managerPresentationService.GetUnassignedSiteGridDataList(model);
return Json(siteList.ToDataSourceResult(request));
}
The string value being passed from the view's read method is null in the "UserRightName" string. According to the examples, it should pass back the text value "2" My Version of Kendo is: 2014.2.807 InternalBuild. Is there a problem in this build in this area?
Thanks,
Steven
Wrap the key name in the json structure into quotes i.e.
change your js function to this:
function getUserRightName() {
return {'UserRightName':"2"};
}

Kendo, Razor braces problems

I checked braces, brackets 100 times...I think they are correctly placed but I get
"Keyword, identifier, or string expected after verbatim specifier: #"
<script id="customercontactsTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStripCustomer")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Contacts").Content(obj =>
#(Html.Kendo().Grid<ModelApp.Models.CustomerContacts>()
.Name("customercontacts")
.Columns(columns =>
{
columns.Bound(l => l.CustomerContactID);
columns.Bound(l => l.CustomerID);
columns.Bound(l => l.CustomerContactName);
columns.Bound(l => l.CustomerContactPhone);
columns.Bound(l => l.CustomerContactDuty);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model
(model=>{
model.Id(l => l.CustomerContactID);
model.Field(l=>l.CustomerContactID).Editable(false);
model.Field(l => l.CustomerID);
model.Field(l => l.CustomerContactName);
model.Field(l => l.CustomerContactPhone);
model.Field(l => l.CustomerContactDuty);
}
)
.Read(read => read.Action("CustomersContactsRead", "Customers", new { customerID = "#=CustomerID#" }))
.Update(update => update.Action("CustomersContactsEdit", "Customers"))
.Create(update => update.Action("CustomersContactsCreate", "Customers", new { customerID = "#=CustomerID#" }))
)
.Events(e => e.Edit("onEdit"))
.Pageable()
.Sortable()
.Editable(editing => editing.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.ToClientTemplate())
);}))
Is there a braces code checker? Can you spot any error?
Thanx in advance!
The problem is this line
Content(obj => #(Html.Kendo().Grid<ModelApp.Models.CustomerContacts>()
In razor you should use template delegates:
Content(#<text>
#(Html.Kendo().Grid<ModelApp.Models.CustomerContacts>()