Questions on UI for ASP.NET MVC Forum

4 answers

147 views

I have a kendo form with two drop down list editors.

How can I from Javascript set the selected value of one of the drop downs.

Both drop downs are using server side filtering .

There is a possibility that the value i need to set is not in the already pulled data , but it is guaranteed to be in the full datasource.

Any direction would be appreciated.

    @(Html.Kendo().Form<KitMasterViewModel>()
        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidationKitMaster", "KitsOverview"), method = "POST" })
        .FormData(Model)
        .Layout("grid")

        .Grid( c => c.Cols(2).Gutter(4))
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(false));
        })
        .Items(items =>
        {
            items.AddGroup()
                .Label("Kit Information")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.SeqKit)
                        .Label(l => l.Text("Kit Number:"));
                    i.Add()
                        .Field(f => f.DateSchedule)
                        .Label(l => l.Text("Date Required"));

                    i.Add()
                        .Field(f => f.KitQty)
                        .Editor(E =>
                        {
                            E.NumericTextBox<int>()
                                .HtmlAttributes(new {style = "text-align:right" })
                                .Format("N0");
                        })
                        .Label(l => l.Text("Kit Quantity:"));

                    i.Add()
                        .Field(f => f.PickOrder)
                        .Label(l => l.Text("Pick Order:"))
                        .Editor(E => {
                            E.DropDownList()
                                .DataTextField("Text")
                                .DataValueField("Value")
                                .BindTo(new List<SelectListItem>()
                                {
                                                 new SelectListItem()
                                                 {
                                                     Text="Lowest Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.LowestQty}",
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="FIFO Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.FIFO}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Match Quantity",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.ClosestMatch}"
                                                 },
                                                 new SelectListItem()
                                                 {
                                                     Text="Custom Order",
                                                     Value=$"{(int)InoAutoBusiness.Enums.EPickPackageOrder.Custom}"
                                                 },
                                });
                        });



                    i.Add()
                        .Field(f => f.ID)
                        .Label(" ")
                        .EditorTemplate("<input name='ID' type='hidden' />");
                });

            items.AddGroup()
                .Label("Source")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.IDBom)
                        .Label("Assigned Bill of Material")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .DataValueField("IDBom")
                                .DataTextField("LongName")
                                .HtmlAttributes(new { style = "width:100%"})
                                .Filter("contains")
                                .Events(item => item.Change("BillChanged"))
                                .MinLength(3)
                                .Height(520)

                                .Template("<table><tr><td style='width:200px' >#: data.PartNumber #</td><td style='width:50px'>#: data.Revision #</td></tr></table>")

                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax")
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetBOMMasters", "BillOfMaterial");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });
                                    }
                                );


                        });


                    i.Add()
                        .Field(f => f.IDAVL)
                        .Label("Assigned Constraint")
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .Name("ddlAVL")
                                .HtmlAttributes(new { })
                                .DataTextField("NameAVL")
                                .DataValueField("IDAVL")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Height(520)
                                .MinLength(3)
                                .Filter(FilterType.Contains)
                                .DataSource(
                                    source =>
                                    {
                                        source.Custom()
                                            .ServerFiltering(true)
                                            .ServerPaging(true)
                                            .PageSize(80)
                                            .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                            .Transport(transport =>
                                            {
                                                transport.Read("GetAVLMasters", "BOMEdit");
                                            })
                                            .Schema(schema =>
                                            {
                                                schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                    .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                            });

                                    }
                                );


                        });
                });

        })
        )

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type='text'], textarea").attr('spellcheck', false);
    });

    function BillChanged(e) {
        var ddl = e.sender; 
        var selectedValue = ddl.value(); 

        $.ajax({
            url: "@Url.Action("GetBOMMasters", "BillOfMaterial",new { id = UrlParameter.Optional, operation = UrlParameter.Optional })" + "/" + selectedValue,
            type: 'POST',
            contentType: 'application/json;',
            data: JSON.stringify({ id: selectedValue }),
            success: function (bom) {
                if (bom.Data.length>0) {
                    var idAVL = bom.Data[0].IDAVL;

                    // I need to set the value of ddlAVL to idAVL here
                    // but i am at a loss to how to do it

                    debugger;
                }
            }
        });
    }

    function NavigateComponents() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new {id=Model.ID, operation = "components"})";
    }

    function NavigateKitInfo() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview",new { id = Model.ID, operation = "info"})";
    }

    function NavigateOverview() {
        location.href = "@Url.Action("KitsOverview", "KitsOverview", new { id = UrlParameter.Optional, operation = UrlParameter.Optional})";
    }

</script>

DropDownList

Form

answered on 21 Apr 2022

2 answers

562 views

Problem editing with multiple instances of same Grid

