Questions on UI for ASP.NET MVC Forum

1 answer

114 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

124 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

125 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

223 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

92 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

107 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

1 answer

758 views

Unable to find version '2013.3.1119' of package 'KendoUIWeb'

Was this package recently removed from nuget ??

https://api.nuget.org/v3b.2013.3.1119' is not found on source 'https://api.nuget.org/v3/index.json'.)

Indeed it does not show up when seraching:

Application

answered on 13 Sep 2022

0 answers

264 views

Kendo.Mvc.UI package not found

i am getting the error when i use @html.kendo()

it showing are you missing any directives

>please suggest any solution

Installer and VS Extensions

asked on 12 Sep 2022

1 answer

122 views

Default form submit not working

Hi ,I am basically new to Telerik. I am trying to use a layout form in my view. but it is not posting data to the database. I did debugged all of my controllers and models so they are working fine, something is wrong in the view itself and I can't figure out what. Please help!!!!!!!!

This is all of my view (Create):

@model WeighmoreSouth32Web.Models.Site
@using Kendo.Mvc.UI
@{
    ViewData["Title"] = "Create";
}

<h1>Create a Site</h1>


<div class="demo-section">

    <div id="validation-success"></div>
    
    @(Html.Kendo().Form<WeighmoreSouth32Web.Models.Site>()
        .Name("exampleForm")
        .HtmlAttributes(new { action = ("Create"), method="POST"})
        .Items(itemss =>
        {
            itemss.AddGroup().Layout("grid").Grid(g => g.Cols(3).Gutter(20)).Label("Personal Info").Items(items => { 
                   items.Add()
                        .Field(f => f.Name)
                        .Label(l => l.Text("Name:"));
                    items.Add()
                        .Field(f => f.Code)
                        .Label(l => l.Text("Code:"));
                    items.Add()
                        .Field(f => f.ABN)
                        .Label(l => l.Text("ABN:"))
                        .Hint("Hint: enter numeric/space characters only."); 
                        items.Add().ColSpan(3).Field(f => f.Description)
                        .Label(l => l.Text("Description:"))
                        .Editor(e => e.TextArea().Rows(2));
                        });
            })

    )
    
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

    @section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Form

answered on 09 Sep 2022

1 answer

127 views

DatePickerFor scrolls page to top when trying to select date each time

Hi,

I am trying to work with datepickerfor, and coming across a strange behavior. Every time I try to select a month year or date, the page scrolls to the top and I have to come to the bottom of the page again to select the date.

Here is the code snippet for reference (it is a partial view).
Can anyone help, on how to get rid of this behavior.

@model ARGUS.Domain.ViewModel.VM_QualityCheckAdminUI
<div class="card" id="QCDetails">
<div class="card-header sub-detail"><b>Quality Check Answer Details</b></div>
<div class="card-body" id="QCDetailsBody">
<div class="alert alert-danger alert-dismissible d-none msgErr">
<button type="button" class="btn-close" data-bs-dismiss="alert" id="closeBtnError"></button>
<p id="errorMessage">
<ul id="ErrorList">

</ul>
</p>
</div>
<table id="Category Details" width="100%" style="border-color:white">
<Set of other code snippets, other table rows>
<tr>
<td>
<b>Effective Start Date:<span><i class="bi bi-asterisk" style="color:red;font-size:9px"></i></span></b>
</td>
<td>
@*@Html.Kendo().DatePicker().Name("datepicker").Format("dd-mm-yyyy").HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" });*@
@Html.Kendo().DatePickerFor(m => m.EffectiveStartDate).Format("dd-MMM-yyyy").Value(Model.EffectiveStartDate.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" })
</td>
</tr>
<tr>
<td>
<b>Effective End Date:</b>
</td>
<td>
@Html.Kendo().DatePickerFor(m => m.EffectiveEndDate).Format("dd-MMM-yyyy").Value(Model.EffectiveEndDate == null ? "" : Model.EffectiveEndDate.Value.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class="dateEntryDisabled" })
</td>
</tr>
</table>
</div>

</div>

<style>
.txtdisabled {
background-color: #F0F0F0 !important;
color:grey !important;
}
</style>
importing scripts at the end

Date/Time Pickers

answered on 09 Sep 2022