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"))
)
)
Related
I need help writing a script/Function for my Telerik UI for asp.net MVC program. I have a delete button in my tool bar and I think my script is correct for it deleting. Now, I'm told that my check boxes haft to have a script also to be deleted when checked. As a C# coder, I'm not entirely knowledgeable about Json coding. So, any help would be appreciated! Here is my code below.
#(Html.Kendo().Grid<MVCSQLDatabase.Models>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Batch(true)
.Model(model => model.Id(p => p.Proposal_Uid))
.Read(read => read.Action("Proposals_Read", "Grid"))
.Create(create => create.Action("Proposals_Create", "Grid"))
.Update(update => update.Action("Proposals_Update", "Grid"))
.Destroy(destroy => destroy.Action("Proposals_Destroy", "Grid"))
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
columns.Select().Width(100); //<-- my check boxes code.
columns.Bound(c => c.Prime).Width(215);
columns.Bound(c => c.Proposal).Width(200);
columns.Bound(c => c.C).Width(190);
columns.Bound(c => c.Cl).Width(185);
columns.Bound(c => c.T).Width(290);
columns.Bound(c => c.M).Width(220);
columns.Bound(c => c.S).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.E).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.P).Width(235);
columns.Bound(c => c.Con).Width(215);
columns.Command(command => { command.Destroy(); }).Width(180);// <--- My delete button in my column
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete").Name("batchDestroy").IconClass("k-icon k-i-close"); //<-- my custom made delete button in my toolbar.
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.PersistSelection()
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.HtmlAttributes(new { style = "height:835px;" })
)
<script>
$("#grid").on("click", "batchDestroy", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
</script>
Here is the code for anybody else stuck in this situation. The thing that got me the most, was the .done function to end the button click function and then saving the grid AFTER the delete was made. Hopefully, this helps others!
<script>
$(document).ready(function ()
{
$(".k-grid-Destroy").on("click", function (e)
{
e.preventDefault();
var grid = $("#Grid").data("kendoGrid");
var selectedRows = grid.select();
kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
.done(function ()
{
$.each(selectedRows, function (i, row)
{
grid.removeRow(row);
})
grid.saveChanges();
});
});
});
</script>
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"))
)
)
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());
});
}
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()
)
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,