Questions on UI for ASP.NET Core Forum

1 answer

186 views

DropDownList all values are undefined values

Hello. I am testing the product. It looks good but I found the first problem and could not resolve it.

I have a dropdown list

<kendo-dropdownlist name="customer" style="width:100%"
                                datatextfield="Text"
                                datavaluefield="Value">
                <datasource type="DataSourceTagHelperType.Custom">
                    <transport>
                        <read url="@Url.Action("GetCustomers", "Home")" />
                    </transport>
                </datasource>
            </kendo-dropdownlist>

I have a method

public JsonResult GetCustomers(string text)
        {
            //var customers = _context.Customers.ToList();

            var color_data = new List<SelectListItem>()
            {
                new SelectListItem() {
                    Text = "Black",
                    Value = "1"
                },
                new SelectListItem() {
                    Text = "Orange",
                    Value = "2"
                },
                new SelectListItem() {
                    Text = "Grey",
                    Value = "3"
                }
            };

            return Json(color_data);
            
        }

But the result is that I have three values in dropdown list but all are with text undefined.
I have tried different scenarios... getting the data from DB or filling the static data like in this example but every time I get three items but undefined in the control...
The object color_data is correctly filled and has all three values...
Thank you for your help.

DropDownList

answered on 17 Feb 2023

1 answer

508 views

Inline gridview editing not working

Hello!

I'm following these docs for inline gridview editing. My situation is a bit different than the doc samples. I've 3 grids on the page and working on adding an inline editing in one of them. Here's the code for that -

 <form novalidate asp-controller="BusinessLines" asp-action="Update" method="post">
                            @(Html.Kendo().Grid<AJG.Cdi.Core.Models.BusinessLinesModel>()
                                .Name("grid2")                            
                                .Columns(columns =>
                                {
                                    columns.Bound(b => b.CdPolicyLineTypeCode).Title("Line Type").Editable("false");
                                    columns.Bound(b => b.EffectiveDate);
                                    columns.Bound(b => b.ExpirationDate);
                                })
                                .ToolBar(toolBar =>
                                {                              
                                    toolBar.Save();
                                })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .Pageable()
                                .Sortable()
                                .Scrollable()                            
                                .HtmlAttributes(new { style = "height:200px;" })
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .Model(model =>
                                {                              
                                    model.Field(p => p.CdPolicyLineTypeCode).Editable(false);
                                })
                                .Update(update => update.Action("Update", "BusinessLines").Type(HttpVerbs.Post))
                                /*.PageSize(5)
                                .Read(read => read.Action("Get", "BusinessLines").Type(HttpVerbs.Get))*/                          
                                ))
                         </form>

I want the above grid to hit BusinessLines\Update endpoint when pressed on "Save Changes", but it's going to the parent page's Action, which is Submissions\Edit. It's defeating the whole setup that I've put in-place.

If I do not refresh the page, it's throwing the errors listed in the 'error-1.png' attached file, while hitting 'Save Changes'

Also, please let me know - how can I get rid of time in the date field (ref: inline-editing-ui.png)?

Grid

answered on 17 Feb 2023

1 answer

733 views

pass parameter or model for ListView to partialView in listView with use ClientTemplateId

hi

i need to pass parameter or model for ListView (not Model Page) to partialView Page in listView with use ClientTemplateId

my code is:

<script type="text/x-kendo-tmpl" id="template">
    @Html.Partial("_myPartialView",new MSG_UserMessagesList_Ex_For_Model  { Name =  #: FileName # });
</script>
@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
                                        .Name("listView")
                                        .TagName("div")
                                        .HtmlAttributes(new { style = "height:100%; width: 100%;" })
                                        .ClientTemplateId("template")
                                        .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(r => r.Url(@Url.Page("MsgList", "MSG_UserMessagesList_Ex")).Data("forgeryToken"))
                                        )
                                        )

plase Help Me

Grid

ListView

answered on 16 Feb 2023

1 answer

220 views

Add ListView with use ClientTemplateId to Main Listview with use ClientTemplateId

Hello
I have a listView to show information from ClientTemplateId("template")
uses and its code:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>

    <div id='myUpload'>

    </div>
</script>

