Questions on UI for ASP.NET Core Forum

1 answer

682 views

Adding a dropdown as a column in asp.net core Kendo Grid

Hi,

How do we take a drop down with a list of values and put it on a gridview. and save the chosen values as text.

What would be the best way and easiest way ?

For Example

I have Table A which is bound to the Grid View. I want to show values from one of the column from Table B as a dropdown list of values in one of the column of the grid view. There is no foreign key relationship between the tables.

2 EXAMPLE FOR IDEA:

1) For Example : https://demos.telerik.com/aspnet-core/grid/custom-datasource

How can you add a dropdown list in the product name column, product list is coming from another table where there is no foreign key relationship

2) Another example : https://demos.telerik.com/aspnet-core/grid/foreignkeycolumnbinding : How can we achieve category binding without a foreign key.

DropDownList

Grid

answered on 13 Mar 2023

1 answer

113 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

298 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

277 views

Cannot get Kendo DropDownList to display values, displays "undefined"

Context: This is an ASP.NET Core 6 project using MVC controllers. I have successfully gotten Grid widgets to work on another page which shares the same _Layout as the below page. As a result, I think it's unlikely that my issue is related to how Kendo is installed in the project.

The Problem

I am attempting to add a searchable DropDownList to my project. Though my ultimate goal is to use Virtualization to allow the search of a very large number of objects, I am unable to get the widget to function with a much small set of test data. No matter how I attempt to configure the widget or change how I pass data back to it I get the same result:

I have confirmed via the Visual Studio debugger that my Json response contains the correct data and contains no values that are null or empty.

My Code:

View

Note: SamAccountName is the field that should be displayed, used for text search, and selected as a value by the user.

Controller

Domain Model

As stated, the current code is much more simple than what I will eventually require, but I cannot even get this to work. I have tried structuring the controller about a hundred different ways, and the only change is that sometimes I get an error saying a field can't be recognized. Is this something to do with how I'm structuring my Json?

I've been beating my head against this for almost 2 days now, I could really use some help.

DropDownList

answered on 20 Jan 2023

1 answer

67 views

DataSource Unauthorized error

In my webAPI i'm using the [Authorize] control.

When I call my webAPI to populate a grid or a dropdown with this code

.DataSource(source=>source.Custom()
.Transport(transport=>transport.Read(read=>
{
read.Url($"{WebApiUrl}")
.DataType("json").Data("forgeryToken");
})
)
.PageSize(12)

only in localhost it returns this error <Failed to load resource: the server responded with a status of 401 (Unauthorized)> .

Instead if I use an ajax call in javascript it works

$.ajax({
url: `${WebApiUrl}`,
method: 'get',
crossDomain: true,
cache: false,
xhrFields: {
withCredentials: true,
},
success: function (data) {
options.success(data)
}
})

I've searched in google but i didn't find anything that can help me. Do I have to pass the credentials somehow?

Thank you

DropDownList

Grid

Security

answered on 04 Jan 2023

1 answer

58 views

Cascading drop down data source change

Hello, I am trying to change the read action of my child drop down based on the parent drop down value. In my scenario, the read action for my "Assignee" drop down needs to call the appropriate controller based on the "Assignment Type" drop down value. I'm struggling to find documentation on how I can update the drop down data source. I'm assuming the best approach would be to utilize the select event of the parent drop down to then update the child drop down read action, but I need some direction on how to approach this. The following is the setup of my cascading drop down inputs. I'm not sure if it matters, but these are being used in a template for a custom grid command that opens a kendo window popup.

    <div class="k-edit-form-container">
        <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="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />
    </div>

    <div class="k-edit-label">
        <label>Assignment Type</label>
    </div>
    <div class="k-edit-field">
    @(Html.Kendo().DropDownList()
            .Name("AssignmentType")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignment Type")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                });
            })
            .ToClientTemplate()
        )
    </div>

    <div class="k-edit-label">
        <label>Assign To</label>
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownList()
            .Name("Assignee")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignee")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetActiveInventoryTypes", "InventoryType").Data("FilterAssignees");
                });
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("AssignmentType")
            .ToClientTemplate()
        )
    </div>

DropDownList

answered on 02 Jan 2023

1 answer

94 views

How to make grid edit functionality working with tab click

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

answered on 22 Dec 2022

0 answers

59 views

Can Line Chart be rendered without binding data?

Scenario and Issue:

I had a Tabstrip with three tabs,

in each tab there are four DropDownList and four line charts.

However, If I bind all the data once (Include DropDownLists and Line Charts in three tabs),

the page would rendered slowly and caused some of the data loss binding.

Question1 :

I'm wondering if it's possible to render Line Chart before data binding?

then I'll data bind it after DropDownList Select event was triggered.

Or is there any other alternative ways?

What I've Tried

The TabStrip is in a partialview,

once a button was clicked the partialview will be load with javascript function by.
$("#myHtmlElementId").load('@Url.Action("MyAction","MyController")', params)

The complicated part is the line chart in initial tab strip was data binded with local binding the data passed by ViewBag.

