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.
Related
// would like to access Id value not the string being passed, so I expect 1 in my method not "#: Id #"
.ClientTemplate(ABFront.Model.MethodTest("#: Id #"));
Kendo()
.Grid<Model>()
.Name("AB")
.Columns(columns =>
{
columns.Bound(p => p.ID);
columns.Bound(p => p.Name)
.ClientTemplate(ABFront.Model.MethodTest("#: Id #"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadPeople", "Person"))
)
So I've got a grid that I believe is all set up correctly. I've confirmed that the data is coming through, and I've even checked that the AJAX call returns a success with the "ToDataSourceResult" JSON data.
Unfortunately, the only problem is that the data doesn't display. This seems to only be an issue on read, as update, create and delete all work. Just can't retrieve the list of all items afterwards.
My controller action looks like this:
public IActionResult Blog_Read([DataSourceRequest] DataSourceRequest request)
{
var blogs = _blogService.GetPosts().Select(post => new BlogPostModel
{
Id = post.Id,
Title = post.Title,
Author = post.Author,
ShortDescription = post.ShortDescription,
Contents = post.Contents,
LastSaved = post.LastSaved,
Published = post.Published,
PublishedOn = post.PublishedOn
});
var result = blogs.ToDataSourceResult(request);
return Json(result);
}
And my Grid View looks like this:
#(Html.Kendo().Grid<BlogPostModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Title);
columns.Bound(p => p.Author).Width(120);
columns.Bound(p => p.LastSaved).Width(120);
columns.Bound(p => p.Published).Width(120);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style= "height:600px;"})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("Blog_Create", "BlogAdmin"))
.Read(read => read.Action("Blog_Read", "BlogAdmin"))
.Update(update => update.Action("Blog_Update", "BlogAdmin"))
.Destroy(update => update.Action("Blog_Delete", "BlogAdmin"))
)
.Deferred()
)
The correct JSON is returned, no javascript errors in the console, so I'm a little confused as to what this could be. Any help would be greatly appreciated.
I solved this by adding
services.AddMvc().AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
to my Startup.cs ConfigureServices method.
In this Kendo grid demo :
http://demos.telerik.com/aspnet-mvc/grid/selection
I can select mutil rows, but how can I select the text "France" in the first row?
The user probably will need to copy some of the values from the cell, but if I enable the row selection I can no longer select text from cell.
Edit 1:
Something like this:
But I couldn't use mouse to select text in that demo
//Try this out - Kendo grid view
#(Html.Kendo().Grid<Models.ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Title("Product Name");
columns.Bound(p => p.UnitPrice).Title("Price");
columns.Bound(p => p.UnitsInStock).Title("Units");
})
.Pageable()
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))
.Events(events => events.Change("onChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadMethod", "Controller"))
)
)
<script type="text/javascript">
function onChange(arg) {
//arg.sender has all model properties selected
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
//Selected item will have all column properties selected
alert("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
</script>
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 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!