I have a kendo grid like this.
#(Html.Kendo().Grid(Model.GridView.DataSource)
.Name("grid").Columns(columns => columns.LoadSettings(Model.GridView.ColumnSettings))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToolBar(toolbar => toolbar.Create().Text("Add User"))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(true)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
})
.Read(read => read.Action("OnGridRead", "Manage"))
)
)
And I'm using Kendo GridColumnSettings to define the columns in my model which is a GridView(Model) here like below.
public class GridView
{
public List<GridColumnSettings> ColumnSettings
{
get
{
var items = new List<GridColumnSettings>
{
new GridCommandColumnSettings
{
Commands =
{
new GridEditActionCommand()
},
Width = "70px"
},
new GridColumnSettings
{
Member = "Id",
Hidden = true
},
new GridColumnSettings
{
Member = "FirstName"
},
new GridColumnSettings
{
Member = "LastName"
},
new GridColumnSettings
{
Member = "UserName"
},
new GridColumnSettings
{
Member = "Password",
ClientTemplate = "***",
}
};
return items;
}
}
}
And here I need to disable Username field only in inline edit mode of the grid.
Currently there is no property available in GridColumnSettings class as editable. How can I disable the username field in edit mode of the grid using GridColumnSettings class.
Please try with the below code snippet. I have disabled the StudentID field in below demo.
#(Html.Kendo().Grid<MvcApplication1.Models.Student>()
.Name("Grid")
//.Columns(columns =>
// {
// columns.Bound(c => c.StudentID);
// columns.Bound(c => c.StudentName);
// })
.Columns(cols => cols.LoadSettings(ViewBag.cols))
.Scrollable()
.Groupable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InLine)).ToolBar(toolbar => toolbar.Create())
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Events(events => events.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Grid_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Model(model =>
{
model.Id(p => p.StudentID);
model.Field(p => p.StudentID).Editable(true);
})
)
)
Method 1:-
<script>
function onEdit(e) {
if (e.model.isNew() == false) {
$(e.container).find("input[name='StudentID']").attr('disabled', 'disabled');
}
}
</script>
Method 2:-
<script>
function onEdit(e) {
if (e.model.isNew() == false) {
$(e.container).find("input[name='StudentID']").parent().html($(e.container).find("input[name='StudentID']").val()).removeAttr('data-container-for');
}
}
</script>
Let me know if any concern.
Please try below solution to disable the username field in edit mode of the grid.
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.UserName).Editable(false);
})
Related
I am trying to add a KendoDatePicker to my Grid and I cannot get it to show up.
I used this post as a template to try and create the DatePicker inside of the column.
https://www.telerik.com/forums/kendo-ui-mvc-grid-with-date-picker-and-combo-box-(data-of-combo-is-based-on-each-row-data)
#(Html.Kendo().Grid<OrderViewModel>(Model)
.Name("order-grid")
.Columns(columns =>
{
columns.Bound(c => c.CreatedAt).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.SalesNumber);
columns.Bound(c => c.MaterialNumber);
columns.Bound(c => c.SerialNumber);
columns.Bound(c => c.CompletionDate)
.HtmlAttributes(new { #class = "templateCell"})
.ClientTemplate(Html.Kendo().DatePicker().Name("completiondate-picker").Format("{0:MM/dd/yyyy}").HtmlAttributes(new { datab_bind = "value:CompletionDate"}).ToClientTemplate().ToString())
.Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.OrderComplete);
columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name");
columns.Command(command => { command.Edit(); });
columns.Command(command => { command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(ds =>
ds.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ProductionLineId).DefaultValue("4f03f3a1-eda3-462a-b873-69f4baf5e8a5");
})
.Read(read => read.Action("GetOrderList", "Order"))
.Update(update => update.Action("EditOrderInLine", "Order"))
.Create(create => create.Action("CreateNewOrder", "Order"))
.Destroy(destroy => destroy.Action("DeleteOrder", "Order"))
)
.HtmlAttributes(new { style = "height: 100%"})
.Sortable()
.Filterable()
)
The code runs and compiles but the date picker does not appear in the text box.
Try to add the EditorTemplate For datepicker like this..
#(Html.Kendo().Grid<OrderViewModel>(Model)
.Name("order-grid")
.Columns(columns =>
{
columns.Bound(c => c.CreatedAt).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.SalesNumber);
columns.Bound(c => c.MaterialNumber);
columns.Bound(c => c.SerialNumber);
columns.Bound(c => c.CompletionDate).EditorTemplateName("CompletionDate");
columns.Bound(c => c.OrderComplete);
columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name");
columns.Command(command => { command.Edit(); });
columns.Command(command => { command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(ds =>
ds.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.ProductionLineId).DefaultValue("4f03f3a1-eda3-462a-b873-69f4baf5e8a5");
})
.Read(read => read.Action("GetOrderList", "Order"))
.Update(update => update.Action("EditOrderInLine", "Order"))
.Create(create => create.Action("CreateNewOrder", "Order"))
.Destroy(destroy => destroy.Action("DeleteOrder", "Order"))
)
.HtmlAttributes(new { style = "height: 100%"})
.Sortable()
.Filterable()
)
Create a folder editortemplate and create a partial view Named 'CompletionDate'
The partial View will we like this
#(Html.Kendo().DatePicker()
.Name("CompletionDate")
.HtmlAttributes(new { style = "width:100%", data_format = "dd-MMM-yyyy" })
.Events(e =>
{
e.Change("ChangeFunction");
})
)
i have kendo mvc grid in my page and i bind it dynamically but the size of each column is not good and i have to give the static size of all, but my columns are dynamic and in design time i don't have size of each column, how can i make a dynamic size for grid columns after read method?
this is how i create kendo grid in my view
#(Html.NFSGrid<dynamic>("PortfolioGrid")
.Name("PortfolioGrid")
.EnableCustomBinding(true)
.Selectable()
.BindTo(Model)
.DataSource(dataSource => dataSource
.Ajax()
.Model(m =>
{
foreach (var Allcoulms in (List<HtmlHelperGridBuilder.GridCol>)ViewData["ViewDataGridfildes"])
{
if (Allcoulms.ColumnName == "Id")
{
m.Id(Allcoulms.ColumnName);
}
else
{
m.Field(Allcoulms.ColumnName, Type.GetType("System.String")).Editable(true);
}
}
})
.ServerOperation(true)
.Read(read => read.Action("Read", "Portfolio").Data("portFolioNameSpace.additionalInfo")
)
)
.HtmlAttributes(new { style = "width:2000;" })
.Columns(columns =>
{
columns.Template(p => { }).ClientTemplate("<input name='selectedIds' type='checkbox' value=\"#=Id#\" class='check_row' onchange='portFolioNameSpace.changeChk(event,this.checked,this);'/>")
.HeaderTemplate("<input type='checkbox' class='selectAll' onclick='portFolioNameSpace.ToggleChkBox(this.checked);'/>")
.HeaderHtmlAttributes(new { style = "text-align:center;" })
.Width(30);
columns.Template(#<text></text>).Title(T("روند").ToString()).Width(30).ClientTemplate("<a onclick='portFolioNameSpace.onclickFlowFPortfolio(event)'><i class='iconmain-showall'></i></a>");
foreach (var Allcoulms in (List<HtmlHelperGridBuilder.GridCol>)ViewData["ViewDataGridfildes"])
{
if (Allcoulms.ColumnName == "Id")
{
columns.Bound(Allcoulms.ColumnName).Visible(false);
}
else if (Allcoulms.ColumnName == "Subject")
{
columns.Bound(Allcoulms.ColumnName).Width(700).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" });
}
else if (Allcoulms.ColumnName == "Comment")
{
columns.Bound(Allcoulms.ColumnName).Width(200).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" }).ClientTemplate("<input type=\"text\" id=\"#=Id#\" value=\"#=Comment#\"/>");
}
else if (Allcoulms.ColumnName == "notViewdRows")
{
}
else
{
columns.Bound(Allcoulms.ColumnName).Width(200).Title(T(Allcoulms.ColumnTitle).ToString()).HtmlAttributes(new { style = "text-align:center;" });
}
}
//.HtmlAttributes(new { #style = "display:none" });
})
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Pageable(pager => pager.Enabled(true))
.Scrollable()
.Filterable()
.Resizable(resize => resize.Columns((true)))
.Reorderable(reorder => reorder.Columns(true))
.Events(e => e
.DataBound("gridDataBound")
)
)
Have you tried this:
.Columns(columns =>
{
columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"]);
})
?
You can pass 'width' via GridColumnSettings object.
#(Html.Kendo().DropDownListFor(x => x.ParentCategoryId).Name("ParentCategoryId")
.HtmlAttributes(new { style = "width:300px;" }).DataTextField("Name").Value("ID")
.DataSource(source => { source.Read(read =>
{ read.Action("GetKategori", "Kategori"); }); }))
This is my code, but i can't get selected item value. how can i get ID from selected value?
Register the select event of the dropdown by using .events
#(Html.Kendo().DropDownListFor(x => x.ParentCategoryId)
.Name("ParentCategoryId")
.DataTextField("Name")
.DataValueField("Id")
.Events("FunctionName")
.DataSource(source => {
source.Read(read =>
{
read.Action("Action", "Controller")
.Data("OnAdditionalData");
})
. ServerFiltering(true);
})
)
Then in the script
function FunctionName() {
var value = $("#ParentCategoryId").val();
}
i fixed my problem. Problem is datavalue field, Sample Code id
#(Html.Kendo().DropDownListFor(x => x.ParentCategoryId).Name("ParentCategoryId").HtmlAttributes(new {style = "width:300px;"}).DataTextField("Name").Value("ID").DataValueField("ID")
.DataSource(source => { source.Read(read => { read.Action("GetKategori", "Kategori"); }); }))
try this
function FunctionName() {
var value = $("#ParentCategoryId").data().kendoDropDownList.value();
}
I would like to update the parent grid when the child grid record is updated, is that possible? If so could anyone provide any advice on it?
Firstly I'm not sure which event would be best to use on the child grid. I want the child grid's CRUD action to fire, then load the contents of the parent again, preferably by Ajax.
Below is my grid as is:
#{
ViewBag.Title = "Bills: Parent/Child";
}
<h2>Bills Index</h2>
#(Html.Kendo().Grid<BillParent>()
.Name("BillParentsGrid")
.Columns(columns =>
{
columns.Bound(h => h.Category);
columns.Bound(h => h.Description);
columns.Bound(h => h.Amount);
columns.Command(command =>
{
command.Edit();
}).Width(95);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(h => h.BillId);
model.Field(h => h.BillId).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("BillParents_Read", "Bill"))
.Update(update => update.Action("BillParent_Update", "Bill"))
)
.Events(events => events.DataBound("dataBound"))
.ClientDetailTemplateId("BillChildren")
)
<script id="BillChildren" type="text/kendo-tmpl">
#(Html.Kendo().Grid<BillChild>()
.Name("BillChildren_#=BillId#")
.Columns(columns =>
{
columns.Bound(d => d.BillId).Width(50);
columns.Bound(d => d.Description).Width(150);
columns.Bound(d => d.Amount).Width(80);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(55);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(d => d.BillId);
model.Field(d => d.BillId).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))
.Update(update => update.Action("BillChild_Update", "Bill"))
.Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))
.Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill")))
.ToolBar(tools => tools.Create())
.ToClientTemplate()
)
</script>
Many thanks.
I cracked it in the end.
The Event needs to be on the dataSource, using the Sync event, not on the grid itself.
Short version
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(d => d.BillId);
model.Field(d => d.BillId).Editable(false);
})
.Events(events =>
{
events.Error("error_handler");
events.Sync("resyncParentGrid");
})
<script>
function resyncParentGrid(e) {
var parentData = $('#BillParentsGrid').data("kendoGrid");
parentData.dataSource.read();
}
</script>
Full Version
#(Html.Kendo().Grid<BillParent>()
.Name("BillParentsGrid")
.Columns(columns =>
{
columns.Bound(h => h.Category).Width(50);
columns.Bound(h => h.Description);
columns.Bound(h => h.Amount).Width(80);
columns.Command(command =>
{
command.Edit();
})
.Title("Commands").Width(150);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(h => h.BillId);
model.Field(h => h.BillId).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("BillParents_Read", "Bill"))
.Update(update => update.Action("BillParent_Update", "Bill"))
)
.Events(events => events.DataBound("dataBound"))
.ClientDetailTemplateId("BillChildren")
)
<script id="BillChildren" type="text/kendo-tmpl">
#(Html.Kendo().Grid<BillChild>()
.Name("BillChildren_#=BillId#")
.Columns(columns =>
{
columns.Bound(d => d.BillId).Width(50);
columns.Bound(d => d.Description).Width(150);
columns.Bound(d => d.Amount).Width(80);
columns.Command(command =>
{
command.Edit();
command.Destroy();
})
.Title("Commands").Width(150);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(d => d.BillId);
model.Field(d => d.BillId).Editable(false);
})
.Events(events =>
{
events.Error("error_handler");
**events.Sync("resyncParentGrid");**
})
.Read(read => read.Action("BillChildren_Read", "Bill", new { id = "#=BillId#" }))
.Update(update => update.Action("BillChild_Update", "Bill"))
.Create(create => create.Action("BillChild_Create", "Bill", new { id = "#=BillId#" }))
.Destroy(destroy => destroy.Action("BillChild_Destroy", "Bill"))
)
.ToolBar(tools => tools.Create())
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function resyncParentGrid(e) {
var parentData = $('#BillParentsGrid').data("kendoGrid");
parentData.dataSource.read();
}
</script>
For some reason i can get second tab (Product Details) to bind record in the grids although the GetAllProductList return records. Please advise, thank you
index.cshtml
HOME/Index.cshtml
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Search")
.LoadContentFrom("Index", "ProductDetails")
.Selected(true);
items.Add().Text("Product Details")
.LoadContentFrom("_ProductData", "ProductDetails")
})
)
ProductDetails/Index.cshtml
#(Html.Kendo().Grid()
.Name("BookGrid")
.HtmlAttributes(new { #Style = "align:center; font-size:10px; width:950px" })
.Columns(columns =>
{
columns.Bound(p => p.BookId).Width(95);
columns.Bound(p => p.Name).Width(120);
})
.ToolBar(toolbar => toolbar.Create())
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)
.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)
)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource
.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.BookId);
})
.Sort(sort => sort
.Add(x => x.Name).Descending())
.Read(read => read.Action("GetBookData", "ProductDetails").Type(HttpVerbs.Get))
)
)
ProductDetails/_ProductData.chtml (Partial page)
#(Html.Kendo().Grid<HH.PrductModel>()
.Name("ProductGrid")
.HtmlAttributes(new { #Style = "align:center; font-size:10px; width:950px" })
.Columns(columns =>
{
columns.Bound(p => p.ProductId).Width(95);
columns.Bound(p => p.Name).Width(120);
})
.ToolBar(toolbar => toolbar.Create())
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)
.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)
)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource
.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ProductId);
})
.Sort(sort => sort
.Add(x => x.Name).Descending())
.Read(read => read.Action("GetProductData", "ProductDetails").Type(HttpVerbs.Get))
)
)
**ProductDetailscontroller**
public ActionResult Index()
{
return View();
}
///Display for tab 1
public ActionResult GetBookData ([DataSourceRequest] DataSourceRequest request)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(GetAllBookList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
private static IEnumerable<BookModel> GetAllBookList()
{
using (var dc = new HHEntities())
{
var result = (from a in dc.Books
select new BookModel
{
BookId= a.BookId,
Name= a.Name
});
return result.Distinct().ToList();
}
}
///Display for tab 2
public ActionResult GetProductData([DataSourceRequest] DataSourceRequest request)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(GetAllProductList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
The following will return records but for some reason it would bind to grid in Product details tab
/// <summary>
/// </summary>
/// <returns></returns>
private static IEnumerable<ProductModel> GetAllProductList()
{
using (var dc = new HHEntities())
{
var result = (from a in dc.Products
select new ProductModel
{
ProductId= a.ProductId,
Name= a.Name,
Description= a.Description,
ExpiryDate= a.ExpiryDate
});
return result.Distinct().ToList();
}
}
public ActionResult __ProductData()
{ return PartialView();}
I suspect the problem is that both grids are rendered with the same HTML id attribute (which is set via the Name() method). You need to give your grids unique names. For example you can put some index in ViewData in the action methods which render the partial view that contains the grid. Then use that index in the partial view itself to make the grid name unique:
#(Html.Kendo().Grid<HH.PrductModel>()
.Name("Product" + ViewData["index"])