Telerik Forums
UI for ASP.NET MVC Forum
3 answers
2.9K+ views

I've found the documentation on how to get the selected value from a drop down list on the DataBound event to be non-existant. 

I eventually found the solution here: https://www.telerik.com/forums/dropdownlist-mvc---set-default-value-at-runtime

It is easy to get the selectedIndex in this event handler. Getting the value that this corresponds to so I can run some custom logic (show/hide fields, for example) when the document is being loaded (as opposed to a select event) was the tricky part.

I already had a generic function I called to obtain this value across the board. I was able to finally solve the issue of getting the selected value when not in the Select event (where the dataItem object is available) using the following code:

var GetValueFromKendoSelect = function (context, e) {
    // if this is from a select event then we'll get the dataitem
    var dataItem = GetDataItemFromKendoSelect(context, e);
    if (dataItem != undefined) {
        return dataItem.Value;
    } else {
        // if this is from a databound event we get it from the sender
        var sender = e.sender;
        if (sender == undefined) {
            console.log("Couldn't retrieve value from Kendo Select list");
            console.log(e);
            return undefined;
        } else {       
            var defaultItem = sender.dataSource.at(sender.selectedIndex);
            return "" + defaultItem.Value;
        }
    }
}

 

I can then use this like this (you can see how it will then generate a usable result in the select and databound events):

var onPassportedBenefitInPaymentSelect = function (e) {       
        var torPassport = GetValueFromKendoSelect(this, e);
        debugger;
        if (torPassport == undefined) {
            console.log("torPassport detected as undefined in torPassportBenefitSelectHandler");
            return false;
        }
        return ProcessTORPassport(torPassport);
    }
 
    var onPassportedBenefitInPaymentDataBound = function (e) {
        var torPassport = GetValueFromKendoSelect(this, e);       
        if (torPassport == undefined) {
            console.log("torPassport detected as undefined in torPassportBenefitOnDataBoundHandler");
            return false;
        }
        return ProcessTORPassport(torPassport);
    }
 
    var ProcessTORPassport = function (torPassport) {
        var $passportedAnsweredGroup = $(".passported-answered-group");
        var $passportedNoGroup = $(".passported-no-group");
        var $passportedYesGroup = $(".passported-yes-group");
        if (torPassport == "" || torPassport == null) {
            $passportedAnsweredGroup.hide();
        } else {
            $passportedAnsweredGroup.show();
        }
        switch (torPassport) {
            case "True":
                $passportedYesGroup.show();
                $passportedNoGroup.hide();
                break;
            case "False":
                $passportedNoGroup.show();
                $passportedYesGroup.hide();
                break;
            default:
                $passportedNoGroup.hide();
                $passportedYesGroup.hide();
                break;
        }
    }

:

Perhaps the documentation could be clearer how this can be achieved, considering how simple it actually is in the end, yet  how difficult it is to find the solution.

Ivan Danchev
Telerik team
 answered on 10 Oct 2018
2 answers
216 views

Hi,

 

I discovered a problem with ClearPromptChar configuration. When I set ClearPromptChar to true, I expect that the mask signs should not be in the output. I.e. when I define mask 000-000 and insert 123-456 into the MaskedTextBoxFor the output should be 123456. I would like to avoid removing "-" manually.

Example available at: http://dojo.telerik.com/aTEROJIG/3

Should it work as I expected or I misunderstood?

 

Thanks,

   Tomas.


Tomáš Víšek
Top achievements
Rank 1
 answered on 09 Oct 2018
1 answer
691 views
Excellent Widget! Really appriciated, but somehow I can't seem to get the headertemplate working. I don't see it appear in the dropdown header. While i inspect the DOM with chrome  dev tools the 'HEADER' phrase is not found. It look's like this method does nothing. or am i mistaken?  And it would also be nice if the widget would have lambda selectors for allmost all property's. Most widget have these selectors, only using string selectors make it error prone (model change is not reflected in this string selector)

