How to not bind the values at grid load - asp.net

my code is :
#(Html.Telerik().Grid<Model>()
.Name("TestGrid")
.ClientEvents(events =>
{
events.OnDataBound("validate");
events.OnDataBinding("onDataBinding");
})
.DataBinding(db => db.Ajax()
.Select("Action1", "Controller1", new { ldata, filter }).Enabled(true)
)
.Columns(c =>
{
c.Bound(ctl => ctl.Uname)
.ClientTemplate("<input type='radio' id='rdbutton'name='IsSelected'/>")
//.ClientTemplate("<input name='<#= UserName #>' type='radio' />")
.Title("").Filterable(false).Sortable(false).Width(5);
c.Bound(itm => itm.Fname).Title("FName").Width(200).HtmlAttributes(new { #style = "vertical-align: top !important;" });
c.Bound(itm => itm.LNAme).Title("Lname").Width(200).HtmlAttributes(new { #style = "vertical-align: top !important;" });
c.Bound(itm => itm.Location).Title("Location").Width(200).HtmlAttributes(new { #style = "vertical-align: top !important;" });
})
.Selectable()
.Sortable()
.Filterable()
.Pageable(pg =>
{
pg.PageSize(3);
})
)
Columns are binded since they need to retrieve the values when search.

Yo mate,
First suggestion - use the Kendo MVC Grid - there you have an option called AutoBind which you can set to false.
If you definitely want to use the old Grid - use the OnDataBinding event and prevent it the first time.
e.g.
var isFirst = true;
function onGridDataBinding(e){
if(isFrist)
{
isFirst=false;
e.preventDefault();
}
}

Related

Dynamically add button to Kendo UI Grid MVC

i created a simple web app in .net MVC that contains a simple input textbox and a grid (showing some DB data).
#(Html.Kendo().Grid<Z.ViewModels.ZViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Number);
columns.Bound(c => c.AddedDate);
columns.Bound(c => c.ProcessingMessageText);
columns.Bound(c => c.ProcessedDate).
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Home"))
.PageSize(20)
)
)
Now i need to add another feature to this page ... if there is no value (" ") in ProcessedDate display a Button with som custom functionality (call an action from controller with parameter from Number column), else display the value.
Is this possible ?
I tried something like thisClientTemplate("# if (ProcessingMessageText =='') {# <button>do stuff</button> #} else if (ProcessingMessageText !='') {# ProcessedDate <#}# ");
}).Events(e => e.DataBound("onDataBound")) but it didnt worked.
I have a function to change the rows color ... but i dont know how to access the column values...
function onDataBound(e) {
var grid = this;
var currentRecords = grid.dataSource.view();
for (var i = 0; i < currentRecords.length; i++) {
//currentRecords[i] is the current dataItem
if (currentRecords[i].ProcessingMessageText == "Finished") {
grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSucess");
}
if (currentRecords[i].ProcessingMessageText == "Sent") {
var row= grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowSent");
}
else if (currentRecords[i].ProcessingMessageText == "Error") {
grid.tbody.find("tr[data-uid='" + currentRecords[i].uid + "']").addClass("rowError");
}
}
}
Thanks for any help
Using a template column that calls your MVC action and passes a parameter(number) is fairly straight forward. This example creates a bootstrap button to call my controller and pass it the parameter named 'number' using kendo hash tag syntax. Carefull with the single vs double quotes.:
columns.Template(t => { }).Title(string.Empty).Width(40)
.ClientTemplate(#"<a href='" + Url.Action("MyAction","MyController") + "?number=#= Number#' class='btn btn-info btn-xs' title='Modify this item'>Edit</a>");
You would need to add your if statement to show the date if the field is not empty, otherwise show the button.

How to change Kendo Excel Button Content Text

I have a Kendo grid which has Excel export function. It produces a" Export to Excel" texted button and i want to change its text like "Send to Excel".
#(Html.Kendo().Grid(Model).ToList())
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(p => p.BirimAd).Title("Birim").Width(500);
columns.Bound(p => p.SehirAd).Title("Şehir").HtmlAttributes(new { style = "text-align:center" }).Width(200);
columns.Bound(p => p.Value).Title("Value").HtmlAttributes(new { style = "text-align:center" }).Width(200);
//columns.Bound(p => p.Avg).Title("Avg").HtmlAttributes(new { style = "text-align:center" }).Width(200);
})
.ToolBar(tools => tools.Excel())
.Sortable()
.Excel(excel => excel
.FileName("Rapor.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Report"))
)
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Excel_Export_Read", "Report"))
)
)
and excel button is producing like that:
<button class="k-button k-button-icontext k-grid-excel"><span class="k-icon k-i-excel"></span>Export to Excel</button>
I am trying this css:
<style>
.k-button k-button-icontext k-grid-excel
{
content:"Send to Excel";
}
.k-icon k-i-excel
{
content:"Send to Excel"
}
</style>
But it looks like same text. How can i change it?
Using custom command and calling export via javascript api
Razor :
.ToolBar(tools => tools.Custom("Export").Text("Send to Excel").Click("exportExcel"))
Javascript:
function exportExcel() {
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
});
I override the text in bound event:
#(Html.Kendo().Grid(Model)
Events(eventes => {
eventes.DataBound("bound");
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Test.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("TestExcel", "Export"))
)
then in bound event:
<script>
function bound(e) {
...
$(".k-grid-excel").html('<span class="k-icon k-i-excel"></span>Exportar a Excel');
}
I think the API has changed over the years, below code works for me in 2019
.ToolBar(tb => tb.Excel().Text("Any Text") )

