Telerik Forums
UI for ASP.NET Core Forum
5 answers
2.7K+ views
Hi folks,

I'm trying to build custom create and edit buttons to navigate to a totally new view, rather than using inline or popups. I've got the edit one to work using a JavaScript function to redirect to the edit view, but can't seem to get the create one to work.

Here's my grid:

@(Html.Kendo().Grid<Project.Models.Organisation>()
.Name("grid")
.HtmlAttributes(new { style = "ScrollHeight: 700px" })
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(80);
columns.Command(command =>
{
command.Custom("Details").Click("showDetails");
}).Width(20);
})
.Sortable()
.Filterable()
.Pageable(x => x.PageSizes(new int[] { 5, 10, 15, 20, 100 }).Refresh(true).ButtonCount(5))
.ToolBar(toolbar => {
toolbar.Custom().Text("Create").HtmlAttributes(new { id = "showCreate" });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Name);
})
.Read(read => read.Action("List", "Organisations"))
)
)

Here's the edit function, which works fine:

function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location.href = '/Organisations/Details/' + dataItem.Id;
}

And here's the create function, which doesn't appear to do anything:

function showCreate(e) {
e.preventDefault();
window.location.href = '/Organisations/Create/';
}

I've tried a couple of approaches:

1) In ASP.NET examples, you appear to be able to do the following to fire a controller method directly, is this not available in Core?

toolbar.Custom().Text("Create").Action("Create", "Organisations");

2) Another approach that appears possible from research is to use HtmlAttributes, but this appears to do nothing, am I missing something?

toolbar.Custom().Text("Create").HtmlAttributes(new { id = "showCreate" });

I'm pretty new to ASP Core, so any pointers would be gratefully received.

Thanks,
Dave.
Stefan
Telerik team
 answered on 04 May 2018
1 answer
93 views

Hi,

I am havig trouble with the dialog's position.

they are shown in a bad position.

this porblem is with the dorpdownlist and editor control

please see the attached images!

Thanks!

 

this is the view code:

 