@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
      .Name("listView")
      .TagName("div")
      .ClientTemplateId("template")
      .DataSource(dataSource => dataSource
      .Ajax()
      .Read(r => r.Url(@Url.Page("MsgList", "MSG_UserMessagesList_Ex")).Data("forgeryToken"))
      )
      )

I want another ListView that also uses .ClientTemplateId("templateFileUpload") with code Below :

<script type="text/x-kendo-tmpl" id="templateFileUpload">
    <span class="old message">
        #: FileName #
    </span>
</script>
@(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
        .Name("listViewFileUpload")
        .TagName("div")
        .ClientTemplateId("templateFileUpload")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Url(@Url.Page("MsgList", "FileUpload_Select").Data("forgeryToken"))
        )
        )

I need to add the listview -listViewFileUpload- in inside the <div id='myUpload'> tag </div> but I get an error.

My final code should look like the following, the error I get is because of the internal script tag with the full title
<script type="text/x-kendo-tmpl" id="templateFileUpload">
is.

My final code should be as follows, which gives an error when executed:

<script type="text/x-kendo-tmpl" id="template">
    <span class='newfile'>
        #: FileName #
    </span>

    <div id='myUpload'>
                        <script type="text/x-kendo-tmpl" id="templateFileUpload">
                                <span class="old message">
                                    #: FileName #
                                </span>
                        </script>
                        @(Html.Kendo().ListView<BehniafarTicket.Data.FileUpload_Select_Model>()
                                .Name("listViewFileUpload")
                                .TagName("div")
                                .ClientTemplateId("templateFileUpload")
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .Read(r => r.Url(@Url.Page("MsgList", "FileUpload_Select",new{MessageId=  #: MessageId # }).Data("forgeryToken"))
                                )
                                )

    </div>
</script>

@(Html.Kendo().ListView<MSG_UserMessagesList_Ex_For_Model>()
      .Name("listView")
      .TagName("div")
      .ClientTemplateId("template")
      .DataSource(dataSource => dataSource
      .Ajax()
      .Read(r => r.Url(@Url.Page("MsgList", "MSG_UserMessagesList_Ex")).Data("forgeryToken"))
      )
      )

please help me

ListView

answered on 16 Feb 2023

1 answer

478 views

Make a cascading inline grid edit template for ASP.NET Core

Hello I have searched multiple forum responses on similar issues for this answer seen the cascading dropdown demos and the MVC5 dropdown demo. I can't seem to make my cascading inline grid dropdown recognize the parent object to enable the second dropdown.

I have been able to access the cascade effect when the initial dropdown is not in the grid. So I can make a dropdown that cascades I just cant seem to get it to work in the grid while editing.

Any suggestions? Thanks!

code below

subedit.cshtml

@model CircuitStatus
@(Html.Kendo().DropDownList()
          .Name("subdrop")
          .OptionLabel("Select option")
          .DataTextField("station_name")
          .DataValueField("station_id")
          .DataSource(source =>
            {
                source.Read(read =>
                        {
                            read.Action("station_Read", "CircuitStatus");
                        }).ServerFiltering(true);
            })
        )

cascadedropdowntemplate.chtml

@(Html.Kendo().DropDownList()
          .Name("circuit")
          .HtmlAttributes(new { style = "width:100%" })
          .OptionLabel("Select product...")
          .DataTextField("circuit_name")
          .DataValueField("circuit_id")
          .DataSource(source =>
                  {
              source.Read(read =>
              {
                  read.Action("cirucitBystation_Read", "CircuitStatus")
                      .Data("getSubstationName");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("subdrop")

          )

<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbySubstationName: $("#subdrop").val()
        };
    }
</script>

finally the index.cshtml

<div class="row"><div class="col-12">
        @(Html.Kendo().Grid<QCReview.Models.CircuitStatus>()
                .Name("grid")
                .Columns(columns =>
                {
                columns.Bound(p => p.STATION_NAME).EditorTemplateName("subedit").Filterable(filterable => filterable.Multi(true).CheckAll(true));
                columns.Bound(p => p.CIRCUIT_ID).Title("Circuit ID").EditorTemplateName("cascadedropdowntemplate");
                    columns.Bound(p => p.QA_EXT).ClientTemplate("<input type='checkbox' disabled #=QA_EXT ? checked='checked' :'' # />").Title("QA Ready");
                    columns.Bound(p => p.OMS_READY).ClientTemplate("<input type='checkbox' disabled #=OMS_READY ? checked='checked' :'' # />").Title("OMS Ready");
                    columns.Bound(p => p.INSERT_DATETIME).Format("{0:MM/dd/yyyy}").Title("Insert Date");
                    columns.Bound(p => p.QA_DATETIME).Format("{0:MM/dd/yyyy}").Title("QA Date");
                    columns.Bound(p => p.LAST_UPDATE_DATETIME).Format("{0:MM/dd/yyyy hh:mm tt}").Title("Last Update Date");
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                })
                .Events(events =>
                    events.Edit("edit")
                    )
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable(filter => filter.Extra(false)
                .Operators(operators => operators
                .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                )))
                .Groupable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                .Events(events =>
                {
                    events.Error("error_handler");
                    events.Change("onChange");
                })
        .Model(model =>
        {
            model.Id(p => p.CIRCUIT_ID);
            model.Field(p => p.STATION_NAME).Editable(true);
            model.Field(p => p.CIRCUIT_ID).Editable(true);
            model.Field(p => p.INSERT_DATETIME).Editable(false);
            model.Field(p => p.SUBSTATION_NAME).Editable(true);
            model.Field(p => p.LAST_UPDATE_DATETIME).Editable(false);
    })
    .Create(create => create.Action("CircuitStatus_Create", "CircuitStatus"))
    .Read(read => read.Action("CircuitStatus_Read", "CircuitStatus"))
    .Update(update => update.Action("CircuitStatus_Update", "CircuitStatus"))
    .Destroy(update => update.Action("CircuitStatus_Destroy", "CircuitStatus"))

    )
    )
<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbystationName: $("#subdrop").val()
        };
    }
</script>

DropDownList

Editor

Grid

updated question on 14 Feb 2023

1 answer

117 views

ExpansionPanel: Expand and Collapse event - get reference to sender

Hello,

What is correct way to get ExpansionPanel's name that caused expand/collapse event? I would like to create general method to save expand panels expanded states.

By trial and error I have discovered that both expand and collapse event handlers seem to get some argument. This is argument is undocumented. My tests show that I can get ExpansionPanel name following way:

function expand(e){
var expandPanelName=$(e.item).attr("name");
console.log(expandPanelName);
}

Is this correct way to do it or can this be changed in future versions of Kendo?

Thanks
Mikko

ExpansionPanel

answered on 14 Feb 2023

1 answer

197 views

How to focus grid in Dialog?

I have a question because the focus is not moving.
1. User presses button
2. Search dialog is opened.
3. Input and grid exist in dialog.
4. After searching in input, output search result on grid
5. Press ArrowDown at input to move focus to grid
6. Processing according to the keyboard that the user pressed on the grid (pressing the up key to go up within the grid, and pressing the down key to go down within the grid)

I've done up to process 4.
So when I pressed ArrowDown in the input of the dialog during process 5,
Call $('#grid').find('table')[0].focus();

When grid's navigable is true,
normally focuses on the header of the grid.
And the rest of the keystrokes except for the direction key within the grid are output normally.

If the grid's navigable does not enter false or navigable,
The grid's header is not focused.

The problem here is...
1. If navigable = true, ==> focus goes but direction key does not work
2. Without navigable => focus does not go by itself (keyboard event not detected)

To sum up, when there is input and grid in the dialog, I want to focus on grid, and I want to detect all key events of grid, including direction keys.

Ask for advice.

Dialog

Grid

answered on 13 Feb 2023

1 answer

429 views

Programmatically set step's contentId

Good afternoon,

I'm trying to find a way to programmatically set the content id for the next step in a wizard based on a radiogroup choice on the previous step.

I'm basing it on the Accepted answer from Mihaela on this post:

https://www.telerik.com/forums/skipping-diabled-steps-in-wizard-doasn-t-work

Incidentally, the required validation on the radiogroup in the example doesn't seem to work - you can click next to step 2 without choosing an option.

Rather than disable steps and jump to a different next step, I'd like to set the content for the next step based on the selected option.

On the select event for the wizard form I've tried the following:

                    var wizard = e.sender;
                    var radioValue = $("input[name='uploadType']:checked").val();
                    if (radioValue == "1") {
                        //e.sender.insertAt(3, { title: "Upload File(s)", contentId: "uploadFile" });
                        wizard.steps()[3].contentId = "uploadFile";
                    }
                    else {
                        //e.sender.insertAt(3, { title: "Choose File(s)", contentId: "chooseFile" });
                        wizard.steps()[3].contentId = "chooseFile";
                    }
                    e.preventDefault();
                    wizard.select(3);

I've used the syntax from this question:

https://www.telerik.com/forums/programmatically-enable-or-disable-wizard-buttons

$("#wizard").data("kendoWizard").steps()[1].buttons()[1].enable(true);

This assumes that e.sender on the wizard select event is the equivalent of $("#wizard").data("kendoWizard").

I have two templates with partial views which are used dependent on the radiogroup selected value:

<script type="text/x-kendo-template" id="uploadFile">
    @await Html.PartialAsync("_UploadFile")
</script>

<script type="text/x-kendo-template" id="chooseFile">
    @await Html.PartialAsync("_UploadChoose")
</script>

The insertAt method works by inserting a step with the desired content, but I don't want to insert multiple new steps.

Can what I want to do be achieved? Can the content be set programmatically?

I did also wonder if it was possible to have the conditional logic (e.g. if (radiogroup value == 1) in the kendo template, but this also didn't seem to work.

Kind regards,

Richard

RadioGroup

Wizard

answered on 10 Feb 2023

2 answers

300 views

ASP Net Core Hierarchy Grid not working

Hi there,

1st post, so I hope I don't do anything wrong or miss anything.

I have the following models (short version, originally the models do contain a lot more properties)

    publicclassDevices
    {
        public string dealerNo { get; set; }
        public string outletNumber { get; set; }
        public List<Application> applications { get; set; }
        public string deviceId { get; set; } 
    }

    public class Application
    {
        public int Id { get; set; }
        public string name { get; set; }
        public string version { get; set; }
    }

I would like to have a grid showing all devices, and by unfolding I want to see all applications from this specific device with version and so on.

I checked every available forum topic and hierarchy grid example, but I can't get it to run. The returned result from the controller and database query does contain everything.

This is my view:

@(
Html.Kendo().Grid<Devices>()
                        .Name("grid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.dealerNo);
                            columns.Bound(p => p.outletNumber);
                            columns.Bound(p => p.deviceId);
                        })
                        .Groupable()
                        .ColumnMenu()
                        .Sortable()
                        .ClientDetailTemplateId("template")
                        .Scrollable(s => s.Height("auto"))
                        .Filterable()
                        .ToolBar(toolbar =>
                        {
                            toolbar.Search();
                        })
                        .Pageable(p => p
                            .ButtonCount(5)
                            .PageSizes(new[] { 10, 25, 500 })
                            .Refresh(true)
                            .Input(true)
                        )
                        .HtmlAttributes(new { style = "height:600px;" })
                        .DataSource(ds => ds
                            .Ajax()
                            .ServerOperation(false)
                            .Group(groups => groups.Add(p => p.dealerNo))
                            .Events(events => events.Error("error_handler"))
                            .Read(r => r.Action("Devices_Read", "Home").Type(HttpVerbs.Post))
                            .Model(model =>
                            {
                            model.Id(order => order.dealerNo);
                            })
                        )
                    )


<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Application>()
                .Name("grid_#=deviceId#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.name).Width(110);
                    columns.Bound(o => o.version).Width(110);
                    columns.Bound(o => o.availableVersion).Width(110);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Read(r => r.Action("App_Read", "Home", new { deviceId = "#=deviceId#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
        )
</script>

And the controller:

        public ActionResult App_Read(string id, [DataSourceRequest] DataSourceRequest request)
        {
            // return data
        }

String id on App_Read is always null, and I can't find the error. I need to pass the Devices.deviceId so my query for applications will be filtered for this specific device.

If I use standard read method in the child grid

Action("App_Read", "Home"))

I get all the data, but of course every child grid is showing all applications.

Please point me to my mistake so I can pass the deviceId string (which is a guid generated by EF Core) to the controller.

Thanks,

Thomas

Grid

answered on 09 Feb 2023

1 answer

200 views

Can an editor template be used for the grid delete confirmation?

I have looked for different forums and knowledge base posts relating to grid delete actions but can't find anything quite like I'm trying to accomplish. I would like to use a template for the confirmation popup when the destroy button is clicked on a grid row. I don't want the confirmation alert, instead I would like to have an editor template.

My grid setup:

columns.Command(m => { 
                m.Edit(); 
                m.Custom("Assign").Click("AssignInventory").IconClass("k-i-document-manager").Visible("AssignVisible");
                m.Destroy().Text("Destroy").Visible("AssignVisible"); // Only visible if the inventory is assignable, has quantity on hand
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("InventoryTemplate").DisplayDeleteConfirmation(false)) // Do not show confirmation alert

Here is the template I'm trying to use in a popup window once the destroy button is clicked.

<script type="text/x-kendo-template" id="DestroyInventoryTemplate">

    # if(data.BulkItems) { #
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="Id" name="Id" value="#:data.Id#" />
        <input type="hidden" id="Name" name="Name" value="#:data.Name#" />
        <input type="hidden" id="Description" name="Description" value="#:data.Description#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        <input type="hidden" id="QuantityTotal" name="QuantityTotal" value="#:data.QuantityTotal#" />
        <input type="hidden" id="QuantityOnHand" name="QuantityOnHand" value="#:data.QuantityOnHand#" />
        <input type="hidden" id="Brand" name="Brand" value="#:data.Brand#" />
        <input type="hidden" id="SerialNumber" name="SerialNumber" value="#:data.SerialNumber#" />
        <input type="hidden" id="ModelNumber" name="ModelNumber" value="#:data.ModelNumber#" />
        <input type="hidden" id="Size" name="Size" value="#:data.Size#" />
        <input type="hidden" id="Color" name="Color" value="#:data.Color#" />
        <input type="hidden" id="RetirementDate" name="RetirementDate" value="#:data.RetirementDate#" />
        <input type="hidden" id="Destroyed" name="Destroyed" value="#:data.Destroyed#" />
        <input type="hidden" id="CreatedBy" name="CreatedBy" value="#:data.CreatedBy#" />
        <input type="hidden" id="CreatedDate" name="CreatedDate" value="#:data.CreatedDate#" />
        <input type="hidden" id="Active" name="Active" value="#:data.Active#" />
        <input type="hidden" id="InventoryTypeName" name="InventoryTypeName" value="#:data.InventoryTypeName#" />
        <input type="hidden" id="RequiredSerialNumber" name="RequiredSerialNumber" value="#:data.RequiredSerialNumber#" />
        <input type="hidden" id="RequiredModelNumber" name="RequiredModelNumber" value="#:data.RequiredModelNumber#" />
        <input type="hidden" id="RequiredBrand" name="RequiredBrand" value="#:data.RequiredBrand#" />
        <input type="hidden" id="RequiredSize" name="RequiredSize" value="#:data.RequiredSize#" />
        <input type="hidden" id="RequiredColor" name="RequiredColor" value="#:data.RequiredColor#" />
        <input type="hidden" id="PermissionPersonnel" name="PermissionPersonnel" value="#:data.PermissionPersonnel#" />
        <input type="hidden" id="PermissionLocation" name="PermissionLocation" value="#:data.PermissionLocation#" />
        <input type="hidden" id="PermissionInventory" name="PermissionInventory" value="#:data.PermissionInventory#" />

        <div class="k-edit-label">
            <label>Quantity To Destroy</label>
        </div>
        <div class="k-edit-field">
            <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                <input id="QuantityToAdd" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAdd" value="1" required="required" validationMessage="Quantity to destroy is required">
            </span>
            <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAdd" id="QuantityToAdd_validationMessage" data-valmsg-for="QuantityToAdd">
                <span class="k-tooltip-icon k-icon k-i-warning"></span>
                <span class="k-tooltip-content">The Quantity to destroy field is required.</span>
                <span class="k-callout k-callout-n"></span>
            </div>
        </div>
    #} else {#
        <span class="text-center">Are you sure you want to destroy this inventory?</span>
    #}#

    <div class="k-edit-buttons k-actions-end">
        <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span>
            <span class="k-button-text">Destroy</span>
        </button>
    </div>
</script>

Grid

answered on 09 Feb 2023