Questions on UI for ASP.NET MVC Forum

6 answers

210 views

Sortable of Kendo UI Grid is not working properly on iPads and other mobile devices

Sortable feature & scrolling on Kendo Grid as shown in Kendo Demo page - https://demos.telerik.com/kendo-ui/grid/drag-drop is not working together on iPad with iOS latest version (iOS 15.6). The scrolling doesn't work if the sortable feature is implemented. Even the Sortable feature is choppy (not working smoothly). It works on desktop browser without any issue.

Grid

answered on 20 Sep 2022

2 answers

155 views

Grid foreign key column doesn't show DDL neither Validation message

Dears

I'm facing this problem: in an MVC Grid, setted with InCell editing, I have a Foreign Key column. When I edit the FK cell the DDL is not showed.

I checked the documentation and for me it is all ok.

Here some details:

[GRID DEFINITION]

@(Html.Kendo().Grid<MCP310.Models.MCP_Detail>()
.Name("Grid_MCP_Detail_" + Model.id)
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Columns(columns =>
{
columns.Bound(c => c.id).Hidden(true);
columns.Command(command => command.Destroy().IconClass("k-icon k-i-delete").Text(" ")).Width(56).MinResizableWidth(56);
columns.Bound(c => c.codiceInterno).Width(200).Sticky(true);
columns.Group(g => g
.Title("A cura del personale Marketing o dei Service Specialist Supervisor")
.Columns(mkss =>
{
mkss.Bound(c => c.descrizione).Width(300);
mkss.ForeignKey(c => c.UMBase, ds => ds.Read(r => r.Action("unitaMisura", "MCPDetailGrid")), "idMSEHI", "descrMSEHL").Width(300);
//mkss.Bound(c => c.UMBase).Width(300);
mkss.Bound(c => c.gruppoMerci).Width(300);
mkss.Bound(c => c.lineaProdotto).Width(300);
mkss.Bound(c => c.codiceTipo).Width(300);
mkss.Bound(c => c.voceCE).Width(300);
mkss.Bound(c => c.codiceValore).Width(300);
mkss.Bound(c => c.gestLottiMatricola).Width(300);
mkss.Bound(c => c.codiceEDMA).Width(150);
mkss.Bound(c => c.nomeFornitore).Width(150);
mkss.Bound(c => c.codiceProdottoFornitore).Width(150);
mkss.Bound(c => c.codiceCategoriaFornitore).Width(150);
mkss.Bound(c => c.pezziConf).Width(150);
mkss.Bound(c => c.infiammabile).Width(150);
mkss.Bound(c => c.ghiaccioSecco).Width(150);
mkss.Bound(c => c.ggMinEntrata).Width(150);
mkss.Bound(c => c.ggMinUscita).Width(150);
mkss.Bound(c => c.UMVendita).Width(150);
mkss.Bound(c => c.rapportoUMBV).Width(150);
mkss.Bound(c => c.royalty).Width(150);
}));
columns.Group(g => g
.Title("A cura del Controllo di Gestione")
.Columns(ctgs =>
{
ctgs.Bound(c => c.costoAcquisto).Title("Costo acquisto").Width(150);
ctgs.Bound(c => c.valutaFatturazione).Title("Valuta di fatturazione").Width(150);
ctgs.Bound(c => c.codValuta).Title("Cod. Valuta").Width(150);
ctgs.Bound(c => c.prezzoMinimo).Title("Prezzo Minimo").Width(150);
ctgs.Bound(c => c.percProvvMinima).Title("% Provv minima").Width(150);
ctgs.Bound(c => c.prezzoSuggerito).Title("Prezzo Suggerito").Width(150);
}));

columns.Group(g => g
.Title("A cura del MKTG o dei SSS")
.Columns(mkss =>
{
mkss.Bound(c => c.costoAcquisto).Title("Costo acquisto").Width(150);
mkss.Bound(c => c.valutaFatturazione).Title("Valuta di fatturazione").Width(150);
mkss.Bound(c => c.codValuta).Title("Cod. Valuta").Width(150);
mkss.Bound(c => c.prezzoMinimo).Title("Prezzo Minimo").Width(150);
mkss.Bound(c => c.percProvvMinima).Title("% Provv minima").Width(150);
mkss.Bound(c => c.prezzoListino).Title("Prezzo Listino").Width(150);
mkss.Bound(c => c.percProvvMassima).Title("% Provv max").Width(150);
}));

columns.Group(g => g
.Title("A cura di AAT")
.Columns(aat =>
{
aat.Bound(c => c.codiceWindSat).Title("Cod. Winsat").Width(150);
}));
columns.Bound(c => c.idStato).Title("Stato").Width(150);
})
.Editable(editable => {
editable.Mode(GridEditMode.InCell);
editable.CreateAt(GridInsertRowPosition.Bottom);
})
.Sortable()
.Scrollable()
.Resizable(resizable => resizable.Columns(true))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.id))
.Read(action => action.Action("Read", "MCPDetailGrid", new { idHeader = Model.id }))
.Create(action => action.Action("Create", "MCPDetailGrid", new { idHeader = Model.id }))
.Update(action => action.Action("Update", "MCPDetailGrid"))
.Destroy(action => action.Action("Destroy", "MCPDetailGrid"))
)
.NoRecords("Nessun prodotto presente")
.Navigatable()
)}