@page
@model Pages.UnidadControl.ConstructoraModel
@{
    ViewData["Title"] = "Constructora";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form method="post">

    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-5 col-sm-3 col-xs-12" for="">
                Nombre y Apellido
            </label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-3 col-xs-12">
                <input asp-for="@Model.Constructora.Nombre" class="form-control" />
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-5 col-sm-3 col-xs-12" for="">
                Dirección
            </label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-3 col-xs-12">
                <input asp-for="@Model.Constructora.Direccion" class="form-control" />
            </div>
        </div>
    </div>

    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="">
                Telefonos
            </label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-12">
                <input asp-for="@Model.Constructora.Telefono" class="form-control" />
            </div>
        </div>
    </div>


    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-3 col-sm-3 col-xs-12">Pagina web<span>*</span></label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-12">
                <input asp-for="@Model.Constructora.PaginaWeb" class="form-control" />
            </div>
        </div>
    </div>

    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-3 col-sm-3 col-xs-12">Email <span>*</span></label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-12">
                <input asp-for="@Model.Constructora.Email" class="form-control" />
            </div>
        </div>
    </div>

    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-3 col-sm-3 col-xs-12"> Ubicación <span>*</span></label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-12">

                @(Html.Kendo().DropDownListFor(x => x.Constructora.TipoReferenciaId)
                              .DataTextField("Text")
                              .DataValueField("Value")
                              .BindTo(new List<SelectListItem>() {
                                      new SelectListItem() {
                                          Text = "Black",
                                          Value = "1"
                                      },
                                      new SelectListItem() {
                                          Text = "Orange",
                                          Value = "2"
                                      },
                                      new SelectListItem() {
                                          Text = "Grey",
                                          Value = "3"
                                      }
                              })
                              .Value("1")
                              .HtmlAttributes(new { style = "height: 10%" })
                )

            </div>
        </div>
    </div>






    <div class="panel-body">
        <div class="row">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="">
                Observaciones
            </label>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-6 col-xs-12">
                @(Html.Kendo().EditorFor(x => x.Constructora.Observaciones)
                                                          .HtmlAttributes(new { style = "height: 400px" })
                                                          .PasteCleanup(p => p
                                                              .All(true))
                                                          .Tools(tools => tools
                                                              .Clear()
                                                              .Bold().Italic().Underline().Strikethrough()
                                                              .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                                                              .InsertUnorderedList().InsertOrderedList()
                                                              .Outdent().Indent()
                                                              .CreateLink().Unlink()
                                                              .InsertImage()
                                                              .InsertFile()
                                                              .SubScript()
                                                              .SuperScript()
                                                              .TableEditing()
                                                              .ViewHtml()
                                                              .Formatting()
                                                              .CleanFormatting()
                                                              .FontName()
                                                              .FontSize()
                                                              .ForeColor().BackColor()
                                                              .Print())
                                                              .Value(@Model.Constructora.Observaciones)
                )

            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12">
                <button id="BtnguardarConstructora" type="submit" class="btn btn-success">
                    <span class="glyphicon glyphicon-ok"></span> Guardar
                </button>
            </div>
        </div>
    </div>

</form>

 

 

Neli
Telerik team
 answered on 02 May 2018
3 answers
354 views

I have a dropdown list that has a source where multiple items have to be displayed based on a parameter. I have activated the virtualization and a method of ValueMapper has to be provided.

@(Html.Kendo()
      .DropDownListFor(model => model.<UnknownProperty>)
      .DataTextField("Name")
       .DataValueField("Id")
       .Filter(FilterType.Contains)
       .DataSource(source =>
       {
         source.Ajax().Read("Action", "Controller", new { id = Model.Id }).PageSize(100);
       })
       .Virtual(v => v.ItemHeight(26).ValueMapper("valuemapper"))

                                                    // I amtr

       .HtmlAttributes(new { @class = "form-control", data_mapperurl = Url.Action("OtherAction", "Controller", new { id = Model.Id }) })
)

 

On this javascript function I have to call again using ajax but I have to send also the datasource parameter.

function manufacturerMapper(options) {
  var url;
  // url = ?.data('mapperurl');
  $.ajax({
        url: url,
        data: convertValues(options.value),
        success: function (data) {
            options.success(data);
        }
    });
}

 

Is there a way from the ValueMapper function to get to the dropdownlist? I do not want to know the name of the dropdownlist because this functionality should be used by multiple dropdownlists.

I tried to get to the dropdownlist from the this object but it seems that the function is called in the context of some kind of virtual object and not the dropdownlist

 

Dimitar
Telerik team
 answered on 02 May 2018
1 answer
384 views

Hello.

There is a grid in PartialView:

@(Html.Kendo().Grid(Model.SpokesmanList)
      .Name("grid1")
      .Columns(columns =>
      {
            columns.Bound(p => p.LastName);
            columns.Bound(p => p.DocumentType);
            columns.Bound(p => p.Position);
      })
    )

 

How can I fill this table with data on the client by calling the javascript function without serverside requests?

 

Stefan
Telerik team
 answered on 02 May 2018
1 answer
198 views
I'm trying to figure out how to handle errors when updating data (inline-editing). I can't bind events.error for the grid, as GridEventBuilder does not include an definition for Error. Whats wrong? I see it in the online demos, but can't use it in VS2017.
Alex
Top achievements
Rank 1
 answered on 01 May 2018
3 answers
135 views

Is it possible to show text in the Group Panel at the top of the grid?  i.e., "Drag a column header here for grouping"

Or better yet a way to define the area as some template.

 

Reid
Top achievements
Rank 2
 answered on 25 Apr 2018
2 answers
848 views

I've set up remote validation using asp mvc core and I am using the kendo validator.  I set up some javascript based on the remote validation code I found both in the samples online and some other searches and I added some code to support sending additional parameters. 

I am using the validator to verify that a name is not already in use for a form input.  What I have now actually mostly works, if the name exists then the validator adds the text below the input that the name is already used.  The issue is that when I enter a unique name, the validation message goes away but I still can't submit the form.  Something in the validation is still stopping the submit even though it appears to be validating correctly.

This is what I am using to set up a remote rule for the validator:

$.validator.methods.remote = function () { /* disabled */ };
 
$('#formName').kendoValidator({
    onfocusout: true,
    onkeyup: true,
    rules: {
        remote: function (input)
        {
            var remoteAttr = input.attr("data-val-remote-url");
            if (typeof remoteAttr === typeof undefined || remoteAttr === false)
            {
                return true;
            }
 
            var isValid = false;
            var data = {};
 
            var additionalFieldsAttribute = input.attr('data-val-remote-additionalfields');
            var parts = additionalFieldsAttribute.split(',');
 
            for (var i = 0; i < parts.length; i++)
            {
                var piece = parts[i].replace('*.', '');
                data[piece] = $('#' + piece).val();
            }
 
            $.ajax({
                url: remoteAttr,
                mode: "abort",
                port: "validate" + input.attr('name'),
                dataType: "json",
                type: input.attr("data-val-remote-type"),
                data: data,
                async: false,
                success: function (response)
                {
                    isValid = response.result;
                }
            });
            return isValid;
        }
    },
    messages: {
        remote: function (input)
        {
            return input.data('val-remote');
        }
    }
});

 

The controller code that it calls (this works correctly and returns the desired result):

public IActionResult IsSubstitutionNameAvailable(string Name, int? MergeDocumentSubstitutionTypeId)
{
    var existing = _context.MergeDocumentSubstitutionTypes
        .Where(l => l.Name == Name)
        .FirstOrDefault();
 
    if (existing == null || (existing != null && MergeDocumentSubstitutionTypeId == existing.MergeDocumentSubstitutionTypeId))
    {
        return Json(new { result = true });
    }
    else
    {
        return Json(new { result = false });
    }
}

 

The viewmodel where the remote attribute is added:

[Required]
[Remote("IsSubstitutionNameAvailable", "MergeDocumentSubstitutionTypes", AdditionalFields = "MergeDocumentSubstitutionTypeId", ErrorMessage = "Entered name is already in use.")]
public string Name { get; set; }

 

Again, the controller does get called, returns the correct response and I see the correct value come back from the javascript debugger.  After entering a unique name the validation message goes away but the submit is still blocked. When I inpecty the properties of the validator in the debugger it appears there are no errors.

 

Thanks,

Brian

 

 

Beginner
Top achievements
Rank 1
 answered on 24 Apr 2018
3 answers
184 views

In demo https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors

cells: [

   { value: "Select item:", bold: true },

   { background: "#fef0cd",

   validation:{

       dataType: "list",

       showButton: true,

       comparerType: "list",

       from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',

       allowNulls: true,

       type: "reject"}

    }]

I need to choose multi item.

How do i fix it?

Thanks !

Neli
Telerik team
 answered on 23 Apr 2018
8 answers
170 views

When I drop down a dropdown list (DropDownListFor) , it's items are not margined and are truncating to the left.  Can anyone suggest a style to override or a way to set this? 

Thanks

Dimitar
Telerik team
 answered on 23 Apr 2018
1 answer
288 views

I have a number List Boxes with a single context menu that is shared across them.

The context menu correctly displays when I right click the list box item but it doesn't seem to set the target value of the Select or Open events.

The menu configuration is:

@(Html.Kendo().ContextMenu()
        .Name("listbox_contextmenu")
        .Target("[role=listbox]")
        .Filter("[role=option]")
        .Orientation(ContextMenuOrientation.Vertical)
        .Animation(animation =>
        {
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
                open.Duration(500);
            });
        })
        .Items(items =>
        {
            items.Add().Text("Escalate to Management");
            items.Add().Separator(true);
            items.Add().Text("Email Allocated User");
        })
        .Events(events =>
        {
            events.Open("contextMenuOpen").Select("contextMenuSelect");
        })
)

 

The java script function do nothing at the moment:

function contextMenuOpen(e) {
    alert('e.item is ' + JSON.stringify($(e.item)));
    alert('e.target is ' + JSON.stringify($(e.target)));
}
function contextMenuSelect(e) {
    alert('e.item is ' + JSON.stringify($(e.item)));
    alert('e.target is ' + JSON.stringify($(e.target)));
}

 

I'm hoping you can point out what I'm doing wrong here.

Many Thanks,

Rob

Neli
Telerik team
 answered on 20 Apr 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?