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.
Related
I am unable to get edited control value from telerik jquery grid row. I am using .net core telerik kendo grid
#(Html.Kendo().Grid(Model.LedgerEntries)
.Name("LedgerEntries")
.ToolBar(tools => tools.Create().Text("Add New Voucher Row"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.ACCNT_CODE).Title("Account Code").ClientTemplate("#= ACCNT_CODE #" +
"");
columns.Bound(p => p.TRANS_AMT).Title("Debit").HtmlAttributes(new {
#id = "TRANS_AMT" }).ClientTemplate("#= TRANS_AMT #" + "");
columns.Bound(p => p.TRANS_AMT).Title("Credit").ClientTemplate("#= TRANS_AMT_1 #" +
"");
columns.Bound(p => p.BASE_AMOUNT_1).Title("Base Amount
Debit").HtmlAttributes(new { #id = "BASE_AMOUNT_1"
}).ClientTemplate("#= TRANS_AMT_1 #"
+"");
columns.Bound(p => p.BASE_AMOUNT_1).Title("Base Amount
Credit").ClientTemplate("#= TRANS_AMT_1 #" + "");
columns.Bound(p =>
p.DESCRIPTION).Title("Narration").ClientTemplate("#= DESCRIPTION #" +
"");
columns.Command(command => command.Destroy()).Width(100);
columns.Command(command => command.Edit()).Width(100);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.TRANSROWID);
model.Field(p => p.TRANSROWID).Editable(false);
model.Field(p => p.ACCNT_CODE).Editable(true);
model.Field(p => p.TRANS_AMT).Editable(true).DefaultValue(0);
model.Field(p => p.TRANS_AMT_1).Editable(true).DefaultValue(0);
model.Field(p => p.BASE_AMOUNT_1).Editable(true).DefaultValue(0);
model.Field(p => p.DESCRIPTION).Editable(true).DefaultValue("");
})
.ServerOperation(false)
.Batch(true)
.Events(e => e.Error("error_handler")
.Change("onChange"))
)
)
script:
function onChange(e) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
Error:
Create:315 Uncaught Type Error: this.select is not a function
at init.onChange (Create:315:35)
at init.trigger (kendo.all.js:309417:87)
at init._process (kendo.all.js:309417:87)
at init.success (kendo.all.js:309417:87)
at Object.success (kendo.all.js:309417:87)
at init.read (kendo.aspnetmvc.js:1052:87)
at kendo.all.js:309417:87
at init._queueRequest (kendo.all.js:309417:87)
at init.read (kendo.all.js:309417:87)
at init.query (kendo.all.js:309417:87)
According to telerik's official documentation, the select method will not trigger the change event. Maybe this is the reason why this.select is not accepted. You can refer to the code in it.
Another possibility is that you need to select a value by default to correspond to the this.select function before letting the grid load.
Hope this can help you.
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.
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}");
}
I have an MVC razor form with a Kendo grid. The grid has an asynch image uploader.
#(Html.Kendo().Grid<CraftStore.Models.Catalog>()
.Name("CatalogGrid")
.Columns(columns =>
{
columns.Bound(p => p.CatalogName).Filterable(true).Width(240);
columns.Bound(p => p.CatalogDescription).Filterable(true).Width(340);
columns.Bound(p => p.ModelNumber).Filterable(true).Width(110);
columns.Bound(p => p.SerialNumber).Filterable(true).Width(110);
columns.Bound(p => p.InventoryCount).Filterable(true).Width(110);
columns.Bound(p => p.WebPrice).Title("Price").Format("{0:C}").EditorTemplateName("Currency").Width(110);
columns.Bound(p => p.ImagePath).ClientTemplate("<img height='80' src='" + Url.Content("~/Content/Images/catalog/Products/") + "#=data.ImagePath#' title='#=data.ImagePath#' alt='#=data.CatalogName#' />").EditorTemplateName("Image").Title("Picture").Width(300);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to"))
.ForNumber(num => num.Clear()
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.IsGreaterThan("Greater than")
.IsLessThan("Greater than"))
))
.Navigatable()
.Selectable(selectable => selectable.Type(GridSelectionType.Row))
.Scrollable(scrollable =>
{
scrollable.Virtual(true);
scrollable.Height(400);
})
.Events(events =>
{
events.Change("change");
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
}
)
.Events(events =>
{
events.Error("error_handler");
})
.Create("CatalogEditing_Create", "WebCatalog")
.Read("CatalogEditing_Read", "WebCatalog")
.Update("CatalogEditing_Update", "WebCatalog")
.Destroy("CatalogEditing_Destroy", "WebCatalog")
)
)
All work fine! - the image has a tooltip of the filename...
The upload and remove work great...
I have an edit template for image (image.cshtml in Views/Shared/EditorTemplates)
The template is:
#model string
<div style="width:100%">
<div class="section">
#Html.TextBoxFor(model => model, new {#class="k-textbox result-box" })
#(Html.Kendo().Upload()
.Name("files")
.Events(events=>events.Success("OnUploadSuccess"))
.Multiple(false)
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
</div>
</div>
The OnUploadSuccess js function (which is defined on the razor view) has the success function
<script type="text/javascript">
//file upload scripts
function getFileInfo(e) {
return $.map(e.files, function (file) {
var info = file.name;
// File size is not available in all browsers
if (file.size > 0) {
info += " (" + Math.ceil(file.size / 1024) + " KB)";
}
return info;
}).join(", ");
}
function OnUploadSuccess(e) {
$(".result-box").value = getFileInfo(e);
Model = getFileInfo(e);
}
all works fine - the variable 'Model' does get the correct filename.
Now...
How do I get that filename value returned by getFileInfo(e) to be the current value for the grid column???
I thought 'Model' would work, but it does not.
Model = getFileInfo(e);
//since this is in a template, I thought it would bind 'Model' to the column
Then, you can see above, in OnUploadSuccess, I also thought it could be done by using jQuery :
$(".result-box").value = getFileInfo(e);
The jQuery does find and set the value, but the row's member named ImagePath never gets the resulting value.
Neither work, and I'm not sure how to get the returned filename to be the column value.
Any help appreciated.
UPDATE:
Well, I've updated the OnUpdateSuccess js function:
var fn = getFileName(e);
$("#ImagePath").val(fn)
And this now updates the field - but this is not saving when you tab out of the field or immediately hit save. In either care, the old value is restored.
How do I get it to stay? I imagine this is where the MVVM binding will help?
After working with the amazing support from Telerik, I was right - it's a binding issue because the MVVM doesn't know about my change. To get it to know about my change I need to add a line after the script change above:
$("#ImagePath").trigger("change");
Now, it works perfectly!