[~/Views/Shared/EditorTemplates/GridForeignKey.cshtml]

@(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
.ValuePrimitive(true)
)

I tried with/without ValuePrimitive and with/without @model object

[Models]

Where the data are used:

[MetadataType(typeof(MCP_DetailMetaData))]
public partial class MCP_Detail: IDisposable
{
private MCPEntities MCPDB = new MCPEntities();

public class MCP_DetailMetaData
{
public int id { get; set; }

public int idMCP { get; set; }

[Required, MaxLength(10), DisplayName("Codice Interno")]
public string codiceInterno { get; set; }

[Required, MaxLength(40), DisplayName("Descrizione")]
public string descrizione { get; set; }

[Required, DisplayName("U.M. Base")]
public string UMBase { get; set; }

[Required, MaxLength(3), DisplayName("Gr. Merci")]

....

Where the data come from:

public partial class MCP_Unita_Misura
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public MCP_Unita_Misura()
{
this.MCP_Detail = new HashSet<MCP_Detail>();
}

public string idMSEHI { get; set; }
public string idMSEH3 { get; set; }
public string idMSEH6 { get; set; }
public string MSEHT { get; set; }
public string descrMSEHL { get; set; }

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<MCP_Detail> MCP_Detail { get; set; }
}

[Other]

The FK exists also in the DB and in the Model

Thanks in advance

Cristian

DropDownList

Grid

answered on 20 Sep 2022

0 answers

99 views

Telerik Editor (in Sitecore) is dropping data-* attributes during pasteHtml() call

I am in the process of creating a custom action for the Editor in Sitecore, which I can see is a Telerik component.

My action builds a <span> tag around selected text containing class, data-toggle, data-target attributes like this:

<span class="myclass" data-toggle="modal" data-target="#targetid">Text</span>

It does this by building the HTML in javascript and calling (editor).pasteHtml() to replace the selected text with the annotated text.

However, I've run into cases where if there's an existing <span> tag in the backing HTML wrapping the text, all of the data-* attributes disappear.

<span style="color: #000000;">My Text</span>
<!-- converts to -->
<span style="color:#000000;" class="myclass">My Text</span>

This only happens when I select the full "My text" string between the span tags; if I select just "Text", it will work fine. This leads me to believe that the editor wants to be smart and consolidate the span tag attributes (Good!) but either skips or ignores the data-* attributes (Boo!)

I have the following questions:

Is this expected behaviour from the Telerik editor, or possibly a customization implemented by Sitecore? (I'm not quite certain how to get the version of the Editor script in use here)
Is there an allow-list type parameter that could be configured on the editor to enable the merging of data-* attributes during the pasteHtml() call?

Thanks in advance!

Editor

asked on 19 Sep 2022

1 answer

126 views

Reading Data from NumericTextBox to contoller

I am having trouble understanding what would be process for either passing a value I have declared in the controller written in CS or capture the data inputted and then bring it to the controller to be used.

NumericTextBox

answered on 16 Sep 2022

1 answer

127 views

Dropdownlist in kendogrid cell is not working fine

Hello,

I have declared a column in a kendo grid as foreignkey, data to be selected is set with as follows:

columns.ForeignKey(mo => mo.CodKit, (System.Collections.IEnumerable)ViewBag.listKitMuestra, "idKit", "Descripcion").Title("Fabricante de Kit").Width(120);

where idKit is an integer and Descripcion is a string var.

The objects presented in kendoGrid have the CodKit field defined as int? and when I Create a row (inline edition used) when save button clicked, the value for CodKit is not sent in the objetct to controller. If is an edition of a row with no value for this field and it´s setted to an option of the dropdownlist, kendoGrid acts as it was not changes in row an even not call to controller. Ignores that column.

Only works if row has yet value for this column when load items from database and you change the value selecting from dropdownlist another value, in this case is sent to controller in the objetct when update button is clicked.

I use incell dropdownlist with int values in several kendoGrids and no problem. But this case with int? is not working correctly or i´m doing something wrong.

Thanks

Best regards,.

DropDownList

Grid

answered on 15 Sep 2022

0 answers

157 views

how to conditionally click a checkbox based on another cells length when the user tabs out or clicks out of a cell

https://stackoverflow.com/questions/73719432/how-to-conditionally-click-a-checkbox-in-telerik-grid-based-on-another-column-in

function onSave(e) 
    {

        //console.log(e.container.find("input[name=eTmfCompletenessComment]").val());

        //if (e.values.eTmfCompletenessComment.length > 3) 
        //{
        //    e.values.eTmfCompletenessActive == true;
        //}
        
        //if (e.container.find("input[name=eTmfCompletenessComment]").val().length > 3) 
        //{
        //    console.log(e.container.uid);
        //    //checkbox cell is in editmode
        //    e.container.find("input[name=eTmfCompletenessActive]").checked == true;
        //    //e.container.item.find("input[name=eTmfCompletenessActive]").checked == true;
            
        //}
       
        $(document).on("keyup", "#eTmfCompletenessComment", function () {
            function dirtyField(data, fieldName) {
                if (data.dirty && data.dirtyFields[fieldName]) {
                    return "<span class='k-dirty'></span>"
                }
                else {
                    return "";
                }
            }

             var commentcheck = $(this).val()
             console.log('$(this).val() =', $(this).val())

                var grid = $('#Grid').data("kendoGrid");
                var items = grid.items();
                if (commentcheck.length > 3) {
                    //var gc = $(this).parents(".k-")
                    $(this).parents(".k-master-row").find('input[type="checkbox"]').prop("checked", true);
                   //items.each(function () {
                        var dataItem = $(this).parents(".k-grid-cell").find('input[type="hidden"]');
                       set.dataItem.dirty = true;
                       dataItem.set(true);
                       dataItem.dirtyField.set(true, eTmfCompletenessActive)

                    //})
                 
                }
            })

        console.log("onSave");
    }

Checkbox

Editor

Grid

asked on 14 Sep 2022

0 answers

136 views

ForeighnKey column in detail template not working

I have a grid, with a nested sub grid using a detail template.

<div class="card">
    <div class="card-body">

        @(Html.Kendo().Grid<SimpleReportMenu.Models.User>
    ()
    .Name("Grid")
      .Events(e => e.Edit("onEdit"))
      .Editable(editable => editable
        .Mode(GridEditMode.PopUp))
    .Columns(col =>
    {
        col.Bound(o => o.ID).Title("ID");
        col.Bound(o => o.UserName).Title("User Name");
        col.Bound(o => o.FullName).Title("Full Name");
        col.Bound(o => o.Admin).Title("Admin?");

        col.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); });

    })

      .ClientDetailTemplateId("subdetailsTemplate")


     .ToolBar(commands => commands.Create())
        .DataSource(ds => ds
        .Ajax()

        .Model(m =>

        {
            m.Id(p => p.ID);
            //m.Field(p => p.ID).Editable(false);



        })


        .Events(e=>e.Error("error"))
        .PageSize(10)
        .Read(rd => rd.Action("RD_Users", "Admin")

        )
        .Create(create => create.Action("InsertUser", "Admin"))
        .Update(update => update.Action("UpdateUser", "Admin"))
        .Destroy(delete => delete.Action("DeleteUser", "Admin"))

        )

        .Pageable(p => p.Refresh(true))
        .Sortable()

        .Filterable()
        )


    </div>





