Questions on UI for ASP.NET MVC Forum

1 answer

132 views

After updating nuget package, Grid's "Select All" checkbox only selects the first row

We recently updated our nuget reference for "Telerik.UI.for.AspNet.Core" to Version="2023.2.606", and the Select All checkbox stopped working. (It only selects the first row)

It works using Version="2020.2.617"

Here is one of our grids:

            <div class="table table-responsive" style="background-color:#444547">
                @(Html
                    .Kendo()
                    .Grid<ViewModelRedacted>()
                    .Name("grdUnitsList")
                    .Columns(columns =>
                    {
                        columns.Select().Width("20px");
                        columns.Bound(c => c.Id).Hidden(true);
                        columns.Bound(c => c.Name).Title(UnitsController.NameColumn);
                    })
                    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                    .ColumnMenu()
                    .ToolBar(tool => tool.Excel())
                    .Excel(ex => ex
                    .FileName("Units.xlsx")
                    .Filterable(true)
                    .AllPages(true)
                    )
                    .Navigatable()
                    //.Scrollable()
                    .Pageable()
                    .Filterable()
                    .Sortable(sortable =>
                    {
                        sortable.SortMode(GridSortMode.SingleColumn);
                    })
                    .Resizable(resize => resize.Columns(true))
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(model => model.Id(p => p.Id))
                    .ServerOperation(false)
                    .Read(read => read.Action("GetUnits", "Units"))
                    )
                    )
</div>

Grid

answered on 14 Jun 2023

0 answers

176 views

How to bind dropdownlist in MVC grid, but from underlying model

Hi,

From this Model :

publicclassMyRowData
{
   public int Id { get; set; }
   public SelectList Values { get; set; }
   public string Value { get; set; }
}

publicclassMyGridData
{
   public IEnumerable<MyRowData> Rows { get; set; }
}

I want to bind my model to a grid in view like :

 @(Html.Kendo.Grid(Model.Rows)
	.Name("myGrid")
	.Columns(c =>
	{
		c.Bound(i => i.Id).Visible(false);
		c.ForeignKey(t => t.Value, t => t.Values); //Here is the bind for drop downlist (différent for each row
                                                           //And how can achieve this ?
	})
	.Navigatable()
	.Scrollable()))

Thanks for help

DropDownList

Grid

asked on 13 Jun 2023

0 answers

147 views

Issue with bulk edit in Dynamic Kendo grid

Hi ,

I am using Telerik.UI.for.AspNet.Core version 2020.3.915

I have created dynamic kendo grid using jquery. my model will vary depending in columns from db. So I am gettign the data as json from DB and creating my grid. i am able to achieve it, But when I try to edit the column values, I am unable to call the controller mthod with proper values from UI. I wanted to do batch edit. But when I use the below code , my controller is getting called multiples times for each edit. Also ,t he value passed is not a proper array. It is in Json format . but looks like { Steer_ID:23,SteerMaximun:34,.......} . Please hepl me to send all the row values that are edited in jason format to the comtroller.

js:

UI:

Controller:

[HttpPost]
public IActionResult UpdateSnapShot( string steerData)
{
try
{
if (accessType.ToString() == AccessType.ReadWrite.ToString() ||
accessType.ToString() == AccessType.FullAccess.ToString())
{
JObject json = JObject.Parse(steerData);
dynamic snap = JArray.Parse(steerData);
//dynamic dynJson = JsonConvert.DeserializeObject(steerData);
MarginSteerSnapShot snapShot;
for(int i = 0; i < snap.Count; i++)
{
snapShot = new MarginSteerSnapShot();
dynamic snapData= snap[i];
snapShot.KPI_CLASS_GROUP_DISPLAY_NAME = snapData.KPI_CLASS_GROUP_DISPLAY_NAME;

}
//foreach (JProperty property in json.Properties())
//{
// string propertyName = property.Name;
// JToken propertyValue = property.Value;
// snapShot=new MarginSteerSnapShot();
// //get the comments for the site.
// // create object for Model and assign the values based on property name
// // compare property name and assign in comment list.
// // Now you can use the property name and value as needed
// Console.WriteLine($"Property Name: {propertyName}");
// Console.WriteLine($"Property Value: {propertyValue}");
//}
//if (records != null && ModelState.IsValid)
//{
// records.All(model =>
// {
// db.UpdateSnapShot(model);
// _logger.LogInformation("Margin & Steer snapshot updayed {0}", JsonConvert.SerializeObject(model));
// return true;
// });
//}

try
{
db.execSP();
}
catch (Exception ex)
{
_logger.LogError("Error while updating snap shot- Margin & Steer Page {0}", ex.Message);
}
}
//return Json(records.ToDataSourceResult(request, ModelState));
return Json(new SnapShotViewModel() { });
}
catch (Exception ex)
{
_logger.LogError(ex.ToString());
return Json(ex.Message);
}
}

Grid

asked on 13 Jun 2023

1 answer

113 views

ASP.NET MVC Stepper Design Issue

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?

Stepper

answered on 13 Jun 2023

0 answers

119 views

Grid column .ClientTemplate not working in Modal Window

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

Grid

asked on 12 Jun 2023

0 answers

89 views

Can the Kendo Grid Columns be Horizontally Aligned

I would like if the grid rows and columns be horizontally aligned. IE rotated 90 degrees. Is this possible?

thanks

Grid

asked on 09 Jun 2023

1 answer

287 views

Grid Selection event not firing

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

Grid

answered on 09 Jun 2023

0 answers

161 views

Bind dynamic grid update to dynamic or anonymous model

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

General Discussions

Grid

updated question on 08 Jun 2023

1 answer

296 views

How do I add a feature to auto check for the Image resolution and set it to custom, when uploading the stored Image using Image Browser on Kendo Editor

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>

Editor

ImageEditor

answered on 08 Jun 2023

1 answer

240 views

How to customize the tools inside the Upload window on Image browser from Kendo Editor

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?

Editor

ImageEditor

answered on 08 Jun 2023