or
1 answer
102 views
Hello, I have a problem with integrating the Kendo().Stepper() into my application. When I tried to add it in, the progress meter does not align with each point. Any idea of what causes this and how can I solve this?
Eyup
Telerik team
answered
on
13 Jun 2023
0 answers
110 views
Hello, I have a grid I am using to display detail info on a view. The columns .ClientTemplate logic works fine in a View.
However, the client wants the detail view to be displayed as a Modal Window over the summary listing. I have this working as a PartialView however the logic in the .ClientTemplate does not work in the Modal windows.
This is the working Code in the view. The highlighted section is the ClientTemplate that DOES NOT work when rendered as a PartialView in the Modal window.
@(Html.Kendo().Grid(Model.claimDetails)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Ln).ClientTemplate(
"# if (Ln == '0') { #" +
"Total Chrg" +
"# } else { #" +
"Line #= Ln #" +
"# } #"
);
columns.Bound(p => p.Chrg).Format("{0:C}").Title("Charge");
columns.Bound(p => p.IncurFrm).Format("{0:MM/dd/yyyy}").Title("Svc Date").Width(130);
columns.Bound(p => p.ProcRev).Title("Proc/Revenue Code").Width(130);
columns.Bound(p => p.OCAllowed).Format("{0:C}").Title("OC allow").Width(130);
columns.Bound(p => p.OCPaid).Format("{0:C}").Title("OC Paid").Width(130);
columns.Bound(p => p.BenAmt).Format("{0:C}").Title("Benefit Amt.").Width(130);
columns.Bound(p => p.OCDedAmt).Format("{0:C}").Title("OC Ded").Width(130);
columns.Bound(p => p.CoInsurDed).Format("{0:C}").Title("Ded Amt").Width(130);
columns.Bound(p => p.CoInsur1).Format("{0:C}").Title("Coins Amt 1").Width(130);
columns.Bound(p => p.Copay).Format("{0:C}").Title("CoPay Amt");
columns.Bound(p => p.RemarkCd).Title("Remark Cd");
columns.Bound(p => p.InElig).Format("{0:C}").Title("Tot Inelig Amt");
columns.Bound(p => p.PdClmnt).Format("{0:C}").Title("Pd to Ins");
columns.Bound(p => p.PdProv).Format("{0:C}").Title("Pd to Prov");
})
.HtmlAttributes(new { style = "height: 600px;" })
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
0 answers
85 views
I would like if the grid rows and columns be horizontally aligned. IE rotated 90 degrees. Is this possible?
thanks
1 answer
260 views
Hello all,
I have a view that contains a Kendo Grid. The grid is bound to the model, and the model is a ClaimsViewModel. The view model contains a List<Claims> and the grid is bound to the list. This currently displays a list of claims and seems to be working. I want the UI user to be able to select a single claim(row) and then view that claim detail on a detail view. I have the row selection set to single, I have the change event set to javascript that should be able to pull the claimno, and send that to an action that would pass the value to the detail view.
However, the row selection is not firing. Please help.
This is the claims View
@using ProviderPortal.ViewModels;
@using Kendo.Mvc.UI
@model ClaimsViewModel
@{
ViewBag.Title = "SearchClaims";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@(Html.Kendo().Grid(Model.Claims)
.Name("Grid")
.Events(events => events.Change("itemselected"))
.Columns(columns =>
{
columns.Bound(p => p.ClaimNo).Title("Claim #").Width(130);
columns.Bound(p => p.ServiceDt).Title("Incurred From-To").Width(150);
columns.Bound(p => p.TotalCharge).Title("Total Charge").Width(130);
columns.Bound(p => p.TotalPaid).Title("Pd Amt").Width(130);
columns.Bound(p => p.Name).Title("Patient Name").Width(230);
})
.Scrollable()
.Selectable(selectable => selectable
.Enabled(true)
.Mode(GridSelectionMode.Single)
)
.PersistSelection(true)
.Navigatable()
.HtmlAttributes(new { style = "height: 700px;" })
.DataSource(dataSource => dataSource
.Server()
.Model(m => { m.Id(p => p.ClaimNo); })
)
)
<script type="text/javascript">
function itemselected(e) {
var selectedRow = this.select();
var dataItem = this.dataItem(selectedRow);
var id;
id = dataItem.ClaimNo;
window.location.href = "@Url.Action( "Claims", "DisplayClaim")" + "?ClaimID=" + id;
}
</script>
Here is the Controller
public class ClaimsController : Controller
{
// GET: Claims
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult SearchClaims(string FromDt, string ToDt, string PatAcct, string policynumber, string GrpNo, string ClientCode, string ProvTaxID)
{
CIAWebService.CIAServiceClient wref = new CIAWebService.CIAServiceClient();
var viewModel = new ClaimsViewModel();
try
{
if (String.IsNullOrEmpty(ProvTaxID)) { ProvTaxID = Session["ProvTaxId"].ToString(); }
var MMDarray = wref.MemberLookup("P", policynumber, "G", null, null, null, null);
if (MMDarray.Length > 0)
{
Session.Add("MemberData", MMDarray[0]);
var claimHeader = wref.ClaimHeader(Int32.Parse(MMDarray[0].SeqNum), MMDarray[0].DependentCode, MMDarray[0].DB, GrpNo, "C", null, DateTime.Parse(FromDt), DateTime.Parse(ToDt), ProvTaxID);
for (int i = 1; i < claimHeader.Length; i++)
{
if (claimHeader[i].PatAcct == PatAcct)
{
viewModel.Claims.Add(BuildClaimsModel(MMDarray[0], claimHeader[i]));
}
}
}
}
catch (Exception Ex)
{
Log4.Error("ClaimsController - SearchClaims:", Ex);
ViewBag.ErrMessage = "Error: " + Ex.ToString();
}
HttpContext.Session.Add("ClaimsList", viewModel.Claims);
return View(viewModel);
}
}
and here is the view model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ProviderPortal.ViewModels
{
public class ClaimsViewModel: BaseViewModel
{
public List<ClaimData> Claims { get; set; }
public ClaimsViewModel()
{
Claims = new List<ClaimData>();
}
}
}0 answers
141 views
Hello,
I'm wondering if it's possible to bind a grid to a dynamic or anonymous model when performing a DataSource update operation. In this case, I've got a dynamic grid that is built off a DataTable. The grid is setup for in-cell editing and when I save the changes (i.e. perform the update), I wonder if there's a way to have it bind to an anonymous model for processing inside the Update controller method. Currently I can view the updated records as a FormCollection, but an anonymous model would make it easier for processing. Please advise whether it's possible, or if there's a better way to handle the updates.
Here's sample view code:
@(Html.Kendo().Grid<dynamic>()
.Name("grdCombined")
.ToolBar(toolBar =>
{
toolBar.Save();
})
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.gridTable.Columns)
{
if(column.ColumnName == "UUID" || column.ColumnName.ToLower().Contains("_uuid")) { continue; }
if(column.ColumnName == "Name") { var cn = columns.Bound(column.ColumnName).Width(200).Filterable(ftb => ftb.Multi(false).Search(true).Enabled(true)).Title(column.ColumnName); continue; }
if(column.ColumnName.EndsWith("_Date")) { var cd = columns.Bound(column.ColumnName).Width(200).Format("{0: MM/dd/yyyy}").Title(column.ColumnName).EditorTemplateName("Date"); continue; }
if(column.ColumnName.EndsWith("_Comment")) { var cd = columns.Bound(column.ColumnName).Width(200).Title(column.ColumnName).EditorTemplateName("String"); continue; }
var c = columns.Bound(column.ColumnName).Width(200).Title(column.ColumnName);
}
})
.Editable(ed=>ed.Mode(GridEditMode.InCell))
.Navigatable()
.Scrollable(s=>s.Virtual(true))
.DataSource(ds => ds
.Ajax()
.Model(model =>
{
var m_id = Model.gridTable.PrimaryKey[0].ColumnName;
model.Id(m_id);
foreach (System.Data.DataColumn col in Model.gridTable.Columns)
{
var m_field = model.Field(col.ColumnName, col.DataType);
if(col.ColumnName == m_id || col.ColumnName == "Name")
{
m_field.Editable(false);
}
}
})
.Read(read=>read.Action("GridCombined_Read","Home", new { pUUID = Model.UUID }))
.Update(update=>update.Action("GridCombined_Update","Home", new { pUUID = Model.UUID})))
)
And here's the sample Update controller method:
public ActionResult GridCombined_Update([DataSourceRequest] DataSourceRequest request, FormCollection pGC, Guid pUUID)
{
// TODO: process the update
return Json(m_Service.GridCombined_Update(pGC, pUUID).ToDataSourceResult(request));
}
David
Top achievements
Rank 1
Rank 1
updated question
on
08 Jun 2023
1 answer
277 views
I am using the Image Browser https://demos.telerik.com/aspnet-mvc/editor/imagebrowser on my Razor pages.
How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?
I have a preview container where the max-width I am allowed to see the preview is 650px.
but when on ImageBrowser--> Insert Window --> I have a list of uploaded images --> if i am selecting images below max size but resolution is above 650px the images on preview are too stretched out.
I know we have an option to set the width n height when inserting but how do I auto set it before I hit insert button?
I am thinking to use this:
<script>
$(document).ready(function () {
// Attach a click handler to the ImageBrowser tool of the Editor.
$(".k-i-image").click(function () {
setTimeout(function(){
// Attach a select handler to the Upload embedded in the ImageBrowser.
$(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
// Prevent the event if the selected file exceeds the specified limit.
if (e.files[0].size > 1048576) {
e.preventDefault();
alert("Maximum allowed file size: 1MB");
}
// Check image resolution and limit width if necessary.
var img = new Image();
img.src = URL.createObjectURL(e.files[0].rawFile);
img.onload = function() {
if (img.width > 550) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// Calculate new height while maintaining the aspect ratio.
var ratio = 550 / img.width;
var newHeight = img.height * ratio;
canvas.width = 550;
canvas.height = newHeight;
// Draw the image on the canvas with the adjusted dimensions.
ctx.drawImage(img, 0, 0, 550, newHeight);
// Convert the canvas content back to a Blob object.
canvas.toBlob(function (blob) {
// Replace the original file with the resized image file.
e.files[0].rawFile = blob;
}, e.files[0].type);
}
};
});
});
});
});
</script>
Anton Mironov
Telerik team
answered
on
08 Jun 2023
1 answer
206 views
I am using the Kendo Editor Image Browser from : https://demos.telerik.com/aspnet-mvc/editor/imagebrowser.
Where I have hidden/removed the
1. Home icon
2.New Folder
3. Delete
4. Arrange By
5. Web Address
6. Alternate Text
using css on my local.
Is there any way to customize this without CSS?
Anton Mironov
Telerik team
answered
on
08 Jun 2023
1 answer
168 views
In the UI for ASP.NET MVC build 2023.1.425 build we are seeing an odd behavior where there is a duplicate sort icon on the column that we have set as the initial sort in the grid datasource definition section (ref 1st screenshot). In comparing the generated HTML for the UI for ASP.NET MVC and UI for ASP.NET CORE (both 2023.1.425) where both have the same grid datasource initial sort set there is a variance between the HTML generated/shown for the header column in that an extra "k-icon-sort" span tag is being added (ref and compare 2nd and 3rd screenshots). The grid datasource default sort column is defined as ".Sort(x => x.Add("EmployeeName").Ascending())" and the grid Sortable configuration is defined as ".Sortable(s => s.SortMode(GridSortMode.SingleColumn))" in either of our ASP.NET MVC or ASP.NET CORE projects so that is not a variance and both use the the "classic-silver.css" theme so that too is not a difference so my only thought is that the generation of HTML or applying of style classes on sort action (via some kendo-xxx.js file?) is the difference and the reason why the MVC version shows the dupe icon but not the CORE version.
Eyup
Telerik team
answered
on
08 Jun 2023
1 answer
178 views
Hi
I use a Kendo window and load the content through AJAX from a partial view.
The partial view contains Kendo controls such as DropDownList, ContextMenu, etc.
How can I remove all the controls (destroy all UI, events, etc.) inside the partial view when I close the Kendo window
1 answer
251 views
Hello,
we recently upgraded Kendo mvc.net asp from 2018.3 to 20323.1. Now the fonts for the Kendo controls are all much smaller than they were previously. Is there a way to set the font globally? I can see I can set the font size per control but I'd rather nit have to go and set that for every control use.
Thanks
Phil.
Eyup
Telerik team
answered
on
07 Jun 2023