</div>

and

<script id="subdetailsTemplate" type="text/kendo-tmpl">






    @(Html.Kendo().Grid<SimpleReportMenu.Models.UserGroupMapping>()
              .Name("MapGrid_#=ID#")
              .Columns(columns =>
              {
                  columns.Bound(o => o.ID).Title("ID");
                  columns.ForeignKey(p => p.GroupID, (System.Collections.IEnumerable)ViewData["groups"], "ID", "GroupName").Title("Group").Width(200);



                  //columns.Bound(o => o.UserID).Title("User");
                  columns.Command(command => { command.Destroy().Text(" "); command.Edit().Text(" ").UpdateText(" ").CancelText(" "); });

              })
              .Events(e => e.DataBound("gridBind"))
              .ToolBar(tb => tb.Create())
              .Editable(e => e.Mode(GridEditMode.InLine))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
              .Events(e => e.Error(o=>gridTemplateHelper("#=ID#")))
              .Model(m =>
              {
                  m.Id(p => p.ID);
                  m.Field(p => p.ID).Editable(false);

              })
               .Read(read => read.Action("RD_UserGroups", "Admin", new { UserId = "#= ID #" }))
               .Create(u => u.Action("InsertUserDirectorate", "Admin", new { UId = "#= ID #" }))
               .Update(u => u.Action("InsertUserDirectorate", "Admin"))
               .Destroy(u => u.Action("DeleteUserDirectorate", "Admin"))
              )

              .Pageable(p => p.Refresh(true))

             .ToClientTemplate()
             )









