iam using kendo ui for MVC and iam trying to build dynamic
table (each time others columns will show)
can u please tell me if its possible to populate grid columns only with certain conditions
something like this :
columns.Bound(c => c.a).Title(ViewBag.SearchBy+" id").HtmlAttributes(new { #class = "search_by_id" });
columns.Bound(c => c.b);
if(1>0)
{
columns.Bound(c => c.c).Title("Conversions");
columns.Bound(c => c.d).Title("Conversion rate").Format("{0:p1}"); ;
}
thank u
You can easily use an if statement when creating columns:
if (someCondition)
{
columns.Bound(c => c.c).Title("Conversions");
}
else
{
columns.Bound(c => c.d).Title("Conversion rate").Format("{0:p1}");
}
Related
I have one template for the grid which I used in two places and grids have a different id's of course.
#(Html.Kendo().Grid(Model.Equipment)
.Name(string.Format("equipmentGridReview-{0}", DateTime.Now.Ticks))
.Columns(columns =>
{
columns.Bound(c => c.Quantity).Title("Qty");
columns.Bound(c => c.ItemName).Title("Item / Billing Code");
columns.Bound(c => c.ItemId).Title("Item#");
columns.Bound(c => c.Disposition).Title("Disposition");
columns.Bound(c => c.InvLoc).Title("Inv Loc");
columns.Bound(c => c.EqLoc).Title("Eq Loc");
columns.Bound(c => c.UnitPrice).Title("Unit Price").Format("{0:c}");
columns.Bound(c => c.Completed).Title("Completed");
})
.Sortable()
.Resizable(resize => resize.Columns(true))
.Events(e => e.DataBound("someModule.onDataBoundToGrid"))
.Reorderable(reorder => reorder.Columns(true))
.Selectable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
Here is my js module
function getEquipmentGrids() {
var grids = [];
$.each($("[id|='equipmentGridReview']"), function(idx, element) {
grids.push($(element).data("kendoGrid"));
});
return grids;
}
function onDataBoundToGrid() {
setCommonDateSource(this);
}
function setCommonDateSource(newGrid) {
$.each(getEquipmentGrids(), function(idx, grid) {
if (grid !== newGrid && grid.dataSource !== newGrid.dataSource) {
newGrid.setDataSource(grid.dataSource);
}
});
}
And when I switching between I get an error. First Array(1) I get when I first upload tab first time, second [init, init] I get when I switching between tabs.
It seems you are setting the dataSource of the second grid in the first's dataBound event. This could lead to some unintended behavior.
The good news is you don't need to do anything special for two components to share a dataSource. As you can see on the example at https://demos.telerik.com/aspnet-mvc/datasource/shared-datasource , a grid and an AutoComplete simply are passed the same dataSource, and it just works. Both will dynamically reflect any changes made to the data. The same will work for two grids, or any two widgets that have linear data.
I have a grid bind to SignalR hub on what's down
#(Html.Kendo().Grid<MyDownloader.Core.ViewModel.DownloaderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.LocalFile);
columns.Bound(c => c.FileSize);
columns.Bound(c => c.StatusMessage);
columns.Bound(c => c.Progress);
columns.Bound(c => c.Left);
columns.Bound(c => c.Rate);
columns.Bound(c => c.CreatedDateTime);
columns.Bound(c => c.State);
columns.Bound(c => c.ResourceLocation);
columns.Command(c => c.Destroy());
})
.HtmlAttributes(new { style = "height: 550px;margin-bottom:20px;" })
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.SignalR()
.AutoSync(true)
.Events(events => events.Push("onPush"))
.Sort(s => s.Add("FileSize").Descending())
.Transport(tr => tr
.Promise("hubStart")
.Hub("hub")
.Client(c => c
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))
.Server(s => s
.Read("read")
.Create("create")
.Update("update")
.Destroy("destroy"))).Schema(schema => schema
.Model(model =>
{
model.Id("FileSize");
}))
))
I want to update all client when an object added to database (Downloader Table)
I call read() client method out side the hub like this
var context = GlobalHost.ConnectionManager.GetHubContext<Hubs.DownloadrHub>();
context.Clients.All.read();
but read() method not raised and grid not refresh and Data not update
How can update all client grid out of the Hub?
Usually you don't call the read method on the client. You call the create, update or delete method. Depending on the action performed. The grid handles it automagically.
E.g. Clients.All.update(new { Data = whateveryourdatais );
Have a look at the telerik examples.
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")));
Below is the code that I am using in a modal Box, I am able to see data, but Clienttemplate which will be conditional based is not getting applied.
#(Html.Kendo().Grid<DrillThruData>
(#Model.SCRDrillThru.Child)
.Name("childDrillThru")
.Scrollable()
.Columns(columns =>
{
columns.Bound(c => c.FDSSecurityCUSIPIdentifier).ClientTemplate("<a href='" + #Url.Action("Toggle", "Access") + "/#: ProviderId #" + "'>Toggle...</a>");
columns.Bound(c => c.FDSPoolNumber);
columns.Bound(c => c.FDSSecurityBalance);
columns.Bound(c => c.FDSCollateralLookThroughAllocationPercent);
})
)
Finally I was able to get it work, here is the solutionFor those who wants to know#(Html.Kendo().Grid<DrillThruChild>
()
.Name("childDrillThru")
.Scrollable()
.Columns(columns =>
{
columns.Bound(c => c.FDSSecurityCUSIPIdentifier).ClientTemplate("# if (FDSPoolNumber == 'SCRB') { #" +
"<a href='#= FDSSecurityCUSIPIdentifier #'>#= FDSSecurityCUSIPIdentifier #</a>" +
"# } else { #" +
"<a id ='cusipLink' href='\\#' onclick = 'return showDifferenceIssuerLink()' >#= FDSSecurityCUSIPIdentifier #</a>" +
"# } #"); columns.Bound(c => c.FDSPoolNumber);
columns.Bound(c => c.FDSSecurityBalance);
columns.Bound(c => c.FDSCollateralLookThroughAllocationPercent);
})
And yes you can't dynamically create Kendo Grid using Model and then apply Client Template. I have to use ajax call.
If you need, drop a pm to me and will share whole solution.
I have the following markup.
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(key => key.Id))
.Columns(columns =>
{
columns.Bound(c => c.FullNameWithEmail).ClientTemplate("<#= FullNameWithEmail #>").Title("Name and Email").Width(230);
columns.Bound(c => c.Notes);
})
.ClientEvents(events => events.OnRowDataBound("grid_onRowDataBound"))
.DetailView(checkInAppGridDetails => checkInAppGridDetails.ClientTemplate("<# if (RelatedCount > 0) { #>" +
Html.Telerik().Grid<ViewModel>()
.Name("GridDetails_<#= Id #>")
.Footer(false)
.Columns(columns =>
{
columns.Bound(c => c.FullNameWithEmail).ClientTemplate("<#= FullNameWithEmail #>").Title("Name and Email").Width(225);
columns.Bound(c => c.Notes);
columns.Bound(c => c.Actions).ClientTemplate("<#= Actions #>").Width(150);
})
.ClientEvents(events => events.OnRowDataBound("GridDetails_onRowDataBound"))
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("GetRelated", "Controller", new
{
id = #ViewBag.EventKey,
ticketId = "<#= Id #>"
}))
.ToHtmlString() +
"<# } #>"
))
)
What i have here is that i am binding the main grid with Ajax call, and once rows got bound the details view gets bound with the DataBinding ajax call.
I already have in the Model a collection for the related records i wanted to show in the DetailView, i don't want the extra call to the server.
here is an example of the ViewModel
public class ViewModel
{
public string FirstProperty {get; set;}
.
.
.
public IEnumurable<ViewModel> RelatedRecords { get; set; }
}
Any idea how to bind the whole Grid with the DetailView with only single Ajax request?
Just used telerik support example to fix this, and it worked very well.Telerik Post