I have kendo grid and I need to have in inline editing two dropDownLists in two cells. The second list is depended on first one. The second can have 0 or X items. When is 0 in second, how Can I send null value to server when save item ?
Grid look like this:
columns.Bound(work => work.Project).ClientTemplate("#=Project.Name#").Width(350); // 1 DropDownList
columns.Bound(work => work.Spp).ClientTemplate("#=Spp.Code#").Width(100);
columns.Bound(work => work.Operation).ClientTemplate("#=Operation.Code#").Width(100);// 2 DropDownList
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.Events(events => events.RequestEnd("OnRequestEnd_TopLinePriceGrid"))
.PageSize(20)
//.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Operation).DefaultValue(ViewData["defaultOperation"] as TT.ViewModel.OperationViewModel);
model.Field(p => p.Spp).DefaultValue(ViewData["defaultSpp"] as TT.ViewModel.SppViewModel);
model.Field(p => p.Project).DefaultValue(ViewData["defaultProject"] as TT.ViewModel.ProjectViewModel);
})
.Read(read => read.Action("WorkRead", "Home").Data("currentWeekInfo")) // Přidádo HTTP parametr s vybranným týdnem
.Create(update => update.Action("EditingInline_Create", "Home").Data("currentWeekInfo"))
.Update(update => update.Action("EditingInline_Update", "Home").Data("currentWeekInfo"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home").Data("currentWeekInfo"))
)
Editor template for Operation:
#(Html.Kendo().DropDownList()
.Name("Operation")
.OptionLabel("Choose operation...")
.CascadeFrom("Project")
.DataValueField("Id")
.DataTextField("Code")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeOperations", "Home")
.Data("filterOperations");
}).ServerFiltering(true); ;
})
.Enable(false)
.AutoBind(false)
)
When I click save I have always default value fot operation in request.
Thnaks for any help!
To send null value to the server the corresponding field (Operation) in the model should be of nullable type. Also the DropDownList should have OptionLabel defined and ( in case it's primitive type) ValuePrimitive option set to true.
Related
i'm new to kendo UI and currently learning about custom editor.
My Problem is i managed to get my editor template working in edit mode and populate the data just fine, but somehow it won't save the value to the display grid
I Retreive all my data from API.
UPDATE:
i've managed to properly save the value from the custom editor template to the controller and it works just fine, but using clientTemplate won't display the correct value from what i select in the dropdown, and only show a string
DropDown Only Display A String
my setup code is like this
#( Html.Kendo().Grid<SalesOrderDetailVM>()
.Name("list-detail")
.Columns(columns =>
{
columns.Bound(c => c.Product).ClientTemplate("\\#=Product.ProductId\\#").Title("Products");
columns.Bound(c => c.Quantity);
columns.Bound(c => c.UnitPrice);
})
.Editable(GridEditMode.InCell)
.ToolBar(tool =>
{
tool.Create();
tool.Save();
}
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(true)
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.Product);
})
.Create(act => act.Action("DetailCell_Create","SalesOrder"))
)
)
DDLProduct.cshtml:
#model AAF.WEB.MVC.ViewModels.ProductVM
#(
Html.Kendo().DropDownListFor(m => m)
.DataValueField("ProductId")
.DataTextField("ProductName")
.OptionLabel("Select Product")
.BindTo((System.Collections.IEnumerable)ViewData["products"])
)
Edit Mode
DisplayMode / Out of Product Edit Mode
Use template method to acheive dropdown with kendo grid.
GridForeignKey.cshtml - it should placed in shared folder or EditorTemplates
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
In your kendo grid please change like below
#( Html.Kendo().Grid<AAF.WEB.MVC.ViewModels.SalesOrderDetailVM>()
.Name("list-detail")
.Columns(columns =>
{
columns.Bound(c => c.Id)
columns.ForeignKey(c => c.ProductId, (System.Collections.IEnumerable)ViewData["Products"], "ProductId", "ProductName").Title("Products");
columns.Bound(c => c.Quantity);
columns.Bound(c => c.UnitPrice);
})
.Editable(GridEditMode.InCell)
.ToolBar(tool =>
{
tool.Create();
tool.Save();
}
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
You can set the products data to view data. using this method you can save the product id.
Thanks
Okay after i frustrated for many hours, finally found the solution
the solution is to add a defaultvalue to the passed model in the grid
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.Product).DefaultValue(
ViewData["defaultProduct"] as ProductVM
);
})
and pass the data from the controller
// Function that get data from API
ViewData["products"] = products;
ViewData["defaultProduct"] = products.First();
Here's a sample code from the Kendo Grid Detail Template demo on the Telerik website (I've simplified the detail template by removing the tab-strip):
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(120);
columns.Bound(e => e.LastName).Width(120);
columns.Bound(e => e.Country).Width(120);
columns.Bound(e => e.City).Width(120);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Title("ID").Width(56);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(190);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
I'd like to add a Create button to the child grid (Order grid) inside the template. The problem is that when a new Order is being added, I need to pass the EmployeeID to the controller, but the following does not work, even though it works for the Read action:
.Create(create => create.Action("AddOrder", "Grid", new { employeeID = "#=EmployeeID#" }))
How do I pass the EmployeeID to the controller when adding a new item to the grid in the detail template?
You should not set an EmployeeID value as a parameter in its create transport. Because you will do POST request here, the right way to do it is to pass the value as default value of EmployeeID of Grid model.
Your inner Grid should have configuration data source like this
.DataSource(ds=> ds.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#: EmployeeID #" }))
.Create(create => create.Action("AddOrder", "Grid"))
.Model(model =>
{
model.Id(f => f.OrderID)
model.Field(f => f.EmployeeID).DefaultValue("#: EmployeeID #")
})
)
The moment you add new record to server its EmployeeID value has been set.
Note: EmployeeID will be assigned by string value because of this expression "#= #",you should have EmployeeID as string type. Or you will get razor error for incompatible type.
I have a kendo grid with datasource. Each time it is refreshing the old data with new data. But my requirement is quite different I also want display old data as well.
Another data source is in anotherKENDO GRID.
My Kendo Grid as below:
#(Html.Kendo().Grid<ABC>()
.Name("grdABC")
.HtmlAttributes(new { style = "height:450px" })
.Columns(columns =>
{
columns.Bound(d => d.ID).Hidden(true);
columns.Bound(d => d.Group).Hidden(true);
columns.Bound(d => d.Name).Title("Name").Width(350);
})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("Name").Ascending())
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("GetSelectedNames", "EligCriteria", new { Id = Model.ID != null ? Model.ID : (decimal?)null }).Data("getSelectedEligibilityNames"))
)
.AutoBind(false)
)
We can maintain using below code:
var grid = $("#GridID").data("kendoGrid");
grid.one("dataBinding", function(e){
e.preventDefault()
});
I have a Grid with Employes. There is a Edit button and the edit mode is set to Popup. In the EditorTemplate of the entity I want to edit, there is another grid that has a history of Salary with a incell or inline edit mode.
Both grids uses Ajax datasources. The problem is with the inner grid binding. The controller action feeding a Json result to the ajax call requires the ID of the employe we are editing to return the appropriate Salary history. However, Kendo UI ASP.NET MVC wrapper will render some sort of template of the editor before knowing which employee we want to edit, then it will edit it when we are requesting the popup.
How can I feed the Employe ID in the Read Ajax call?
Main Grid
#(Html.Kendo().Grid<MyProject.Business.Models.EmployeDTO>().Name("EmployeGrid")
.ToolBar(toolbar => toolbar.Create())
.Columns(cols =>
{
cols.Bound(o => o.someData).Title("Some Data");
cols.Bound(o => o.moreData).Title("More Data");
cols.Command(o =>
{
o.Edit();
o.Destroy();
}).Title(" ");
})
.Editable(editor => editor
.Mode(GridEditMode.PopUp)
.Window(window => window.Draggable().Resizable().HtmlAttributes(new { #style = "width:700px;" })))
.Sortable()
.Filterable()
.Groupable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(o => o.id))
.Read(read => read.Action("GetAll", "EmployesAjax"))
.Update(update => update.Action("Update", "EmployesAjax"))
.Create(create => create.Action("Create", "EmployesAjax"))
.Destroy(destroy => destroy.Action("Destroy", "EmployesAjax"))
)
)
Inner Grid (In Views/Shared/EditorTemplates/EmployeDTO.cshtml)
#Html.Kendo().Grid<MyProject.Business.Models.SalairyDTO>().Name("SalaryGrid")
.Columns(cols =>
{
cols.Bound(o => o.someInfo).Title("Some Info");
})
.DataSource(datasource => datasource
.Ajax()
.Model(model =>
{
model.Id(o => o.id);
model.Field(o => o.employe_id).DefaultValue(Model.id);
})
// NEED THE ID HERE
.Read(read => read.Action("GetByEmployeId", "SalairyAjax", new { id = "" }))
.Update(update => update.Action("Update", "SalairyAjax"))
.Create(create => create.Action("Create", "SalairyAjax"))
.Destroy(destroy => destroy.Action("Destroy", "SalairyAjax"))));
Basically I would suggest you to Set the AutoBind option to false of the inner Grid and use the edit event of the outer Grid to perform a read request and pass the value as additional parameter.
Here is an example:
function onEditOfEmployeGrid(e){
$('#SalaryGrid').data().kendoGrid.dataSource.read({id:e.model.EmployeeID})
}
You could simply pass the value from the grid using addtionaldata parameter within the grid. the RouteID on the (left side) can then be referenced within the Grid Popup Editor using ViewData["RouteID"]. I hope that helps
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("busStop")
.DisplayDeleteConfirmation(true)
.Window(window => window.Modal(true).Resizable().Draggable())
.AdditionalViewData(new { RouteID = Model.RouteID }))
Here is my kendo grid code:
#(Html.Kendo().Grid(Model)
.Name("paymentGrid")
.Columns(columns =>
{
columns.Bound(p => p.AccountName).Title("Account Name");
columns.Bound(p => p.Active).Title("Active").ClientTemplate("<div>#=Active ? 'Active' : 'Inactive'#</div>");
columns.Command(command => command.Custom("DeActivate").Click("deActivatePaymentAccount").Text("DeActivate")).Title("DeActivate");
})
.Filterable()
.Sortable()
.Pageable(paging => paging.Enabled(true).PageSizes(true).Messages(messages => messages.Empty("No accounts found")))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.AccountId);
})
.Update(update => update.Action("EditAccount", "Account"))
)
)
Question:
How do I add a client Template to my Custom Command (Deactivate) so I can toggle the text on the button based on whether the account is active or not?
I think that the best way to change the button text is to do this in the javascript function bound to the click event :
function deActivatePaymentAccount(e) {
var $btn = $(e.target);
$btn.text() === "DeActivate" ? $btn.text("Activate") : $btn.text("DeActivate");
// some other code here
}