Telerik Forums
UI for ASP.NET MVC Forum
1 answer
133 views
Is there a way to capture events when the user saves or prints the PDF in the viewer? Additionally, is there a way to disable these functions?
Martin
Telerik team
 answered on 24 Jan 2020
1 answer
212 views

I have created a Diagram (using the example from https://demos.telerik.com/aspnet-mvc/diagram) to show a workflow which is great, but i have an issue which im not sure is supported by the Diagram control.

I have a single parent box and then i can have one or more children from the parent, which works fine. If I have two children from the parent I want both children to then link to a single (same) child. I cant seem to be able to link a child to multiple parents. Is this possible?

I've attached an example image to show what's required.

Viktor Tachev
Telerik team
 answered on 24 Jan 2020
3 answers
1.9K+ views

Is there a way to wrap the Header text in the MVC grid?

 I have tried putting a "\n" (new line) and a CHR(13) (carriage return) in the Title attribute and they don't work. Am i missing something or is it just not possible?

 

TIA

Bob Mathis

Petar
Telerik team
 answered on 23 Jan 2020
4 answers
171 views

Hello All!

 

I have a question. I am making a grid and it is going to be connected to our SQL server. It's also going to have Batch Editing as we want our Admins too be able to update just by typing in the grid and not having to hit extra buttons to do it. I have a CRUD made already through ASP.NET.  I'm sure that this will just be the start of the questions, but for now I just need 1 answered! Is it better to go with MVC or Core? 

From what I gathered, MVC is for apps on phones as well as web and Core is strictly web? Or do I have that backwards? Anyway, if you could give me some good advice with which to go about this, I would appreciate it!

David
Top achievements
Rank 1
Veteran
 answered on 21 Jan 2020
3 answers
128 views

I have a SignalR process feeding updates to a viewModel using Kendo's observable.  Everything is working was expected, but I needed to add a confirm popup for the user, and now it's not working as I expect it to.  The singlaR process gets a specific value, in which case I update the javascript viewModel and ask the user a question via the javascript confirm function.  What's happening is the updated viewmodel values aren't displaying on the screen until after the user answers the confirm.  I expected the values on the screen to update before the confirm pops up, but that's not happening.  How can I make it do so?

 

status.on("sendGTNProgress", function (theStats) {
  var statObj = JSON.parse(theStats);
 
  if (statObj.ProcessMessage === "FILE READY") {
    viewModel.set("processMessage", "GTN Report Generated and Ready for Download");
    viewModel.set("processName", "File Name: " + statObj.ProcessName);
    viewModel.set("currentRecMsg", "Your report file is in the appropriate network directory");
    viewModel.set("progressMsg", "@ConfigurationManager.AppSettings["ReportDir"]");
 
    AskToDownload();
  }

});

 
function AskToDownload() {
if (confirm("Do you want to download this file locally?")) {
  window.open("@Url.Action("GetGTNFile", @"GTNReport")?theFile=" + viewModel.get("processName").replace("File Name: ", ""), "_blank");
  }
}
Plamen
Telerik team
 answered on 21 Jan 2020
3 answers
769 views

I'm using Telerik for ASP.NET Core Wrappers, setting culture and format for column.

Display format is correct according to culture, the problem is that when I edit the field, format is always in English culture, with dot separator for decimal. When I save it, it considers the culture and ignore the dot because it is not the culture decimal separator.

Images:

DisplayMode.PNG - Ok

EditMode.PNG - Using dot as decimal separator - Not Ok

DisplayModeAfterChange - 20.6 is recognized as 206

 

Culture:

<script type="text/javascript">
    kendo.culture("@System.Globalization.CultureInfo.CurrentCulture.ToString()");
</script>

 

Column:

columns.Bound(p => p.PrecoDeVenda).Width(120).Format("{0: R'$' #,###,##0.##}")

 

DataSource:

.DataSource(dataSource => dataSource
            .WebApi()
            .Model(model =>
            {
                  ...
            })
            .Batch(true)
            .Culture(System.Globalization.CultureInfo.CurrentCulture.ToString())
            ...
        )

 

DataSource:

columns.Bound(p => p.PrecoDeVenda).Width(120).Format("{0: R'$' #,###,##0.##}")
Daniel
Top achievements
Rank 1
 answered on 20 Jan 2020
1 answer
233 views

I've tried replicating the example code from the Autocomplete demo page, but for some reason the GetOccupations function in the controller is never called, nor can I see that the onAdditionalData function in the cshtml is ever called either.  The dropdown control is produced on the page, but it contains no contents.  I have created as valid ModelView.  Please help me identify the disconnect that I am having here. Thanks!

Index.cshtml:

@model IEnumerable<HanleighEnrollment.Global.Models.CaseOccupation>
@using Kendo.Mvc.UI

@{
    /**/

    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div class="demo-section k-content">
    @*<div class="control-label col-md-4">*@
    <h4>Select an Occupation</h4>
    @(Html.Kendo().AutoComplete()
                  .Name("occupations")
                  .DataTextField("Occupation")
                  .Filter("contains")
                  .MinLength(3)
                  .HtmlAttributes(new { style = "width:50%" })
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetOccupations", "Test")
                              .Data("onAdditionalData");
                      })
                      .ServerFiltering(true);
                  })
    )
    <div class="demo-hint">Hint: type "war"</div>
