Is it possible to make a Kendo MVC grid .Editable() based on a function that allows editing ONLY if you have a certain Viewbag?
I have a viewbag that is Viewbag.DisplayButton. That viewbag is only 'true' if you have a dev role (so non-devs cannot edit anything). How can I make this work with .Editable() so that you can only edit cells if you have that viewbag?
Currently if I set Editable(true) then anyone (devs, customers, literally anyone) can edit the cell. If I set it to Editable(false) then no one, including devs, can edit it. So I need a function that does it only if you have that specific viewbag.
Use a Razor code block for this. You can assign the Grid definition to a variable, then execute the conditional logic and add the additional configurations, if any. Finally call the Render method. Here is an example:
<h3>Some content</h3>
#{
var isAdmin = true;
var grid = (Html.Kendo().Grid<MyModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.MyModelID).Filterable(false);
columns.Bound(p => p.SomeModelProperty);
})
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(m=>m.Id("MyModelID"))
.Read(read => read.Action("Read", "Grid"))
)
);
if (User.IsInRole("Admin"))
{
grid.Editable(e=>e.Mode(GridEditMode.InCell));
}
grid.Render();
}
<h3>Some other content</h3>
Related
I have a SQL Table result.
ProductNumber ProductNumberColorClass OrderNumber OrderNumberColorClass
I am trying to use Kendo to render this information. Basically i need the output as
ProductNumber OrderNumber
Data value and Apply Css class( ProductNumberColorClass )
Basically this is a report with a lot of columns. The user can select only the columns that he wants to see.
I am able to render the grid using the examples from the web site. I am not able to apply.
My application is Asp.net mvc application
Update
I will try your feedback. This is my code. Basically i wanted to avoid coding for each column as the list is big around 50 . the report can be customized so the user can hide some columns. .So i used a loop. however in this scenario, the clienttemplate is not work. I am not very sure, if it is a code issue too.
If you can find what is wrong in my code it will help me learn about the issue too.
meanwhileI am going to manually type the columns and add a attribute as visible
#(Html.Kendo().Grid <DataTransferObjects.ViewModels.UserReportDataModel>()
.Name("Grid")
.HtmlAttributes(new { style = "height: 550px;" })
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
)
.Sortable()
.Scrollable(
scr => scr.Height(430)
)
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetReportData", "ShortTermPlanner").Data("AdditionnalParameters"))
.PageSize(20)
.ServerOperation(false)
)
.Columns(columns =>
{
var colIndex = 0;
foreach (var col in Model.lstHeaderInformation)
{
if (col.SqlColumnName == "ProductNumber")
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(false)
.Visible(col.IsVisible)
.Width(1190)
.ClientTemplate("<div style='background-color:red; text-align:center;width:70px'> #= ProductNumber # </div>");
}
else
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(true)
.Visible(true)
.Width(300)
.Locked(true)
.HtmlAttributes(new { #class = "selectedRow" });
}
}
})
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
Update 2 Adding the clienttemplate and specifying the column information worked. Thanks
However i am curious, is there a better way where i can loop through a 3 table which defines the column name, title and class that needed to be displayed and applied to my report.
what i am looking is
MY Report -- Select * from Report
My header table Select colname, title, class from reportcoldefinication
so now for each matching colname from reportcoldefinication
and Report. add a col to the grid with the class applied.
You can use the template functionality for columns in the Kendo grid.
columns.Template(#<div class= '#=ProductNumberColorClass #'> #= ProductNumber#<div/>)
Have implemented one in the example in the below link. Its implemented using JQuery but you can use the razor syntax for kendo for achieving the same.
http://dojo.telerik.com/ukIma/3
I am trying to embed a chart in a Kendo Grid Cell, following this example: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template
I have managed to embed the graph in the grid, but I am unable to find a way to bind to row data.
The ViewModel has properties for each bar value - but how do I bind to those properties (maybe some #= ... # expression?).
I expect something similar to this:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.DataID).Filterable(false);
columns.Template(#<text></text>).ClientTemplate(
Html.Kendo().Chart()
.Name("chart#=DataID#")
.Series(series =>
{
series.Bar("\\#= FirstBarValue \\#");
series.Bar("\\#= SecondBarValue \\#");
})
.ToClientTemplate().ToHtmlString()
);
})
.DataSource(dataSource => dataSource.Ajax().PageSize(20).Read(read => read.Action("Read", "Grid"))))
But the FirstBarValue and SecondBarValue are not properly evaluated, although DataID is. Maybe a different scope? I can only make it work with hard coded values.
Any suggestions?
I have an ASP.NET MVC Telerik Grid (not Kendo). I have a grid with two columns. The first column is a drop down list of items I can select from, and the second column is just an editable textbox.
I want to set the first column to READ ONLY on edits, meaning I can only edit the second column but not the first column. I set the first column to read only in both the model ([ReadOnly] tag in the model class) and in the view (i.e. Editable(false)).
When I do this, I'm not allowed to edit the first column in edit mode like I want. However, when I go to insert/create a new record... the first column is blank and I can only enter values for the second column.
I've tried everything and looked around, but couldn't find a solution.
try this :
model.Field(p => p.Name).Editable(false)
Example:
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Sortable(false).Visible(false);
columns.Bound(p => p.Name);
columns.Bound(p => p.Notes);
columns.Command(command => { command.Edit(); }).Width(172);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
.Model(model => {
model.Id(p => p.Id);
model.Field(p => p.Name).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "Grid"))
)
)
Ref: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/configuration#model
I had a similar issue with a text field. I solved it by hooking the Edit event.
#Html.Kendo().Grid<MyViewModel>()...Events(e => e.Edit("onGridEdit"))
<script type="text/javascript">
function onGridEdit(e) {
if (!e.model.isNew())
e.container.find('input#ID').prop('disabled', true);
}
</script>
In this example I wanted my ID field to be unchangeable after it's created. Your mileage and jQuery may vary, but I suspect the solution would be similar.
TL;DR;
If you are using grid template columns, keep the EditItemTemplate empty as follows:
<telerik:GridTemplateColumn DataField="opt_id" UniqueName="opt_id" DataType="System.Int32">
<ItemTemplate>
<telerik:RadLabel Text='<%# DataBinder.Eval(Container.DataItem, "opt_id") %>' runat="server" />
</ItemTemplate>
<EditItemTemplate></EditItemTemplate>
</telerik:GridTemplateColumn>
So by using above, when entered into edit mode, the item will still be read only.
I recently migrated a web application from Telerik Mvc to Kendo UI,
but I'm running into a snag that I'm not too sure how to modify since
I've been learning more about and getting used to Kendo UI the past week.
Here is the problem I'm running into. The error states:
The call is ambiguous between the following methods or
properties: 'System.Linq.Enumerable.Where<Model_OpenAccess_AssetMgr.Custody>
(System.Collections.Generic.IEnumerable<Model_OpenAccess_AssetMgr.Custody>,
System.Func<Model_OpenAccess_AssetMgr.Custody,bool>)'
and 'System.Linq.Enumerable.Where<Model_OpenAccess_AssetMgr.Custody>
(System.Collections.Generic.IEnumerable<Model_OpenAccess_AssetMgr.Custody>,
System.Func<Model_OpenAccess_AssetMgr.Custody,bool>)'
And the code where the error is occurring is below:
#model List<Model_OpenAccess_AssetMgr.Custody>
<div id="AssetDescription" class="detailContainer detailContainer3">
<header class="sectionheader" > Custodians </header>
#(Html.Kendo().Grid(Model.Where(x=>x.Active==true))
.Name("grd_Admin_Custodians")
.HtmlAttributes(new { #class = "ItemsGrid" })
.ToolBar(commands => commands.Create())
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.Custody_PK))
)
.DataSource(dataSource => dataSource
.Server()
.Read(read => read.Action("AdminHome", "Admin", new { view ="Custodies" }))
.Create("Create", "Admin", new { id = 0, view = "Custodies" })
.Update("Save", "Admin", new { view = "Custodies" })
.Destroy("Delete", "Admin", new { view = "Custodies" }))
.Columns(columns =>
{
columns.Bound(o => o.Custody_Name).Width(200);
columns.Bound(o => o.Custody_Dept).Width(150);
columns.Bound(o => o.Custody_eraider).Width(130);
columns.Bound(o => o.Custody_Type).Width(130);
columns.Bound(o => o.Custody_Email).Width(220);
{
commands.Edit();
commands.Destroy();
}).Width(210);
}
)
.Scrollable(scrolling => scrolling.Enabled(true)}
.Scrollable(scrolling => scrolling.Height(550))
.Pageable()
.Sortable()
)
</div>
)
(Model.Where(x=>x.Active==true) is what is being flagged.
Now, I also have a warning listed at the top underneath
#model List that states:
ASP.NET runtime error: Method not found 'Void
System.Web.Razor.RazorEngineHost.set_EnableInstrumentation(Boolean)'
Which I'm quite certain is interconnected with the error I'm getting.
Do I need to modify the Model.Where() statement somehow?
What do you think I should use instead for Kendo UI?
On another note I recently upgraded this web application project from MVC3 to MVC4
so I don't know if that has anything to do with this or not. But I wanted to go ahead
and let you know of that fact as well.
I've looked at other responses but it appears no one has asked about this for Kendo UI specifically.
Thanks!
It looks to me like you are mixing Server side rendering and Ajax rendering. If using Server side rendering of your grid, you should perform the Where(x=>x.Active==true) filtering in your Model (preferably) or in the Controller Action (less ideal) that uses this view. Not in the view.
If using an Ajax to get the data, say for a paged grid, your datasource needs a read method like
.Read(read => read.Action("Custodians", "Admin"))
I have a kendo UI grid which is similar to this
#(Html.Kendo().Grid<MyViewModel>()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound(a => a.column1);
columns.Bound(a => a.column2;
}
.Pageable(page => page.PageSizes(true))
.Scrollable(src => src.Height("auto"))
.Sortable()
.Filterable()
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.Events(e =>
{
e.DataBound("onDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetMyList_Read", "MyController"))
)
)
The datasource on this grid is loaded from "GetMyList_Read" action upon page load. I have a filter which works by pushing filter parameters into the kendo builtin filters. And it works fine. I want to do search on the serverside code to improve performance, instead of loading the whole data to the client side and filter. Also one of the search parameters require searching a new DB table evertime search is performed so having a server side filer will help a lot.
You can just alter your read action to include
.Read(read => read.Action("GetMyList_Read", "MyController").Data("AddFilters"))
Then add some JavaScript to populate you filters something like this:
<script>
Function AddFilters()
{
Return { filter: "some value");
}
</script>
Then just alter your read action to accept the additional parameter.
Eg public jsonresult GetMyList_Read([DataSourceRequest] DataSourceRequest request, string filter)
Hopefully this gives you enough to work with but if you need a more complete example let me know and I will post something a bit more complete