Questions on UI for ASP.NET MVC Forum

2 answers

334 views

Export page as pdf and send it to email attachment

Hi,

I am trying to implement same way as ASP.NET Core PDF Export Key Features Demo | Telerik UI for ASP.NET Core

but Its exporting in client side but it's not going to controller. Don't know what mistake I am doing. Is there a way to send the pad to controller and send it to email attachment. Below is my code.

        $("#btnSubmit").on("click", function (e) {
            e.stopPropagation();
            e.preventDefault();
            var sigval = signature.value();
            $('#lblSearchError').text('');
            if (sigval === undefined || sigval === '') {
                $('#lblSearchError').text('*Signature field is required.');
            } else {
                var data = $("#submitForm").serializeArray();
                var obj = { name: 'signature', value: sigval };
                data.push(obj);

                // Convert the DOM element to a drawing using kendo.drawing.drawDOM
                kendo.drawing.drawDOM($("#mainContect"))
                .then(function (group) {
                    // Render the result as a PDF file
                    return kendo.drawing.exportPDF(group, {
                        paperSize: "auto",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                    });
                })
                .done(function (data) {
                    // Save the PDF file
                    kendo.saveAs({
                        type: 'POST',
                        dataURI: data,
                        fileName: "Provider.pdf",
                        proxyURL: '@Url.Action("Submit", "Provider")'
                    });
                });
            }
        });

I tried proxyURL AND URL none of them worked. When I clicked on submit button it's just downloading the pdf file. But it not hitting controller.

and in controller

        [HttpPost]
        public ActionResult Submit(string contentType, string base64, string fileName)
        {
            //if (!ModelState.IsValid)
            //{
            //    data.Id = 0;
            //    return Json(data, JsonRequestBehavior.AllowGet);
            //}

            //var providerData = portalServices.saveProviderData(data);
            //    return Json(providerData, JsonRequestBehavior.AllowGet);

            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

Drawer

answered on 23 Jun 2023

1 answer

136 views

How to get proper DateTime format for ValueAxis

The Value Axis isn't showing a DateTime like '5/1/2023 10:00 AM' which is the same DateTime format that the data from my stored procedure is using. I'd like the value axis to show each hour of the day.

Attached is a screenshot of the grid. Thanks!

Here's the chart's code:

@(Html.Kendo().Chart<BatchPlantHourlyOutputViewModel>()
.Name("chart")
.Title("Planned Pour Delivery Times vs Actual Pour Delivery Times")
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
)

.DataSource(dataSource => dataSource
.Read(read => read.Action("GetBatchPlantHourlyOutputGraph", "Production")
.Data("PSW.UI.getSelectedInputVals(false)")))
.Events(e => e.DataBound("PSW.Events.Graph.onBatchPlantHourlyOutputGraphDataBound"))

.Series(series =>
{
series.Line(model => model.ScheduledHour)
.Name("Scheduled Time");

series.Line(model => model.StartTime)
.Name("Actual Time");
})

.CategoryAxis(axis => axis
.Categories(model => model.Output)
.MajorGridLines(lines => lines.Visible(true))
)

.ValueAxis(axis => axis
.Date()
.Labels(labels => labels.Format("{0:MM/dd/yyyy hh:mm:ss}"))
.Line(line => line.Visible(false))
)
)

Chart

answered on 22 Jun 2023

2 answers

237 views

TileLayout remove tile not work

Hi,

I created a TileLayout with MVC

@(Html.Kendo().TileLayout()
   .Name("zoneWorkflow").Columns(1)
   .Gap(g => g.Columns(8).Rows(8))
   .Columns(1)
   .Reorderable(true)
   .Resizable(true)
   .HtmlAttributes(new { Title = this.LocalResources("LegendeEtapes") })
   .RowsHeight("auto"))

On the header template I added a button to remove tile with handle to

removeOperationBox(e) { // e is a KendoButton into Header tile
   const itemId = e.sender.element.parents("div[role='listitem']").attr("id");
   const workflow = $("#zoneWorkflow").data("kendoTileLayout");
   const index = workflow.items.findIndex(i => i.id === itemId);
   workflow.items.splice(index, 1);
}

The splice method work perfectly the item was removed from collection. But the relative Tile in the Layout not removed from view. If I repeat the call for button for this tile the index is equal to -1 (because is not in the items collection anymore).

I tried the example of remove from Add / Remove TileLayout but this operation remove all jquery listeners from remaining tiles.

Thanks

TileLayout

answered on 20 Jun 2023

7 answers

1.8K+ views

[Solved] Conditional HTML Properties - How to realize?

Hello Dear Telerik Team!

I want to realize a scenario where Html-Attributes are conditionally applied to cells. In a ClientTemplate it would look like
" #if(BooleanProperty) { <p style=\"MyStyle: MyValue\">#= ValueProperty #</p> } else { <p>#=ValueProperty#</p> } "
My Questions now:
1. Is this possible without using a client template?
2. How exactly must the syntax look like?

I hope you can help me...

brgds
Malcolm

Grid

answered on 19 Jun 2023

1 answer

318 views

Export grid to PDF is not creating page breaks

Hello,

I'm using a Grid control with virtual scrolling. When I export to PDF, the content runs right off of the bottom of the page without breaking to a new page.

I have my datasource's page size set to 100 records to limit the number of times the grid will need to fetch new data from the server. If I change this to only 5 records, for example, then the PDF will create a page break after 5 records. However, I am also using grouping on the data. If every row is in its own group, I can get about 6 or 7 rows onto a page. If every row falls under the same group, I can get about 13-15 rows onto a page. Because the number of rows per page may vary, I can't resort to setting the page size on the datasource.

My main concern at the moment is getting automatic page breaking to work. In the screenshot I've attached, you can see that there is still some data at the very bottom of the page that is cut off. There should be 11 rows of data, across 6 groups, but only 9 rows manage to fit onto the page. Relevant code below:

                .Pdf(pdf => pdf
                    .FileName("BidAwards.pdf")
                    .AllPages()
                    .PaperSize("A4")
                    .Landscape()
                    .AvoidLinks()
                )
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(100)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(col => col.BidId))
                    .Read(read => read.Action("BidAwardGridData", "Reports", Model))
                    .Group(groups => groups.Add(col => col.GroupValue))

                )

I'd also like to find a way to keep entire groups of rows on a page if possible. In other words, if the whole group won't fit on the remainder of the page, break to a new page for that group.

Unfortunately, for the time being I'm stuck on an older version of the Telerik controls, and can't easily update until after this development cycle is completed (unless it's necessary to fix this).

Thanks!!!

Grid

PDFViewer

answered on 14 Jun 2023

1 answer

153 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

223 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

179 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

137 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

152 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