This is probably an easy answer but even after searching through documentation i haven't figured it out yet. I have a column in a Kendo Grid that i would like to convert from an integer to a string for filtering purposes. Basically on my ID column, if the user types in 3 it will filter the records for 3, 13, 23 33, ect. Right now what it does in the filter after i type in 3 and hit enter, it converts it to 33.00 Below is the Grid
#(Html.Kendo().Grid<RequestViewModel>
()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden(true);
columns.Bound(c => c.ID).Title("Ticket No.")
.ClientTemplate(#Html.ActionLink("#=ID#", "View", new { ID = "#=ID#" }).ToHtmlString())
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
// Something here like .ToString()
columns.Bound(c => c.CreatedDate).Title("Submitted On").ClientTemplate("#= kendo.toString(kendo.parseDate(CreatedDate), 'MM/dd/yyyy HH.mm.ss') #").Filterable(ftb => ftb.Cell(cell => cell.Template("DateTimeFilter")));
columns.Bound(c => c.DepartmentName).Title("Department Requested To").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.Technician).Title("Technician Assigned").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.PageSize(10)
.Model(model => model.Id(x => x.ID))
.Read(read => read.Action("Action", "DataSource"))
)
Related
Add the class of a kendo ui cell /Or/ Allow numbers only in one column
#(Html.Kendo().Grid(Model.GroupOfAllowancesKendoGrid)
.Name("gridAllowance")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.Model(model => model.Field(field => field.EmployeeName).Editable(false))
.Model(model => model.Field(field => field.Department).Editable(false))
.Model(model => model.Field(field => field.Section).Editable(false))
.Model(model => model.Field(field => field.AllowanceValue).Editable(true))
.Batch(true)
.Read(read => read.Action("GroupAllowances_Read", "Allowanes").Data("additionalInfo"))
)
.Columns(columns =>
{
columns.Bound(p => p.EmployeeId).Hidden().Visible(false);
columns.Bound(c => c.EmployeeName).Width(50);
columns.Bound(c => c.Department).Width(40);
columns.Bound(c => c.Section).Width(40);
columns.Bound(c => c.DepartmentId).Hidden().Visible(false);
columns.Bound(c => c.SectionId).Hidden().Visible(false);
columns.Bound(p => p.AllowanceValue).Width(50);
})
.Scrollable(x => x.Enabled(true))
.Sortable(x => x.Enabled(true))
.Filterable(x => x.Enabled(true).Mode(GridFilterMode.Menu))
.Events(e => e.DataBound("onRowBound"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
how can I allow numbers (numeric/double) in AllowanceValue column
I am using a Kendo MVC Grid and i want to have a dropdownlist in one of the cells.
here is my code:
#(Html.Kendo().Grid<RMS.Admin.ViewModel>()
.Name("ResourceGrid")
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).ClientTemplate("#=ResourceType#");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:800px" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(s => s.ResourceId);
model.Field(p => p.ResourceType).DefaultValue(ViewData["defResourceType"] as RMS.Admin.ViewModel.ResourceTypeId);
})
.Create(update => update.Action("CreateResource", "Home", new { resourceTypeId = "#=ResourceType.Id#" }))
.Read(read => read.Action("ReadResource", "Home"))
.Update(update => update.Action("UpdateResource", "Home"))
.Destroy(destroy => destroy.Action("RemoveResource", "Home"))
)
.Events(events => events.DataBound("dataBound"))
)
The problem is that i don't know what clienttemplate is so i don't know what to do with it.
If bound resourcetype with a clienttemplate i can't add new records to the grid, i get the error: Uncaught ReferenceError: ResourceType is not defined
If i remove clienttemplate i can add a record but when i try to save it it says it can't find the id of ResourceType.
basically if you want to use a dropdownlist within a kendo ui grid you have to define an editor template which includes a kendo dropdownlist widget. this means you have to declare the respective cell with the attribute .EditorTemplateName() like this:
.Columns(columns =>
{
columns.Bound(c => c.ResourceName);
columns.Bound(c => c.Descritption);
columns.Bound(c => c.ResourceType).EditorTemplateName("TemplateName");
columns.Bound(c => c.Approved);
columns.Bound(c => c.IsEnabled);
columns.Bound(c => c.Data).Width(220);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(172).Title("Edit/Delete");
})
the editortemplate has to be stored within folder: Shared/EditorTemplates/TemplateName.cshtml
TemplateName.cshtml should look like this:
#model ModelName
#(Html.Kendo().DropDownList()
.OptionLabel("please select a value")
.Name("ResourceType") <-- the name needs to be equal to the grid cell name
.DataSource(source=>
{
source.Read( read =>
{
read.Action("ActionName", "ControllerName");
})
.ServerFiltering(true);
})
.DataTextField("Name") <-- displays the text of the object
.DataValueField("ID") <-- stores the id of the object
)
hope this will lead you into the right direction.
cheers,
I have been working with the Kendo UI for ASP.NET MVC suite and can't figure out how to do something that I feel is very simple.
I have a basic grid that loads customer information: Name, Phone, Fax, Website, etc.
I want the far right column to be an edit button that simply calls the Details Action Result passing it the id of the current row that it is clicked from.
I really didn't want to have to resort to asking this on here, but all of the examples deal with inline editing and popup editing.
Below is my current code:
#(Html.Kendo().Grid<CustomerViewModel>()
.Name("CustomerGrid")
.Columns(columns => {
columns.Bound(c => c.Name);
columns.Bound(c => c.Phone);
columns.Bound(c => c.Fax);
columns.Bound(c => c.Website);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Customer"))
))
Solution
#(Html.Kendo().Grid<CustomerViewModel>()
.Name("CustomerGrid")
.Columns(columns => {
columns.Bound(c => c.Name).ClientTemplate("" + #Html.ActionLink("#: Name#", "ViewCompanyDetails", "Company", new {companyId = "#: CompanyId#"}, new {Title = "View #: CompanyName#"}) + "");
columns.Bound(c => c.Phone);
columns.Bound(c => c.Fax);
columns.Bound(c => c.Website);
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Customer"))
))
Solution
#(Html.Kendo().Grid<CustomerViewModel>()
.Name("CustomerGrid")
.Columns(columns => {
columns.Bound(c => c.Phone);
columns.Bound(c => c.Fax);
columns.Bound(c => c.Website);
columns.Command(command => command.Custom("ViewDetails").Click("location.href='#Url.Action("ViewCustomerDetail", "Customer", new { CustomerId = #=CustomerId# })'"));
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Customer"))
))
I have the next Kendo Grid, all the events in the models take place, no problem!.
The problem is when I change a value in the grid, it not refresh again.
How I can fix this, or how I can get the event occurring when I do changes on the grid, to manage the grid refresh with JQuery.
#(Html.Kendo().Grid<Corporativo.Model.SolProdVM>()
.Name("SolicitudesProducto")
.Columns(columns =>
{
columns.Bound(e => e.Id_Producto).Width(80).Title("Código");
columns.Bound(e => e.DescProducto).Width(40).Groupable(false).Title("Producto");
columns.Bound(e => e.UM).Width(40).Groupable(false).Title("UM");
columns.Bound(e => e.Precio).Width(40).Groupable(false).Title("Precio");
columns.Bound(e => e.Cantidad).Width(40).Groupable(false).Title("Cantidad");
columns.Bound(e => e.Importe).Width(40).Groupable(false).Title("Importe");
columns.Command(command => command.Custom("Eliminar").Click("elimar_de_solicitud")).Width(25);
})
.Sortable()
.ToolBar(toolBar =>
{
toolBar.Save().Text("Guardar cambios");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(model => {
model.Id(p => p.Id_Solicitud);
model.Id(p => p.Id_Producto);
model.Field(p => p.Desc_Producto).Editable(false);
model.Field(p => p.UM).Editable(false);
model.Field(p => p.Precio).Editable(false);
model.Field(p => p.Cantidad);
model.Field(p => p.Importe).Editable(false);
})
.Read(read => read.Action("GetAllSolProdJSON", "ProductRequest", new { Id_Solicitud = #Model.Id_Solicitud }))
.Update(update => update.Action("ActualizarSolProd", "ProductRequest").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("EliminarSolProd", "ProductRequest").Type(HttpVerbs.Post))
)
)
There is an Events Method you can call.
#(Html.Kendo().Grid<Model_MVC.Models.OrderGridViewModel>()
.Name("ProposalGrid")
.HtmlAttributes(new { style = "font-size:14px;line-height:2em;width:80%;margin-left:190px;" })
.Columns(columns =>
{
//columns
})
.
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Orders"))
.Events(x => x.Change("JSFunction") )
.Model(model =>
{
model.Id(i => i.OrderId);
model.Field(x => x.OrderId).Editable(false);
})
.PageSize(15)
)
.Pageable()
)
I have use Kendo version 2012.03.1114 and below mention code to add value to model and work fine but when I update the kendo varsion to 2013.3.1119 it will give a error
(TypeError: $(...).data(...).kendoGrid.editable is undefined)
any workaround please?
var model = $('#grid').data().kendoGrid.editable.options.model;
model.set('Name', getNames());
#(Html.Kendo().Grid<ABC.Domain.Entities.user>()
.Name("Grid")
.Columns(columns => {
columns.Command(command => { command.Edit(); }).Width(80);
columns.Bound(u => u.Name).Title("Name").Width(150);
columns.Bound(u => u.Status).Title("Status").Width(70);
columns.Bound(u => u.Address).Title("Address").Width(100); })
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("userEdit")) .Events(events => events.DataBound("onDataBound").Edit("onEdit"))
.Pageable(paging => paging.PageSizes(new int[] { 5, 10, 20, 50 })
.Refresh(true))
.Sortable() .ToolBar(toolbar => toolbar.Create())
.Resizable(resize => resize.Columns(true))
.Scrollable()
.DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(p => p.userKey); }) .PageSize(5) .Events(events => events.Error("error_handler"))
.Read(read => read.Action("user_Read", "User"))
.Update(update => update.Action("User_Update", "User"))
.Create(create => create.Action("User_Create", "User")) ) )