</div>
<script>
    function onAdditionalData()
    {
        return
        {
            text: $("#occupations").val()  
        };
    }
</script>

TestController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using HanleighEnrollment.Global.Data;
using HanleighEnrollment.Global.Models;

namespace HanleighEnrollment.Admin.Controllers
{
    public class TestController : Controller
    {
        private EfDbService db = new EfDbService();

        // GET: TestController
        public ActionResult Index()
        {
            return View(db.CaseOccupations.AsEnumerable());
        }

        public JsonResult GetOccupations(string text, int caseId)
        {
            var occupations = db.CaseOccupations.Select(occupation => new Global.Models.ViewModels.CaseOccupationViewModel
            {
                OccupationId = occupation.OccupationId,
                CaseId = occupation.CaseId,
                Occupation = occupation.Occupation,
                JobDuties = occupation.JobDuties
            });

            if (!string.IsNullOrEmpty(text))
            {
                occupations = occupations.Where(p => p.CaseId == caseId && p.Occupation.Contains(text));
            }

            return Json(occupations, JsonRequestBehavior.AllowGet);
         }
    }
}

Petar
Telerik team
 answered on 20 Jan 2020
6 answers
2.1K+ views
PDF Viewer is implemented using ASP.NET MVC4.
While watching the demo page, I wrote the following code.

``` index.cshtml
@* scripts for PdfjsProcessing *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>

@* PDF Viewer block *@
<div id="example">
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
        .PdfjsProcessing(pdf =>
        {
            pdf.File(Url.Content($"~/api/PdfViewer/LoadProgress/{progressPdf}"));
        })
    )
</div>
<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>
```

When executed, the PDF Viewer component appears to be working, but the contents are pure white and nothing is displayed.
However, if I click the "Download" button, the file will be saved, and if I open the file, it will have the contents.
Opening the browser's developer tools and looking at the console log showed the following warning:

> Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

Apparently, font processing is not working well.
Where should I set "cMapUrl" and "cMapPacked" ?

Veselin Tsvetanov
Telerik team
 answered on 20 Jan 2020
