Telerik Forums
UI for ASP.NET Core Forum
4 answers
1.1K+ views

I am familiar with having a client template for a Boolean column to display "Yes" or "No" for true or false.  I have many templates that use the syntax below with no problems yet this grid on one template will show no data at all if I display that column.  If I comment it out the data shows fine.

 

columns.Bound(a => a.Mosfet.isESD).ClientTemplate("#= isESD ? 'Yes' : 'No' #").Width(80).Title("ESD").Width(100);

 

I can observe the 5 records that are returned in the grid's Read method in the debugger and see that the non null able column has valid values

 

Any suggestions?

Reid
Top achievements
Rank 2
 answered on 11 May 2018
1 answer
434 views

I created a grid with a dropdown.  The drop down has an Id and a Name.  The name is what the user should see and the Id is what the system will use.

 

When using inline editing, the drop down appears ok, but when selecting the item, the data doesn't go back to the service and when in display mode nothing is shown.

 

It wont let me attach an example:

 

here is the code

  public class ReferenceData
    {
        /// <summary>
        /// Gets or sets the identifier of the model.
        /// </summary>
        /// <value>
        /// The identifier of the model.
        /// </value>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets the name.
        /// </summary>
        /// <value>
        /// The name.
        /// </value>
        public string Name { get; set; }
    }

public class GridRowViewModel
    {
        /// <summary>
        /// Gets or sets the identifier of the model.
        /// </summary>
        /// <value>
        /// The identifier of the model.
        /// </value>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets when the career gap started.
        /// </summary>
        /// <value>
        /// the start of the career gap
        /// </value>
        public DateTime From { get; set; }

        /// <summary>
        /// Gets or sets a value indicating whether [qualifying service].
        /// </summary>
        /// <value>
        ///   <c>true</c> if [qualifying service]; otherwise, <c>false</c>.
        /// </value>
        public bool Flag { get; set; }

        /// <summary>
        /// Gets or sets the reason.
        /// </summary>
        /// <value>
        /// The reason.
        /// </value>
        public ReferenceData ReferenceData { get; set; }

        /// <summary>
        /// Gets or sets the reason identifier.
        /// </summary>
        /// <value>
        /// The reason identifier.
        /// </value>
        public int ReferenceDataId { get; set; }

        /// <summary>
        /// Gets or sets when the career gap ended
        /// </summary>
        /// <value>
        /// The end of the career gap
        /// </value>
        public DateTime To { get; set; }
    }

public class IndexViewModel
    {
        public IList<ReferenceData> ReferenceDataList { get; set; }
    }



















----------------------------

HOMECONTROLLER.CS
public class HomeController : Controller
    {
        public IActionResult Index()
        {
            IndexViewModel viewModel = new IndexViewModel();
            viewModel.ReferenceDataList = new List<ReferenceData>();
            viewModel.ReferenceDataList.Add(new ReferenceData() {Id = 1, Name = "Item 1" });
            viewModel.ReferenceDataList.Add(new ReferenceData() { Id = 1, Name = "Item 1" });
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, GridRowViewModel careerGap)
        {
            var results = new List<GridRowViewModel>();

            if (careerGap != null && this.ModelState.IsValid)
            {
                    results.Add(careerGap);
                
            }

            return this.Json(results.ToDataSourceResult(request, this.ModelState));
        }

      
    }
---------------------------------------
INDEX.CSHTML

@(Html.Kendo().Grid<GridRowViewModel>().Name("testGrid").Columns(columns =>
      {
          columns.Bound(model => model.From);
          columns.Bound(model => model.To);
          columns.Bound(model => model.Flag);
          columns.ForeignKey(model => model.ReferenceDataId, Model.ReferenceDataList, "Id", "Name").EditorTemplateName("_GridDropDown");//.ClientTemplate("#=Reason.Name#");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

      })
      .ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(20)
                                    .ServerOperation(false)
                                    .Model(model => model.Id(p => p.Id))
                                    .Create(update => update.Action("Editing_Create", "Home"))
      ))

------------------------------------
_GRIDDROPDOWN.CSHTML
@using Kendo.Mvc.UI
@model object

@(Html.Kendo().DropDownList()
      .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
      .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
      .HtmlAttributes(new { style = "width: 100%" })
      )

 

Cheers,

Thomas

Georgi
Telerik team
 answered on 10 May 2018
1 answer
333 views

Is there an example of Kendo UI async Upload on Razor pages (No controller) ? I tried below but I get 404 error .

 

<div class=""> @(Html.Kendo().Upload() .Name("files") .Async(a => a .Save("Save", "UploadManagement/Index") .Remove("Remove", "UploadManagement/Index") .AutoUpload(true) ) ) </div>

 

[HttpPost]public ActionResult Save(IEnumerable<IFormFile> files){}

Neli
Telerik team
 answered on 10 May 2018
2 answers
344 views

Hello,

How can i call the Get method of my controller ? When i load my page, it's only calling the Post Method. I followed the web api events exemple. Thank you.

 

[Produces("application/json")]
[Route("api/[controller]")]
public class AstreintesController : Controller
{
    private readonly PlanningContext _context;
    private readonly IAgentService _agentService;
 
    public AstreintesController(PlanningContext context, IAgentService agentService)
        {
            _context = context;
            _agentService = agentService;
        }
 
    //GET api/Astreintes
    [HttpGet]
    public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
    {
        return _context.Astreintes.ToDataSourceResult(request);
    }
 
    [HttpPost]
    public DataSourceResult Post([DataSourceRequest]DataSourceRequest request)
    {
        if (!ModelState.IsValid)
        {
           //todo: handle error
        }
 
        return _context.Astreintes.ToDataSourceResult(request);
    }

 

@(Html.Kendo().Scheduler<NC.Enercal.PlanningPE.Web.Areas.Planification.ViewModels.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Selectable(true)
        .Editable(editable =>
        {
            editable.Resize(false);
        })
    .Height(650)
    .Views(views =>
    {
        views.MonthView(month => month.Selected(true));
 
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
 
    })
    .DataSource(d => d
        .Events(e => e.Error("onError"))
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.AgentId).DefaultValue(1);
        })
    .Read("Get", "Astreintes")
    .Create("Create", "Astreintes")
)
Julien
Top achievements
Rank 1
 answered on 09 May 2018
1 answer
287 views

Is it possible to read a DataSource using a Route Name rather than a Controller / Action ? 

// Controller & Action
.Transport(m => m.Read("GetPagedGridData""GridView"new ..... 
 
 
// Route Name ??
.Transport(m => m.Read("MyRouteName??"new ..... 
Dimitar
Telerik team
 answered on 09 May 2018
5 answers
2.9K+ 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
122 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
400 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
405 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
219 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?