I have a kendo grid which has a kendo filter, I have set extra(false) in the kendo filter and removed the dropdown using the below code. Here the filtering is happening only when I give complete value, instead I need to filter with starting value
---------------------------script start
<script type="text/javascript">
function filterMenuInit(e) {
var firstValueDropDown = e.container.find("select:eq(0)").data("kendoDropDownList");
setTimeout(function () {
firstValueDropDown.wrapper.hide();
});
}
</script>
------------------------script End
#(Html.Kendo().Grid(Model) //Bind the grid to ViewBag.Products
.Name("grid")
.Columns(columns =>
{
columns.Bound(Commission => Commission.CreatedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter"));
columns.Bound(Commission => Commission.Status);
columns.Bound(Commission => Commission.Branch);
columns.Bound(Commission => Commission.ULN);
columns.Bound(Commission => Commission.MgrAmount);
columns.Bound(Commission => Commission.PayFrequency);
columns.Bound(Commission => Commission.CalcBasis);
})
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Filterable(f => f.Extra(false))
.Events(e => e.FilterMenuInit("filterMenuInit"))
.Pageable(pager => pager
.PageSizes(new[] { 5, 10, 15 }))
)
Related
I have a kendo data grid grouped default by a column and I want to edit the grid inline. I don't want the user to group by any other column. While the default grouping works fine, the update event is not fired and the control doesn't go the controller's inline update method. Can you please check where I'm going wrong. Below is the code:
#(Html.Kendo().Grid(Model)
.Name("grdTimesheets")
.Columns(columns =>
{
columns.Bound(p => p.EmployeeId).Hidden(true);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.Monday.Hour).Title("Monday")
.EditorTemplateName("TimesheetMonday");
columns.Command(command =>
{
command.Edit();
command.Destroy();
command.Custom("Add").Text(" ").Click("AddNewTimesheet");
});
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Groupable(false)
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.EmployeeId);
model.Field(p => p.FirstName).Editable(false);
})
.PageSize(20)
.Update(update => update.Action("EditingInline_Update", "Timesheet"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Timesheet"))
.Group(d=>d.Add(f=>f.FirstName))
)
If I comment out the last line ".Group(d=>d.Add(f=>f.FirstName))", everything works fine but the default grouping goes off.
I know that its a bit late for an answer but I will just leave this here in case that anybody else is having the same problem. Once you group by any column the grid will not fire ".Update(update => update.Action("EditingInline_Update", "Timesheet"))". In order to fix this you would need to add OnEditEvent for the grid and in the javascript function to attach an event to the textbox/dropdown or whatever control you have there. Sample below:
.Events(events => events.Edit("grid_edit")) this is in the view
javascript:
function grid_edit(e) {
var grid = $('#grid').data('kendoGrid');
var cell = e.container;
var area = cell.find("textarea")
area.on("blur", function() {
// update ur entries here
var areaVal = cell.find("textarea").val(); // this is the new value
// call some ajax to update the value and in the success call grid.dataSource.sync(); to refresh the grid
});}
Also you would need to remove your .Update() for the DataSource because its no longer needed.
I am using the Kendo UI (2015.3.930) Grid Control and I have a integer textbox in a grid filter row that always as decimal when I apply the filter.
Here is my code:
#(Html.Kendo().Grid((IEnumerable<UiController.Lot>)Model.Lots)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.LotNumber).Title("Lot No")
.Filterable(ftb =>ftb.ItemTemplate("NumericFilter"));
columns.Bound(c => c.BranchName).Title("Branch Name");
})
.HtmlAttributes(new { style = "height: 530px;" })
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Server()
.Model(model => { model.Id(p => p.Id); })
)
)
My script section shows:
<script>
function NumericFilter(args) {
args.element.kendoNumericTextBox({
"spinners" : false,
"format": "n0",
"decimals": 0,
});
}
For an Integer value of 10, it shows '10.00' after the applying the filter. Is there a way of showing the value without the decimal portion.
Thanks,
I have prepared Dojo example just to show that it is possible.
I have not MVC wrappers but it looks, that it will work if you will do some small modifications to your code:
1] Change ItemTemplate in your Filterable to UI
columns.Bound(c => c.LotNumber).Title("Lot No").Filterable(ftb => ftb.UI("NumericFilter"));
2] Then you should be able to get wanted behaviour with syntax you showed in question with small (selector) modification
<script>
function NumericFilter(args) {
$(args).kendoNumericTextBox({
"spinners" : false,
"format": "n0",
"decimals": 0,
});
}
to customize this field, you need to use cell.template, please update your code as follow:
columns.Bound(c => c.LotNumber)
.Title("Lot No")
.Filterable(ftb => ftb.Cell(c => c.Template("NumericFilter")));
I can't get the Kendo UI grid to work properly. All I am trying to do is, when it is double clicked, I want it to redirect to action.
<div class="Grid" id="Grid">
#(Html.Kendo().Grid(Model)
.Name("grdWorkFlow")
.Columns(columns =>
{
columns.Bound(p => p.SablonWorkflowID).Visible(false);
columns.Bound(p => p.Name);
columns.Bound(p => p.Description);
columns.Bound(p => p.DateAdded);
columns.Bound(p => p.Active);
}).Events(events => events.Change("grid_selected"))
.Selectable(p => p.Type(GridSelectionType.Row))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.SablonWorkflowID))
.Create("Yeni", "Workflow")
)
)
<script type="text/javascript">
function grid_selected(e) {
var grid = $('#Grid').data('grdWorkFlow');
alert('1');
var record = grid.dataItem(grid.select());
alert('2');
var WID = record.SablonWorkflowID;
window.location.href = "#Url.Action("Edit","Workflow",new { wID = 'WID' })";
}
$("#grdWorkFlow").on("dblclick", "tr.k-state-selected", function (e) {
// do something
});
This is my code. I don't get to alert('2'). I have tried various versions of this, using all types of different stuff from the net.
What am i doing wrong here?
You should define grid as:
var grid = $('#grdWorkFlow').data('kendoGrid');
By default it looks like Telerik Grid for MVC3 submits only the rows marked as "dirty" to my controller. I need to be able to submit all rows on a Telerik Grid to my controller. In other words I think I need to mark all rows as changed so the grid will send all rows to my controller.
I am using Ajax data binding as in:
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("GetData", "ModuleAccess", new { roleId = #ViewBag.RoleId, appId = #ViewBag.AppId })
.Update("SaveBatchEditing", "ModuleAccess")
#(Html.Telerik().Grid<BarcodeListModel>()
.Name("orders-grid")
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.DataKeys(keys =>
{
keys.Add(x => x.Id);
})
.ToolBar(commands =>
{
commands.SubmitChanges();
})
.DataBinding(dataBinding =>
dataBinding.Ajax()
.Select("BulkEditSelect", "ProductVariant")
.Update("BulkEditSaveBarcode", "ProductVariant")
.Delete("DeleteBarcode", "ProductVariant")
)
.Columns(columns =>
{
columns.Bound(x => x.Id).ReadOnly();
columns.Bound(x => x.SKU);
columns.Bound(x => x.barcode);
//columns.Bound(x => x.Id)
// .Template(x => Html.ActionLink(T("Admin.Common.View").Text, "DeleteBarcode", new { id = x.Id }))
// .ClientTemplate("" + "Delete" + "")
// .Width(50)
// .Centered()
// .HeaderTemplate("DeleteBarcode")
// .Filterable(false)
// .Title("Delete");
columns.Command(commands => commands.Delete()).Width(180);
})
.Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
.DataBinding(dataBinding => dataBinding.Ajax().Select("BarcodeList", "ProductVariant", Model))
.Editable(editing => editing.Mode(GridEditMode.InCell))
.EnableCustomBinding(true)
)
use like this code
I found the answer:
function ModuleAccessGridHasChanges() {
var grid = $("#ModuleAccessGrid").data("tGrid");
if (grid != null) {
var additionalValues = grid.data;
if (!$.telerik.trigger(grid.element, 'submitChanges', { values: additionalValues })) {
grid.sendValues($.extend({}, additionalValues), 'updateUrl', 'submitChanges');
}
}
}
Fiddler shows all the data for the grid coming accross:
I have a Telerik Grid on a MVC3 project with Razor layout engine with the popUp edit mode working fine. Here is the grid code:
#(Html.Telerik().Grid(Model)
.Name("grid-moedas")
.DataKeys(keys => keys.Add(m => m.ID))
.Columns(columns =>
{
columns.Bound(m => m.Nome);
columns.Bound(m => m.Simbolo);
columns.Bound(m => m.ExtensoNoSingular);
columns.Bound(m => m.ExtensoNoPlural);
columns.Command(commands =>
{
commands.Edit();
});
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("AjaxGrid", "Moeda");
dataBinding.Ajax().Update("AjaxEdit", "Moeda");
})
.Sortable()
.Editable(editing => editing.Mode(GridEditMode.PopUp))
.Pageable(paging =>
paging.Style(GridPagerStyles.NextPreviousAndInput)
)
.Footer(true)
.ClientEvents(events => events
.OnRowSelect("onRowSelect")
)
.Selectable()
)
I wanna two things:
Hide the buttons generated for each row on the grid
Call the edit command on the OnRowSelect event, so the editing popUp form will be called in response to the user click on a row.
function onRowSelect(e) {
//how to call edit command for e.row???
return false;
}
You can try this:
<script>
function onRowSelect(e) {
var grid = $(this).data("tGrid");
grid.editRow($(e.row));
}
</script>
I can't easily try this (I don't have the Telerik controls), but is this of any use:
<script type="text/javascript">
function OnRowClick(sender, args) {
var masterTable = sender.get_masterTableView();
masterTable.fireCommand("Edit", args.get_itemIndexHierarchical())
}
</script>
Taken from here: http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-edit-on-row-select.aspx#1405657