Is it possible to hide/show Kendo grid column based on user role?

I am using Kendo ui grid in asp.net MVC. Is it possible to hide/show grid column based on user role? Thanks
The simplest way is:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id);
columns.Bound(p => p.Name);
if(User.IsInRole("Admin")) {
columns.Bound(p => p.AdminOnlyInfo);
}
})
...
)
You can specify if a column is visible using hidden, so one option may be to set a variable based on the users role. For example, in the controller
ViewBag.CanDisplay = true; // or omit if the user does not have permission
and in the view
var canDisplay = '#ViewBag.CanDisplay' | false;
$("#grid").kendoGrid({
columns: [
{ field: "firstProperty" },
{ field: "anotherProperty", hidden: !canDisplay }
],

How to access KendoUI Grid selected row Hash Template(KendoUI) value in KendoUI Tabstrip

I am using kendoUI Detail view template, as shown in the image
When i click on on each row it opens a tabstrip and displays all the data stored in the ViewData for e.g
The main grid Code is shown Below,
#(Html.Kendo().Grid<EnvironmentPOCO>()
.Name("Grid")
.Columns(columns =>
{
//columns.Bound(d => d.EnvironmentID).Visible(false);
columns.Bound(d => d.EnvironmentName).Width(200).Title("Environment Name");
columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("Environment Code").EditorTemplateName("_EnvironmentCodeDropDown");
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["MyServers"], "ServerID", "ServerDetailsProperty").Width(300).Title("Server Details").EditorTemplateName("_ServerDropDown");
columns.ForeignKey(d => d.ProjectID, (List<SynergyProjectPOCO>)ViewData["MySynergyProjects"], "ProjectID", "ProjectDetailsProperty").Width(400).Title("Project Details").EditorTemplateName("_ProjectNameDropDown");
columns.Command(d =>
{
d.Edit();
d.Destroy();
}).Width(200).Title("Action");
}
)
.ToolBar(tools => tools.Create())
.Sortable()
.Pageable()
.Filterable()
.Navigatable()
.Sortable(sortable => sortable.AllowUnsort(false))
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Events(events => events.DataBound("dataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
})
.Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
.Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
.Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
)
)
I have a viewdata which have all the details i want to show in the tabstrip, but what i want is it should only display the data only related to the rows selected ServerID....there should be a if check in for loop for e.g if(//above grid ServerID==viewdata ServerID display that row of view data).But i dont know how to access the above grid value in the tabstrip and how to use if in cshtml razor engine. See the if check which is not working in Tabstrip code is shown below
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("Logins")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Contact Information").Content(#<div>
<ul>
#for (var i = 0; i < viewDataServer.Count; i++)
{ //How to get the Top Grid ServerID value here in **if**
#if("#=ServerID"==viewDataServer[i].ServerID.ToString())//#=ServerID should be the selected main grid serveridvalue
{
<li><label>LoginID:</label>#viewDataServer[i].LoginID.ToString()</li>
<li><label>ServerID:</label>#viewDataServer[i].ServerID.ToString()</li>
<li><label>UserID:</label>#viewDataServer[i].UserID.ToString()</li>
<li><label>Password:</label>#viewDataServer[i].passwd.ToString()</li>
}
}
</ul>
</div>);
})
.ToClientTemplate())
</script>
In case any one else have this issue, here is the solution.
The detail template of the Grid is a client template, which means that all content customizations depending on the master row must be managed from the client. Currently the TabStrip uses server-side logic that relies on a parameter (ServerID), which is available only on the client, that's why the server logic does not work as expected.
You need to populate the TabStrip via an Ajax request, which will pass the ServerID
items.Add().Text("Contact Information")
.LoadContentFrom(Url.Content("~/controller/action/?ServerID=#=ServerID#"));
http://demos.telerik.com/aspnet-mvc/tabstrip/ajax
For more advanced customization that require manual coding, you can use the Grid's detailInit event, as shown here:
http://demos.telerik.com/kendo-ui/grid/detailtemplate

Change password box to disabled

How can I change the password box to disabled.
#Html.Editor("password")
something like
Html.TextBoxFor(model => model.User, new {disabled = "disabled"})
You're close. You have to prefix your attributes with #:
Html.TextBoxFor(model => model.User, new { #disabled = "disabled" })
You can read only text box using Html Attributes
#Html.TextBoxFor(model => model.User, new { #readonly="readonly",
style = "width:80%;" })

Resources