5 answers
554 views
I have inline edit feature in my kendo grid, i newly introduce Drag and Drop feature for this grid..But after introduced that feature, My inline edit textbox seems like not editable... It might be due to some style changes... Please help me to find the issue....i attach my jquery code to implement the feature of drag and drop

    $.fn.reverse = [].reverse;
    $(document).ready(function () {
        var mainGrid = $("#grid_Task").data("kendoGrid");
        var mainDataSource = $("#grid_Task").data("kendoGrid").dataSource;

        var selectedClass = 'k-state-selected';
        $(document).on('click', '#grid_Task tbody tr', function (e) {
            if (e.ctrlKey || e.metaKey) {
                $(this).toggleClass(selectedClass);
            } else {
                $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
            }
        });

        mainGrid.table.kendoDraggable({
            filter: "tbody tr",
            group: "gridGroup",
            axis: "y",
            hint: function (item) {
                var helper = $('<div class="k-grid k-widget drag-helper"/>');
                if (!item.hasClass(selectedClass)) {
                    item.addClass(selectedClass).siblings().removeClass(selectedClass);
                }
                var elements = item.parent().children('.' + selectedClass).clone();
                item.data('multidrag', elements).siblings('.' + selectedClass).remove();
                return helper.append(elements);
            }
        });

        mainGrid.table.kendoDropTarget({
            group: "gridGroup",
            drop: function (e) {

                var draggedRows = e.draggable.hint.find("tr");
                var target = mainDataSource.getByUid($(e.draggable.currentTarget).data("uid"));
                e.draggable.hint.hide();
                var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
                    dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"));
                
                if (dropLocation.is("th")) {
                    return;
                }

                var beginningRangePosition = mainDataSource.indexOf(dropGridRecord),//beginning of the range of dropped row(s)
                    rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid")));//start of the range of where the rows were dragged from

                //if dragging up, get the end of the range instead of the start
                if (rangeLimit > beginningRangePosition) {
                    draggedRows.reverse();//reverse the records so that as they are being placed, they come out in the correct order
                }

                //assign new spot in the main grid to each dragged row
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid"),
                        itemToMove = mainDataSource.getByUid(thisUid);
                    mainDataSource.remove(itemToMove);
                    mainDataSource.insert(beginningRangePosition, itemToMove);
                });


                //set the main grid moved rows to be dirty
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid");
                    mainDataSource.getByUid(thisUid).set("dirty", true);
                });

                //remark things as visibly dirty
                var dirtyItems = $.grep(mainDataSource.view(), function (e) { return e.dirty === true; });
                for (var a = 0; a < dirtyItems.length; a++) {
                    var thisItem = dirtyItems[a];
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
                };
Alex Hajigeorgieva
Telerik team
 answered on 20 Jan 2020
4 answers
1.1K+ views

Hello,

We have a batch-edit in-cell edit grid with various validation rules. Because it is in-cell, we have manually implemented validation of our rules in the SaveChanges event as can be seen in the following example:

https://feedback.telerik.com/kendo-jquery-ui/1359255-grid-new-row-validation-when-in-cell-edit-mode
https://dojo.telerik.com/OjuViFub

saveChanges: function(e) {
              e.preventDefault();
 
              var grid = e.sender;
              var data = grid.dataSource.data();
              var validationPassed = true;               
 
              data.forEach(function(e, i){
                 
                if(e.dirty || e.id === null) {
                  var uid = e.uid;
                  var row = grid.element.find("tr[data-uid=" + uid + "]");
                  var tds = row.find("td");
 
                  tds.each(function(i, e) {
                    grid.editCell(e);
                     
                    if (grid.editable) {
                      var valid = grid.editable.validatable.validate();
                       
                      if (!valid) {
                        validationPassed = false;
                        return false;
                      }
                    }
                  });
                }
              });
               
              if (validationPassed) {
                grid.dataSource.sync();               
              }
            }
          });

It loops through each cell on save, entering edit mode to render the input, and running the validation on the input. The issue with this is that one of our custom validation rules is that one of two columns are required (i.e.  A XOR B - you must enter a value for one of them, but not both). The issue arises in the fact that the above manual validation loops through each cell, left to right, top row to bottom. 

For reference, here is the custom validation rule:

(function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                AorBRequired: function (input, params) {
                    if (input.is("#ColumnA") || input.is("#ColumnB")){
                        var grid = input.closest(".k-grid").data("kendoGrid");
                        var dataItem = grid.dataItem($(".k-grid-edit-row"));
                        input.attr("data-AorBRequired-msg", "You must enter A or B");
                        //Compare input value of A to dataItem value of B and vice-versa
                        //In-cell grid only allows us to enter edit for one cell at a time thus we cannot compare two inputs directly
                        if (input.is("#ColumnA")) {
                            return !($("#ColumnA").val() === '' && dataItem.ColumnB === null);
                        } else if (input.is("#ColumnB")) {
                            return !($("#ColumnB").val() === '' && dataItem.ColumnA === null);
                        }
                    }
                    return true;
                }
            },
            messages: {
                customrequired: function (input) {
                    return input.attr("data-val-customrequired");
                },
                AorBRequired: function (input) {
                    return input.attr("data-val-AorBRequired");
                }
            }
        });
    })(jQuery, kendo);

 

Because of this, if the user leaves both columns A and B empty, the validation stops on column A (since it appears to the left of B, and the validation reaches it first). Now, the grid is "stuck" in this cell, and the user cannot leave it until they enter a value.

This is problematic, because perhaps the user wanted to enter column B and forgot, but now they are stuck inside the cell for column A. Now they must enter a value for column A so they may leave the cell, cancel all changes, and re-add the record.

Given this information, is there an alternative/work-around to enforce this 'Column A XOR B is required' validation rule whilst using in-cell grid editing with the manual save changes loop logic, which does not result in the described unwanted behaviour?

Andrei
Top achievements
Rank 1
 answered on 17 Jan 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?