Questions on UI for ASP.NET Core Forum

1 answer

216 views

DropDownTree input field does not bind selected items

Good morning,
I have a problem with model binding
The component loads the data correctly but if I select multiple values it binds me to only one value in "TipologiaFormato" present in the model.
"TipologiaFormato" is a string

What type of field must it be to bind all selected data?
Thank you

Code:

<form-item field="TipologiaFormato" col-span="1">
                            <item-label text="Tipologia Formato:" optional="false" />
                            <dropdowntree-editor auto-close="false" dataspritecssclassfield="spriteCssClass" value-template-id="dropdowntree-value-template" template-id="dropdowntree-template" name="dropdowntree" style="width: 100%">
                                <hierarchical-datasource>
                                    <schema>
                                        <hierarchical-model id="id"></hierarchical-model>
                                    </schema>
                                    <transport>
                                        <read url="@Url.Action("Items_GetAction", "Controller")" />
                                    </transport>
                                </hierarchical-datasource>
                                <checkboxes check-children="true" enabled="true" />
                            </dropdowntree-editor>
                        </form-item>

DropDownTree

answered on 17 Feb 2023

1 answer

266 views

Fillable pdf displays as flat read-only pdf in PdfViewer

I'm trying to use the pdf Viewer control to display pdfs which have fillable forms on them. When I open the pdf with viewer control the fillable pdfs just show up as a flat pdf (meaning the form fields are not fillable). Is there a way to get the PdfViewer control to display the pdf as a fillable pdf? I feel like with tools like RadPdf, this has got to be possible in the browser and would be surprised if there wasn't a way to do this with our Kendo controls.

Ultimately, I want to submit that filled in pdf back to the server to be saved back to the database.

PDFViewer

answered on 17 Feb 2023

1 answer

299 views

Rename field names in Kendo Validator generated error message

Hi, I can't seen to find a fix for this:

I'm using .NET Core Telerik UI's Wizard feature along with its kendoValidator and the latter seems to be generating error messages, one example being the email address field - it'll generate an error message if the email doesn't follow the format allowed per the attributes in the view model. However, it's using the original field names despite my using the DISPLAY attribute in the VM. How can I go about changing the field name used in the client side when kendoValidator kicks in?

Example: ALT_EMAIL is not valid email. I'd like for it to say, This email address is not an valid email, instead.

FYI, I'm using .NET's tag helpers, not Telerik's, to generate the field names, inputs, etc.

General Discussions

answered on 17 Feb 2023

1 answer

196 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

549 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

769 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

233 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

492 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

122 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

219 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