@(Html.Kendo().MultiColumnComboBoxFor(m => m)
    .DataTextField("Afkorting")
    .DataValueField("idPersoneel")
    .Filter("contains")
    .FilterFields(new string[] { "Afkorting", "OpgemaakteNaam", "Team" })
    .Columns(columns =>
    {
        columns.Add().Field("Afkorting").Title("Afkorting").Width("50px");
        columns.Add().Field("OpgemaakteNaam").Title("Naam").Width("120px");
        columns.Add().Field("Team").Width("60");
        columns.Add().Field("Omvang").Width("50");
        columns.Add().Field("Resturen").Width("50");
    })
    .HeaderTemplate("HEADER")
    .FooterTemplate("Total \\#: instance.dataSource.total() \\# items found")
    .HtmlAttributes(new { style = "width:100%;" })
    .Height(500)
    .DataSource(ds =>
        {
            ds.Read(read => read.Action("Personeelsleden", "Personeel", new { Area = "Tabellen" }).Data("passPersoneel"));
            ds.Events(e => e.Error("DataSourceRequestErrorHandler"));
        }
    )
    .ToClientTemplate()
)
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 09 Oct 2018
10 answers
812 views
I've got a grid, with a pop-up edit form, where there is some controller level validation applied before the record is saved.

The grid is defined:-
@(Html.Kendo().Grid<CMS_2013.Models.SeasonalProfile>()
.Name("Grid")
.Events(e=>e.Edit("onEdit"))
.Columns(columns=>
{
 
    columns.Bound(o => o.ID);
    columns.Bound(o => o.Profile_Code);
    columns.Bound(o => o.ProfileType);
    columns.Bound(o => o.Description);
    columns.Bound(o => o.Site);
    columns.Bound(o => o.PATCLASS);
    columns.Bound(o => o.Specialty);
     
    columns.Command(command => { command.Edit(); command.Destroy(); });
 
      
    })
  .ToolBar(commands=>commands.Create())
   .Editable(editable=>editable
        .Mode(GridEditMode.PopUp))
 
 
    .DataSource(dataSource=>dataSource
        .Ajax()
        .Model(m=>m.Id(p=>p.ID))
        .Events(events => events.Error("error"))
        .PageSize(10)
         
         
        .Read(read=>read.Action("ReadProfiles","Profiles"))
        .Create(create=>create.Action("InsertProfile","Profiles"))
        .Update(update=>update.Action("UpdateProfile","Profiles"))
        .Destroy(delete=>delete.Action("DeleteProfile","Profiles"))
        )
        .Pageable()
        .Sortable()
        .Filterable()
   
       )
The error handler is:-
function error(e) {
       if (e.errors) {
           var message = "Errors:\n";
           $.each(e.errors, function (key, value) {
               if ('errors' in value) {
                   $.each(value.errors, function () {
                       message += this + "\n";
                   });
               }
           });
 
 
           alert(message);
          
       }
 
   }

This works fine, displaying the error message if the validation fails. However, I have two problems:-

  1. After displaying the alert, the edit form is closed, so the user can't correct their error - they have to start all over again
  2. Even though the record hasn't been saved - a new record is displayed in the grid, and only after refreshing the grid does it disappear.

How can I solve these two issues?

Thanks

Preslav
Telerik team
 answered on 09 Oct 2018
1 answer
932 views

Hi, in a grid popup edit template I got a field bound like:

@Html.HiddenFor(model => model.LogoUrl)

This field represents an image URL stored in Azure Blob.

I already got a Kendo Upload in the edit template that upload the image to Azure, but in the KendoUpload success return function, I need to set the URL received by azure in the object currently edited. For now I try this:

function logoUp_onComplete(e) {
    var imgURL = e.response.url;
 
    var img = $("#LogoImage")[0];
    var data = $("#LogoUrl")[0];
 
    if (img != null) {
        $(img).attr("src", imgURL);
        $(data).val(imgURL);
    }
     
}

 

But the databinding are not hit and the underlying model is not changed. How I can achieve that?

Georgi
Telerik team
 answered on 09 Oct 2018
1 answer
193 views

Hi,

I have issue with chart after upgrade kendo libraries to R3 2018 (ver. 2018.3.911.545). Here is my code snippet:

