Hey all,

Using Telerik UI for ASP.NET Core, I've added a TreeList widget. I'm trying to get it to display a DropDownList for what amounts to, in "Grid-speak", a Foreign Key column.

The method I found somewhere in my searches appears to be "working", in that when I enter inline edit mode on the row, the column is showing as a DropDownList and is rendering correctly showing the DataTextField (as shown in the attached Edit.png), but when in display mode on the row, it is only showing the DataValueField (as shown in the attached Display.png).

How do I get the display mode on the row to show the DataTextField from the drop down for the column?

Widget code in /Pages/ProposalVersions/details.cshtml Razor page (removed fields irrelevant to the question for conciseness):

@(Html.Kendo().TreeList<ProposalVersionLineItem>()
  .Name("proposalVersionLineItemTreeList")
  .Columns(columns => {
    columns.Add().Field(column => column.name).Width(200);
    columns.Add().Field(column => column.ProductID).Template("#=ProductID#").Sortable(false).Width(100);              
    columns.Add().Width(300).Command(c =>
    {
      c.CreateChild().Text("Add child");
      c.Edit();
      c.Destroy();
    });            
  })
  .Editable(e => e.Move(move => move.Reorderable(true)))
  .Filterable()
  .Sortable()
  .DataSource(ds => ds
    .Read(r => r.Url("/ProposalVersions/Details?handler=ReadProposalVersionLineItemForTreeList").Data("forgeryToken"))
    .Model(m =>
    {
      m.Id(f => f.ProposalVersionLineItemID);
      m.ParentId(f => f.ParentProposalVersionLineItemID).Nullable(true);
      m.Field(f => f.name);
      m.Field(f => f.ProductID);
    })
  )
)

Editor Template at /Shared/EditorTemplates/ProductID.cshtml:

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("ProductID") 
    .DataTextField("name") 
    .BindTo((System.Collections.IEnumerable)ViewData["products"]) 
)

Code Behind populating ViewData in /Pages/ProposalVersions/details.cshtml.cs:

ViewData["products"] = _context.Products
  .Select(s => new {
    s.ProductID,
    s.name
});

From /Models/ProposalVersionLineItem.cs Class:

[Display(Name = "Product")]
[UIHint("ProductID")]
public int ProductID { get; set; }

I feel like this is working "as expected" as it is effectively rendering a custom Editor Template, but I can't figure out how to get it to render a custom "Display Template" for the field... any insight would be appreciated!

Thanks!

Nick

I've tried several iterations, and something isn't right. If I type the endpoint in a browser, I get a Json result. Swagger shows the API returning stuff. No luck with the DropDownList yet.

Here is my current markup on the client:

    <div>
        <kendo-datasource name="data" type="DataSourceTagHelperType.WebApi" server-operation="true">
            <transport>
                <read url="https://localhost:7225/api/SievePack" action="get" datatype="jsonp"/>
            </transport>
            <schema>
                <model id="SieveSetId">
                    <fields>
                        <field name="SieveSetId" type="number" />
                        <field name="SieveSetName" type="number" />
                    </fields>
                </model>
            </schema>
        </kendo-datasource>

        <script>
            data.read();
        </script>
        
        <kendo-dropdownlist name="sets"
                            datatextfield="SieveSetName"
                            datavaluefield="SieveSetId"
                            datasource="data">
        </kendo-dropdownlist>

    </div>

I have the API solution running when I launch the client.

Do I need to do something in another part of my application? From what I've been reading, this should work..

Thanks!

Hi, I have a Kendo Dropdownlist with ajax datasource, ServerFiltering and a contains filter.

<select id="multiselect" multiple="multiple"></select>

