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>();
		}
	}
}

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));
}

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>

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?

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.

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

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.

Hi,

I am working on making application CSP complaint using  UI for ASP.NET MVC R1 2023 SP2 (version 2023.1.425).

Grid column is having ClientTemplate which is causing grid to be empty. This was working prior.

Below is the code snippet:

.ClientTemplate("<a target='_blank' href=" + @Url.Action("ReportRouter", "Reports") + "?reportId=#=ReportId#>#=DisplayName#</a>");

Developer tool is showing Invalid template error. I have also added 

@(Html.Kendo().DeferredScriptFile())

Any input is appreciated.