@(Html.Kendo().Chart(Model.ListChartOfProjectHistory)
.Name("MyProjectHistoryChart")
.Series(series =>
{
series.Line(s => s.QuoteValue).Color("#8ACD16").Name("My Projects")
.Tooltip(true);
series.Line(s => s.OfficeQuoteValue).Color("#2698DB").Name("My Office Projects")
.Tooltip(true);
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0:N0}")))
.CategoryAxis(axis => axis
.Categories(c => c.MonthValue)
)
.Tooltip(tooltip => tooltip.Visible(true).Format("C2"))
.HtmlAttributes(new { style = "border-style:none;height:300px" })
.Events(events => events.LegendItemClick("refreshHistory"))
)

 

and this is my layout with references:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
    <link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.gif")" type="image/x-icon" />
    <link href="@Url.Content("~/Content/Site.css?v=123")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/css/global.css?v=123")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.dataviz.min.css?ver=1.1")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo.common.min.css?ver=1.1")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/kendo.default.min.css?ver=1.1")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.dataviz.min.js?ver=1.1")"></script>   
    <script src="@Url.Content("~/Scripts/kendo.web.min.js?ver=1.1")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js?ver=1.1")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/corners.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/menu.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

 

I also already updated it with telerik.ui.for.aspnetmvc.hotfix.2018.3.911.commercial libraries but still getting the same error. Fyi my project use MVC 5 and bootstrap 4.

Any thoughts on how to fix this greatly appreciated.

Thanks.

 

Tsvetina
Telerik team
 answered on 08 Oct 2018
2 answers
364 views

We have a Web API where the controller classes implements ApiController. 

The CRUD-operations looks like:

public IHttpActionResult Get()
public IHttpActionResult Get(int id)
public int Post(Company company)
public void Put(Company company)
public void Delete(int id)

Adding a Kendo UI ASP.NET MVC Grid that view data works, but we got stuck binding to datasource when we tried to implement inline-editable rows. 

The API methods on the demo page, https://demos.telerik.com/aspnet-mvc/grid, takes a DataSourceRequest as a parameter. 
Here it gets confusing especially when the documentation is not so comprehensive.

Can't we just use our API as it is, do we need to create yet another class where all the CRUD-operations takes the DataSourceRequest parameter?

 

Johan
Top achievements
Rank 1
 answered on 08 Oct 2018
5 answers
197 views

if I add:

.Group(g => {
                g.Add(c => c.DistrictName);
                g.Add(c => c.SchoolName);
                })

to my datasource:

.DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Action("RetrieveReqStatusReport", "ReportSupport", new { orgId = ViewBag.OrgSelection.Id, personId = ViewBag.PersonId, yearId = ViewBag.YearSelection.Id }))
            .PageSize(50)
            .Group(g => {
                g.Add(c => c.DistrictName);
                g.Add(c => c.SchoolName);
                })
        )

then

 function filterMenuInit(e) {
        if (e.field == "DueDate") return;
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });

        filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
        filterMultiCheck.createCheckBoxes();
    }

generates the following error when I try to filter:

Uncaught ReferenceError: DistrictName is not defined
    at eval (eval at compile (kendo.all.min.js:25), <anonymous>:3:209)
    at Object.render (kendo.all.min.js:25)
    at Object.d [as render] (jquery.min.js:2)
    at init.createCheckBoxes (kendo.all.min.js:45)
    at init.filterMenuInit (1:371)
    at init.trigger (kendo.all.min.js:25)
    at init.c (kendo.all.min.js:53)
    at init.trigger (kendo.all.min.js:25)
    at init._init (kendo.all.min.js:45)
    at init._click (kendo.all.min.js:45)

if I remove it, multi-filter works fine.

TIA for the insight into what I'm failing to understand.

SEAN
Top achievements
Rank 1
 answered on 07 Oct 2018
3 answers
741 views

Hi,

I need to filter a combobox based on the value of a check box.
I explain.

I have a checkbox that will start unchecked (value 0).
And below is a combobox that will use an api to fetch the data.
If the user selects this checkbox, the data from the combobox must be updated.

Very similar to this example: https://demos.telerik.com/aspnet-core/combobox/cascadingcombobox
But using the checkbox.

Can someone help me?
I am using ASP.NET MVC Core.

 

Eyup
Telerik team
 answered on 06 Oct 2018
3 answers
337 views
http://demos.telerik.com/kendo-ui/grid/aggregates

here i see an example for grid grouping. Now I want to sort the groups by the aggregate count.  I search the help document and only find sorting settings like "dir: 'desc'", which can only sort groups by field value, not the count of group elements. 

Can someone tell me how to set the configuration to make grid groups sorted by element count?
Viktor Tachev
Telerik team
 answered on 05 Oct 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?