I am showing multiple instances of the same grid in the same view. And everything works fine except if you try to edit a record on two grids at the same time.

The problem seems to be that the EditorFor elements created when switching to in-line edit mode all end up named the same, so the second set of editors don't work as expected (as-in, the DatePicker doesn't render, I just end-up with a non-formatted date in a regular textbox).

I tried adding an HtmlFieldPrefix to each partial (the helper to create the view is held within a PartialView that's called for each team).

That makes the actual editors render appropriately, but they don't get properly bound to the underlying model (as-in, I can see the datepicker, but it doesn't have the existing value, nor posts back to the model as expected).

As far as the model, the key portion would be with the Date fields, where I have the model decorated so that it shows the appropriate date picker.

The way I'm creating multiple grids is that I loop through a collection of teams and call a helper to create each grid with a separate Id.

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]

[UIHint("Date")]

public DateTime DateStart { get; set; }

@helper TeamGrid(int id)

{

@(Html.Kendo().Grid<KTeam>()

.Name("gridTeam" + id)

.DataSource

(

d => d

.Ajax()

.ServerOperation(false)

.PageSize(20)

.Model(model => {

model.Id(u => u.Id);

})

.Events(events => events.Error("onError"))

.Read(r => r.Action("ReadTeam", "Report").Data("dataTeamId(" + id + ")"))

.Update(u => u.Action("EditTeam", "Report"))

.Sort(sort => sort.Add(s => s.Member).Ascending())

)

.Columns(columns => {

columns.Bound(u => u.Id).Hidden();

columns.Bound(u => u.Member).Width(200);

columns.Bound(u => u.DateStart).Width(120);

columns.Bound(u => u.DateEnd).Width(120);

columns.Command(command => command.Edit()).Width(177);

})

.Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Clear().Contains("Contains"))))

.Sortable(s => s.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))

) }

Grid

updated answer on 21 Apr 2022

1 answer

860 views

MVC Grid not populating from datasource when using AJAX

Hi All,

I am implementing a project based on one of the Telerik
examples as part of learning KendoUI and MVC. It is not going well.

By reviewing the browser console on Firefox 37.0.1 and IE 11
I have resolved all JavaScript errors. All libraries appear to be loading.

The grid populates fine when using server binding but with
Ajax I have the following problem:

If I use this return statement:
return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));
I get a nicely formatted but empty grid.

If I use this return statement:
return Json(result, JsonRequestBehavior.AllowGet);
I get my expected data dumped to the screen but no grid.

The data being returned by the controller looks like this:

{"Data":[{"EmployeeID":"FITS-0001","FirstName":"John","LastName":"Doe","EmailAddress":"jdoe@acme.com","TelephoneNumber":null,"UserID":"johndoe","JobTitle":null,"EmployeeStatus":null}, {"EmployeeID":"FITS-0002","FirstName":"Jane","LastName":"Doe","EmailAddress":"janedoe@acme.com","TelephoneNumber":null,"UserID":"janedoe","JobTitle":null,"EmployeeStatus":null}],"Total":2,"AggregateResults":null,"Errors":null}

My code is below. Any pointers would be greatly appreciated.

Controller -- EmployeeController

using System.Linq;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using TestBagWeb.Models;

using TestBagWeb.DAL;

namespace TestBagWeb.Controllers