$("#multiselect").kendoDropDownList({
    name: "dataSelect",
    filter: "contains", 
    dataSource: {
        type: "aspnetmvc-ajax",
        serverFiltering: true,
        transport: {
            read: {
                type: "POST",
                url: "@Url.Page("Data", "ReadData")",
                data: function() {
                    //var text = $('#dataSelect').data("kendoDropDownList").filterInput; not working
                    //var data = { text: text }; 
                    //return $.extend(kendo.antiForgeryTokens(), data);
                    
                    return kendo.antiForgeryTokens();
                }
            }
        }
});
public ActionResult OnPostReadData([DataSourceRequest] DataSourceRequest request, string text)
{
}

Hi,

As per the Github issue here, when the DropDownTree has Checkboxes enabled, is there a way to post its selected values to a controller, either as comma-separated IDs or an array?

I would have expected this to work in a similar way to the MultiSelect control, but unless I'm missing something that doesn't appear to be the case.

Many thanks in advance,

David.

Hi,

I have a question for you:
I would like to create a filter for one column of my Grid. The values of this column are integers, but the values are not visible for the users. They see only an icon depending on the value's range. (see the linked image)

For example:
If the value is 89, the user sees an icon and the tooltip for that is "Very good".

We have 4 ranges:
0-50 Bad,

51-70 OK,

71-85 Good,

86-100 Very good

How can I create a filter, where only the 4 text can be selected from a dropdown, but is filters for the range represented by the text?

Thanks in advance.

We are using the .net Core scheduler and i have 6x appointments on a day ranging from 10 min to 1 hour; A,B,C,D,E,F.

I want to move appointments around using drag and drop eg Change C, before B, and A after D, etc. 

I want to show a cursor so I can tell that when I drop the appointment C it will in fact insert between A and B. I do not want them in parallel.

I also want the schedule to adjust based on the changed times as I move the appointments. 

This should be a simple and intuitive process of 1 click, drag, and drop, not involving creating holes, filling them, rearranging appointments etc etc..

In my application I have used 

ModelState.AddModelError("Fieldid", "ErrorMessage");

first time on button click it is validating fine, 

from second time(without refreshing the page) I give another wrong input and it still validate but error message on UI didn't show.

tried debugging the code didn't found any issue,

tried to see console on web browser , no error shows.

Howdy!

I have a scenario in which I need to run some code when the item selected in a foreign key column in my grid is changed when it is being edited.

I can access other columns' editors without issue, but for some reason, every time I attempt to grab the editor for the foreign key column, it comes up as null.

For instance, I can use the following to grab the numeric text box for the edited row (in the Grid's on-edit event) with no issues:

var mcEditor = e.container.find("input[name=MoistureContent]").data("kendoNumericTextBox");

But, the only thing I can get to return as an object in the same on-edit event of the grid is the following:

var proctorEditor = e.container.find("input[name=ProctorReportId]");

I've tried using the following with no luck:

var proctorEditor = e.container.find("input[name=ProctorReportId]").data("kendoDropDownList");
var proctorEditor = e.container.find("input[name=ProctorReportId]").data("kendoComboBox");

We are using a GridColumnSettings for a grid view.

Because the data is text heavy, we are using a popup when editing it.

This puts the Save and Cancel buttons at the bottom of form.  We have a user who doesn't want to scroll down to Save. (We already have had to put Save at the top of another form with links to Top.)

Is there any way to force the buttons to appear at the top or in both places? Any suggestions welcome. 

These are the basic settings we are using:

on the grid page:

 @(Html.Kendo().Grid<TITLE_PATTERN_1>().Name("grid")
        .Sortable()
        .Editable(x => x.Mode(GridEditMode.PopUp).TemplateName("TITLEPATTERNEditor").Window(w => w.Width(700)))
        .Scrollable()
        .Filterable()
        .Resizable(r => r.Columns(true))
        .ToolBar(tools => tools.Excel().IconClass("k-icon k-i-download"))
        .Excel(excel => excel
        .FileName("TitlePatterns.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL("TitlePattern?handler=Save")
        )
          .Columns(columns => columns.LoadSettings(Model.columns)
   )
        .DataSource(ds => ds.Ajax().Events(events => events.Error("error_handler"))
        .Events(events => events.Error("error_handler"))
        .Read(r => r.Url(Url.Action() + "?handler=Read").Data("forgeryToken"))
        .Update(u => u.Url(Url.Action() + "?handler=UpdatePopUp").Data("forgeryToken"))
        .Destroy(d => d.Url(Url.Action() + "?handler=Destroy").Data("forgeryToken"))
        .Model(m =>
        {
            m.Id(id => id.Id);
            m.Field(p => p.Id).Editable(false);

        })
        .PageSize(50)
        )
        .Pageable()

          )

In the GridColumnSettings

 new GridCommandColumnSettings
            {
                Commands =
                {
                     new GridEditActionCommand()
                     {  
                         Name = "Update",
                         Text = "Update",
                         UpdateText = "Save",                         
                         CancelText = "Cancel"                         
                     },

                 },
                Width = "100px",
                Filterable = false,
                Locked = true,
                Title = "Update"
               },

And this is the template:

Howdy

I am opening a window to display a razor page using the following

function dblClickCalEvent(e) {

		var win = $("#scheduleWindow").data("kendoWindow");

		win.refresh({
			url: "@Url.Page("ScheduleForm", "Details")",
			data: { clickDate: e.dataset.clickdate, scheduleId: e.dataset.scheduleid }
		});
		win.center().open();

	}

This opens the Razor page and calls the OnGetDetails and renders the page using the correct Model.  I have a MultiSelect on the page using the Select Event which once a value is selected POSTs back to the page using the following:

	function attendee_selected(e) {


		$.ajax({
			type: "POST",
			url: "ScheduleForm?handler=AttendAdd",
			data: { __RequestVerificationToken: '@token', attendee: e.dataItem.UserPrincipleName }
		});


	}

Which posts to this:

public async Task<IActionResult> OnPostAttendAdd(string attendee)

And returns Page();

I can see that the model gets populated while debugging the Razor page, however the page never renders the new results on page.  I have tried to call a refresh on the window but this has no effect.  Here is and example of where the ViewDates change once the Page is returned from the Post method and the changes are not reflected in the page in the window:

<table style="width: 100%;">
				<tr>
					@foreach (var d in Model.ScheduleAssistaint.ViewDates)
					{

						<td class="border1" style="text-align:center;">
							@d.ToLongDateString()
						</td>

					}
				</tr>
			</table>

Is this something to do with the fact the page is inside a window?  If so is there a way to fix this?

Thanks