</script>

When the foreign key column is not commented out, expanding the record throws the javascript error:-

Uncaught SyntaxError: Invalid or unexpected token
    at eval (<anonymous>)
    at jquery.min.js:2:2668
    at Function.globalEval (jquery.min.js:2:2679)
    at Ha (jquery.min.js:3:21263)
    at n.fn.init.after (jquery.min.js:3:23226)
    at n.fn.<computed> [as insertAfter] (jquery.min.js:3:24511)
    at HTMLAnchorElement.<anonymous> (kendo.all.js:68415:114)
    at HTMLTableElement.dispatch (jquery.min.js:3:12445)
    at r.handle (jquery.min.js:3:9174)

This is confusing, as the same foreign key column works without issues on another page, when not in a template. Also, the same syntax in a nested grid works in another project (using a different verison of the framework). This project is using version 2020.2.513 .

The scripts are loaded by the code:-

 <script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")"></script>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />


    @*<link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />*@


    <link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />


    <link href="@Url.Content("~/Content/BS5/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bs5/bootstrap-icons.css")" rel="stylesheet" />

    <script src="@Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2020.2.513/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2020.2.513/cultures/kendo.culture.en-GB.min.js")"></script>

    <script src="@Url.Content("~/Scripts/BS5/bootstrap.bundle.min.js")"></script>

I'm at a loss to see what the problem is. If you cpould help it would be much appreciated.

Grid

asked on 14 Sep 2022

1 answer

267 views

Links not underlining

Hello,

Simple issue I think.

Here is the grid:

 @(Html.Kendo().Grid<myHinkleyWebApp.Models.PhoneNumberSearch>()
    .Name("include_grid")
    .Columns(columns => {
        columns.Bound(p => p.CustomerNumber).ClientTemplate(
        "<a style='text - decoration:underline' target='_blank' href='" +
            "#= LinkToAccountCard #'" +
            " >#= CustomerNumber #" + "</a>"
    );
        columns.Bound(p => p.OpenOrdersLink).ClientTemplate(
        "<a style='text - decoration:underline' target='_blank' href='" +
            "#= OpenOrdersLink #'" +
        " > Open Orders</a>"
    );
        //columns.Bound(p => p.CustomerNumber);
        columns.Bound(p => p.CompanyName);
        columns.Bound(p => p.CompanyType);
        columns.Bound(p => p.ContactName);
        columns.Bound(p => p.ActiveAccount);
        columns.Bound(p => p.ActiveContact);
        //columns.Bound(p => p.status_override);
        //columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>");
        //columns.Command(command => command.Destroy()).Width(150);
    })
    //.ToolBar(toolbar => {
    //    //toolbar.Create();
    //    toolbar.Save();
    //})
    //.Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    //.Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        //.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); })
        //.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
        .Read("GetPhoneNumbers", "PhoneNumberSearch", new {id = Model.ProneNumberBeingSearched })
    //.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    )
)

Notice the first 2 columns are links.

I cannot get it to underline! Says that its over ruled by

Any help in the code greatly appreciated!

Grid

answered on 14 Sep 2022

1 answer

103 views

Kendo ui mvc

i am getting the kendo.mvc.ui package error

and second question is about my grid is loaded but data is not visible .

Grid

answered on 14 Sep 2022

0 answers

121 views

Media Player (private video & suppress menu)

1. Can Media Player play a youtube video that is behind credentials (a private youtube video)?

2. Is there a way to suppress the popup menu such that commands like "Copy Video URL..." and so fort do not show up. Ideally, I'd like to suppress the popup altogether.

MediaPlayer

asked on 13 Sep 2022