{

public class EmployeeController : Controller

{

public ActionResult Employees_JsonRead([DataSourceRequest]DataSourceRequest request)

{

using (TestBagContext employeeData = new TestBagContext())

{

IQueryable<Employee> employees = employeeData.Employees;

DataSourceResult result = employees.ToDataSourceResult(request);

return View("Index", Json(result, "text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet));

//return Json(result, JsonRequestBehavior.AllowGet);

}

View -- Employee/Index

@{

ViewBag.Title = "Test Bag";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@(Html.Kendo().Grid<TestBagWeb.Models.Employee>()

.Name("employeeGrid")

.Columns(columns =>

{

columns.Bound(c => c.EmployeeID);

columns.Bound(c => c.FirstName);

columns.Bound(c => c.LastName);

columns.Bound(c => c.EmailAddress);

columns.Bound(c => c.TelephoneNumber);

columns.Bound(c => c.UserID);

columns.Bound(c => c.JobTitle);

columns.Bound(c => c.EmployeeStatus);

columns.Bound(c => c.FullName);

columns.Bound(c => c.EmployeeName);

})

.Scrollable()

.Sortable()

.Pageable()

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Employees_JsonRead", "Employee"))

)

Regards

Grid

updated answer on 20 Apr 2022

0 answers

126 views

Default value after Databounding on DropDownList

Hi, I need help to set a default value (the value is a filter for my grid) on DropDownList after the databound runs a function.

@(Html.Kendo().DropDownList()
.Name("gridOptionsDDL")
.OptionLabel(@SharedLocalizer[ResourceKeys.NoFilterSelected].Value)
.DataTextField("OptionsName")
.DataValueField("Id")
.AutoBind(false)
.Events(e => e.DataBound("loadStandardFilter").Change("onGridOptionsChange").Open("onGridOptionsDDLOpen"))
.HtmlAttributes(new { @class = "filter-dropdown" })
.DataSource(ds =>
{
ds.Read(read => read.Action("GetGridOptions", "InventoryData").Data("GetGridOptionsGridName"));
})
.ToClientTemplate()

my js-file:

function loadStandardFilter(e) {
var dropDownList = $("#gridOptionsDDL").data("kendoDropDownList");;

dropDownList.select(function (dataItem) {
return (dataItem.Standard === true);
})
dropDownList.trigger("change");
}

DropDownList

asked on 19 Apr 2022

1 answer

146 views

Offline/No Internet server

Hello, I am using Telerik UI for ASP.NET MVC. A server I publish to has no internet connection. How can I have the dropdowns/grid/gantt show up correcting without internet? I have the dlls referenced in the project from the folder, but they do not show up on the offline server.

Here is the error I receive when loading the page on the web:

And here is how I have my Layout view set up.

Thank you for any help.

General Discussions

answered on 12 Apr 2022

1 answer

135 views

RadPivotGrid Percentage of RowsSubTotalsPosition

I'm new to the Telerik/Progressive framework, so please excuse me if I am asking something too obvious.

I have created a RadPivotGrid (code excerpt below and image attached). Whilst this works really well to display an aggregate COUNT and also shows the Row Sub Totals, I am at a loss on how to make the percentages show for the items based on the row sub total.

To give context; this is to display Survey Data. The rows are populated by Question and Answer, and the Columns provides a count on the number of people who answered. e.g.,

What is your favourite colour
Red 10
Blue 20
Total People in RowSubTotal 30

What is your favourite shape
Square 20
Triangle 15
Total People in RowSubTotal 35

What I want to be able to do, is view this by percent based on the row subtotal

What is your favourite colour
Red 33%
Blue 66%
Total People in RowSubTotal 100%

Below is the snippet from RadPivotGrid. I have tried to use TotalFormat-TotalFunction="PercentOfRowTotal" in the PivotGridAggregateField, but this provides a percentage of the whole Grid, not the individual question (RowSubTotal).

Appreciate any help!

<telerik:RadPivotGrid runat="server" ID="RadPivotGridCrossTab" DataSourceID="SqlCrossTab" Skin="Bootstrap" Height="100%"
AllowFiltering="False" ShowColumnHeaderZone="False" ShowDataHeaderZone="False" ShowRowHeaderZone="False" ShowFilterHeaderZone="false" ColumnHeaderTableLayout="Fixed" RowHeaderTableLayout="Fixed" AllowNaturalSort="true">
<SortExpressions>
<telerik:PivotGridSortExpression FieldName="Filters" SortOrder="None" />
</SortExpressions>
<PagerStyle Mode="Slider" ChangePageSizeButtonToolTip="Change Page Size" AlwaysVisible="True" PageSizeControlType="RadComboBox"></PagerStyle>
<ClientSettings EnableFieldsDragDrop="true">
<Scrolling AllowVerticalScroll="true"></Scrolling>
</ClientSettings>
<ConfigurationPanelSettings EnableDragDrop="False" EnableFieldsContextMenu="False"></ConfigurationPanelSettings>
<RowHeaderCellStyle Font-Names="Rubik" BackColor="#3D1A6F" ForeColor="White"></RowHeaderCellStyle>
<ColumnHeaderCellStyle Font-Bold="True" Font-Names="Rubik" BackColor="#3D1A6F" ForeColor="White"></ColumnHeaderCellStyle>
<DataCellStyle Width="250px" Font-Names="Rubik" CssClass="text-center" />
<TotalsSettings RowsSubTotalsPosition="First" RowGrandTotalsPosition="None" ColumnsSubTotalsPosition="None" ColumnGrandTotalsPosition="None"></TotalsSettings>
<Fields>
<telerik:PivotGridColumnField UniqueName="Filters" DataField="Filters"></telerik:PivotGridColumnField>
<telerik:PivotGridRowField UniqueName="Question" DataField="Question" CellStyle-Width="350px"></telerik:PivotGridRowField>
<telerik:PivotGridRowField UniqueName="Answer" DataField="Answer" CellStyle-Width="350px"></telerik:PivotGridRowField>
<telerik:PivotGridAggregateField DataField="Respondent" Aggregate="Count" ></telerik:PivotGridAggregateField>
</Fields>
</telerik:RadPivotGrid>

PivotGrid

answered on 12 Apr 2022

1 answer

169 views

RadioGroup Issue not returning data back to controller.

I have a grid doing edit in a popup. When the popup shows it binds from my model to the fields and all the fields bind and return their data back to the controller for Add/Update except for the RadioGroup it always returns null. It binds fine, just not returns any value to the Controller.

I tried the below:

@(Html.Kendo().RadioGroupFor(model => model.Sex)
.Name("Sex1")
.HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
.Layout(RadioGroupLayout.Horizontal)
.Items(m =>
{
m.Add().Label("Male").Value("Male");
m.Add().Label("Female").Value("Female");
m.Add().Label("N.A.").Value("N.A.");
})

)

I also tried using javascript to force it to update like below.

@(Html.Kendo().RadioGroupFor(model => model.Sex)
.Name("Sex1")
.HtmlAttributes(new { style = "width:200px;", @class = "RequiredField" })
.Layout(RadioGroupLayout.Horizontal)
.Items(m =>
{
m.Add().Label("Male").Value("Male");
m.Add().Label("Female").Value("Female");
m.Add().Label("N.A.").Value("N.A.");
})
.Events(e =>
{
e.Change("Sex_onChange");
})

)

function Sex_onChange(e) {
var sexList = $("#Sex").data("kendoRadioGroup");
sexList.trigger("change");
}

</script>

No matter what I tried my model always returns null for the sex when it hits the controller.

Below is the model.

public class ContactViewModel
{
public Int32 ContactID { get; set; }
[Required]
[MaxLength(255)]
[DisplayName("Display Name:")]
public String DisplayName { get; set; }
[Required]
[MaxLength(10)]
[DisplayName("Sex:")]
public string Sex { get; set; }
}

Grid

RadioGroup

answered on 12 Apr 2022

3 answers

693 views

Kendo dropdown inside upload template not rendering after the first one

I am inserting a kendo dropdown control inside an upload template so that the user can select a document type for each file uploaded. The upload control allows multiple files, it is not async. It works the first time but subsequent files do not render the dropdown, only a text box instead of a dropdown list.

Here's my razor code:

        <div>
            @(Html.Kendo().Upload().Name("upload")
                .Multiple(true)
                .TemplateId("UploadTemplate"))
        </div>

Here's my template:

<script id="UploadTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
            <div><label>Name:</label>#=name#</div>
            <div><label for='NewDoc_Type_DocumentTypeId'>Document Type:</label>
                @(Html.Kendo().DropDownList()
                    .Name("NewDoc.Type.DocumentTypeId")
                    .HtmlAttributes(new { name = "NewDoc.Type.DocumentTypeId", style = "width: 260px;" })
                    .BindTo(DocumentTypes())
                    .DataTextField("DocumentTypeText")
                    .DataValueField("DocumentTypeId")
                    .Events(e => e.Select("TypeSelected")).ToClientTemplate()
                )
            </div>
        <div style='display: none;' id='divTypeOther'>
            <label for='NewDoc_TypeOther'>Document Type - Other: </label>
            <input type='text' name='NewDoc.TypeOther' id='NewDoc_TypeOther' />
        </div>
</script>

Also, I want to show a text box of "Other" when the user selects "OTHER" from the dropdown. Again, it works on the first one but the ids are the same starting with the second one so it wouldn't work.

Upload

answered on 12 Apr 2022

0 answers

186 views

Uncaught TypeError

m facing this challenge, when i made some upgrades to Kendo UI controls.

kendo.multiselect.min.js:25

Uncaught TypeError: Cannot read properties of undefined (reading 'renderChipList')

at init._tagList (kendo.multiselect.min.js:25:20983)

at new init (kendo.multiselect.min.js:25:1453)

at HTMLSelectElement.<anonymous> (kendo.core.min.js:25:40814)

at Function.each (jquery-1.12.4.min.js:2:2881)

at n.fn.init.each (jquery-1.12.4.min.js:2:846)

at n.fn.init.g.fn.<computed> [as kendoMultiSelect] (kendo.core.min.js:25:40791)

at HTMLDocument.<anonymous> (TrackingTicketInquiry:3590:71)

at i (jquery-1.12.4.min.js:2:27449)

at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2:28213)

at Function.ready (jquery-1.12.4.min.js:2:30006)

General Discussions

asked on 11 Apr 2022

1 answer

227 views

ASP.NET Core Scaffolding

Hi,

I am unable to find ASP.NET Core scaffolding in VS2022. Then I install into VS2019 and result is same. Unable to view Telerik scaffolding. If any one have the idea how to fix it please help me.

Application

General Discussions

Grid

Installer and VS Extensions

answered on 06 Apr 2022