And if I try to render the other line chart while the second or third TabStrip Item was selected.

It's logic would be conflict, if the user clicked the first TabStrip again.

Since the line chart were data binded with local data by ViewBag,

and the others in 2nd or 3rd TabStrip were renderd while the TabStrip item was selected,

And the selected event would call a javascript function to render another partial view to fill content into the TabStrip.

Is there something like TabStrip initial event?

So that I could also fill the first Tabstrip item contents same as the 2nd or 3rd TabStrip.

Chart

DropDownList

TabStrip

asked on 22 Nov 2022

1 answer

612 views

How to refresh line chart with a drop down list event?

Scenario

I'll try to simplify my question with description and code.

I would like to refresh line chart with javascript after drop down list item was selected,

which the selected event has been triggered.

The line chart was in a partial view,

which its initial shown data was passed in with ViewBag as local data and binded with line chart .

What I've tried so far

I was able to trigger javascript with custom select event,

and retrieve the drop down list selected item,

then I'll passed the select item as a query condition back to controller,

after getting new list of data from database,

I need to pass these data back to partial view where the line chart is to refresh it.

Question1

My line chart data was first binded with ViewBag local data binding.

Should I just return to partial view and pass new data in with ViewBag,

and let it automatically refresh the chart since return back to the partial view forcelly renders it again?

Question2 (Extension of question1)

I would have 4 line charts in the partial view,

each chart has a dropdown list to refresh the chart,

If a dropdown list item was selected,

would the other chart shows nothing? Since I've binded data with ViewBag in the beggining,

If so, how can I prevent the other 3 chart to refresh(loosing data)?

Code

Partial View with line chart and drop down list (the three other linechart was not listed )

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
   //line chart datas
    var instDatas = (MyDataViewModel)ViewBag.instsData;
}

<div>
    @(Html.Kendo().TabStrip()
              .Name("chart-tabstrip")
              .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("My Monitoring tab 1")
                      .Selected(true)
                      .Content(@<text>
                          <div>
                               @(Html.Kendo().DropDownList()
                              .Name("DTData-DropDown")
                              .DataTextField("InstNo")
                              .DataValueField("InstID")
                              .DataSource(source =>
                              {
                                  source.Read(read =>
                                  {
                                      read.Action("MyAction", "MyController", new {MyQueryParams});
                                  });
                              })
                              .Value("default")
                              .HtmlAttributes(new { style = "width: 250px" })
                             )
                             @(Html.Kendo().Chart(instDatas.DTDataViewModel)
                                    .Name("dtchart")
                                    .Title("dtchart")
                                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Bottom)
                                    )
                                    .ChartArea(chartArea => chartArea
                                        .Background("transparent")
                                    )
                                    .SeriesDefaults(seriesDefaults =>
                                        seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                                    )
                                    .Series(series => {
                                        series.Line(model => model.ReadData).Name("ReadData");
                                    })
                                    .ValueAxis(axis => axis
                                        .Numeric()
                                    )
                                    .CategoryAxis(axis => axis
                                        .Categories( m => m.ReadTime)
                                        .Type(ChartCategoryAxisType.Date)
                                        .BaseUnit(ChartAxisBaseUnit.Fit)
                                        .Labels(labels => labels.Rotation(-90))
                                        .Crosshair(c => c.Visible(true))
                                        .AutoBaseUnitSteps(config => config.Milliseconds(1))
                                    )
                                    .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Shared(true)
                                        .Format("{0:N0}")
                                    )
                                )
                          </div>
                      </text>);                
              })
              .HtmlAttributes(new{style = "width : 1400px; margin: 30px auto"}) 
)
</div>
 
<script>
   //Dropdown list select event function(Haven't add it)
    function instDataChartDropDownSelect(e) {
        var dataItem = this.dataItem(e.item);

        var instNo = dataItem.value;
    }
</script>

Chart

DropDownList

answered on 02 Nov 2022

1 answer

418 views

Delete item from kendo dropdownlist leaves empty item in list

Hi, I have a kendo dropdownlist which offers the option to remove items with a link. I used Template/ValueTemplate to achieve this.

@(Html.Kendo().DropDownList()
      .HtmlAttributes(new { @class = "form-control" })
      .Name("dataSelect")
      .DataTextField("Text")
      .DataValueField("Value")
      .Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .DataSource(ds => ds
         .Read(read => read
         .Url("/Data?handler=ReadData").Data("getForgeryToken")
)))
function deleteItem(itemId) {    
            var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
            $.ajax({
                type: "POST",
                url: "/Data?handler=DeleteItem",
                headers:
                {
                    "RequestVerificationToken": data.__RequestVerificationToken
                },
                data: {
                    itemId: itemId,
                },
                success: function (response) {
                    $('#dataSelect').data("kendoDropDownList").dataSource.read();
                },
                failure: function (response) {
                }
            });
        }

This basically works, but the problem is that an empty item (which has neither a text nor a value) remains in the dropdown list, even though I reload the datasource of the control. Is there a way to get rid of this item? Is something wrong with my configuration of the control?