Telerik Forums
UI for ASP.NET MVC Forum
4 answers
708 views

I have added the cancel event to my grid as follows:

.Events(e => e.Cancel("onCancel")

.......

function onCancel(e) {

......

}

However the function is not being called when I click "Cancel Changes".  According to the documentation, the Cancel event is only fired in the other two edit modes.  How is it possible to trap the clicking of this button in the toolbar?

Many thanks,

Colin

Viktor Tachev
Telerik team
 answered on 08 Jan 2020
5 answers
891 views

Hi there i have a simple page that has three drop-down fields and grid. The grid has a drop-down column(Product) which is made possible by using an editortemplate, the grid is also in a separate file and is loaded in a partial view. The problem i am running into is when i load the grid using the MVC razor syntax, the drop-downlist in the grid works when i try to add a new entry.

<div class="col-md-12" id="scritpureImpactPlaceHolder">
    @Html.Partial("../MinistryImpact/SBase")
</div>

However, when i load the grid using JQuery ajax and try to add a new entry, the grid throws an error saying that the editortemplate is not defined.

$.get('GetGrid', function (data) {
        $('#scritpureImpactPlaceHolder').html(data);
        /* little fade in effect */
        $('#scritpureImpactPlaceHolder').fadeIn('fast');   
})

Here is the rest of my code.

Index.cshtml

@using (Html.BeginForm())
{
    <div class="form-horizontal">
 
        <h3 style="text-align:center; font:bold;  text-decoration: underline;">Ministry Impact</h3>
        <div class="customHr">.</div>
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <p> </p>
        <div class="form-group">
            @Html.Label("Partner:", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().DropDownList()
                                    .Name("PartnerID")
                                    .OptionLabel("Select Partner")
                                    .Events(e => e.Change("onPartnerChange"))
                                    .BindTo(ViewData["PartnersList"] as IEnumerable<SelectListItem>)
                                    .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                )
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Fiscal Year:", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().DropDownList()
                            .Name("FiscalYearID")
                             .HtmlAttributes(new { style = "width:35%" })
                             .OptionLabel("Select Fiscal Year")
                              .Events(e => e.Change("onFiscalYearChange"))
                              .BindTo(ViewData["FiscalYearList"] as IEnumerable<SelectListItem>)
                             .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                )
            </div>
        </div>
 
        <div class="form-group">
            @Html.Label("Project:", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().DropDownList()
                             .Name("ProjectKeyID")
                              .OptionLabel("Select Project")
                              .Events(e => e.Change("onProjectChange"))
                              .DataTextField("ShortNameAndProjectNumber")
                              .DataValueField("ProjectKeyID")
                              .DataSource(source =>
                               {
                                  source.Read(read =>
                                  {
                                    read.Action("GetProjectList", "MinistryImpact").Data("filterProject");
                                   }).ServerFiltering(true); ;
                                })
                               .Enable(false)
                               .AutoBind(false)
                               .CascadeFrom("PartnerID")
                               .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                )
                 <span id="ProgramName" class="control-label"> </span>
            </div>
        </div>
 
        <div class="form-group">
            @Html.Label("Month:", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @(Html.Kendo().DropDownList()
                             .Name("MonthID")
                             .OptionLabel("Select Month")
                              .Events(e => e.Change("onMonthChange"))
                              .BindTo(ViewData["MonthList"] as IEnumerable<SelectListItem>)
                              .HtmlAttributes(new { style = "width:25%; font-size:90%" })
                )
            </div>
        </div>
 
        <div class="form-group" id="scriptureImpactContainer">
            <div class="col-md-12" id="scritpureImpactPlaceHolder">
 
            </div>
        </div>
    </div>
}

 

//Grid

@(Html.Kendo().Grid<P2I_UI.Models.ViewM.ScriptureImpactVM>()
    .Name("MinistryScriptureImpact")
    .Columns(columns =>
    {
        columns.Bound(c => c.ProductNumber).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.Product).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" }).ClientTemplate("#=Product.ItemNumberAndTitle#");
        columns.Bound(c => c.AnnualGoal).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.October).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.November).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.December).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.January).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.February).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.March).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.April).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.May).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.June).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.July).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.August).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.September).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.FiscalYearToDate).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
        columns.Bound(c => c.PercentageOfPlan).HeaderHtmlAttributes(new { style = "font-weight:bold; text-align:center; font-size:80%" });
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
 
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(events =>
    {
        //events.DataBound("onDataBound");
    })
    .AutoBind(false)
    .DataSource(dataSource => dataSource
    .Ajax()
    .Sort(s =>
    {
        s.Add(p => p.ProductNumber).Ascending();
    })
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(p => p.ScriptureImpactID);
        model.Field(p => p.Product).DefaultValue(ViewData["defaultProduct"] as P2I_UI.Models.ViewM.ProductTwoVM);
    })
    .Events(events1 =>
    {
        events1.RequestEnd("requestEnd");
    })
    .Create("MinistryScriptureImpact_Create", "MinistryImpact")
    .Read(read => read.Action("MinistryScriptureImpact_Read", "MinistryImpact").Data("additionalData"))
    .Update(update => update.Action("MinistryScriptureImpact_Update", "MinistryImpact"))
    )
)

How do i solve this problem ?. thanks

 

Georgi
Telerik team
 answered on 07 Jan 2020
3 answers
213 views

I'm having quite a bit of difficulty displaying selected/default values in a DropDownList. I created an appropriate ViewModel:

namespace KendoVolunteerApp.Models.ViewModels
{
    public class OrganizationViewModel
    {
        public int OrganizationId { get; set; }
        public string Name { get; set; }
    }
}

and Controller

using KendoVolunteerApp.Models;
using KendoVolunteerApp.Models.ViewModels;
using System.Linq;
using System.Web.Mvc;
namespace KendoVolunteerApp.Controllers
{
    public class DropDownListController : Controller
    {
        private VolunteersDbContext db = new VolunteersDbContext();
        // GET: DropDownList
       
        public ActionResult DropDownList()
        {
            return View();
        }
        public JsonResult DropDownList_GetOrganizations()
        {
            var organizations = db.Organizations.Select(organization => new OrganizationViewModel
            {
                OrganizationId = organization.OrganizationId,
                Name = organization.Name
            });
            //if  (!string.IsNullOrEmpty(text))
            //{
            //    organizations = organizations.Where(p => p.Name.Contains(text));
            //}
            return Json(organizations, JsonRequestBehavior.AllowGet);
        }
    }
}

The DropDownList is part of a custom editor template.

. . .

 <div>
            <div class="form-group col-md-4">
                <div class="k-label-top">
                    @Html.LabelFor(model => model.Organization)
                </div>
                <div class="k-dropdown">
                    @(Html.Kendo().DropDownListFor(model => model.Organization)
                           .Name("organizations")
                           .Filter("contains")
                           .DataTextField("Name")
                           .DataValueField("OrganizationId")
                           .OptionLabel("Select organization....")
                           .DataSource(source =>
                           {
                               source.Read(read =>
                               {
                                   read.Action("DropDownList_GetOrganizations", "DropDownList");
                               }).ServerFiltering(true);
                              
                           })
                           .HtmlAttributes(new { style = "width: 300px" })                    )
                </div>
            </div>

. . .

 

The DropDownList is being populated, as it should. My issue is that I need to have a particular organization selected by default, in those scenarios where a volunteer is part of an organization. Organization is not  required field, as not all volunteers belong to an organization. There is no relationship between the two tables. The name of the organization is stored in the organization field of the volunteer table.

It's setting this selected/default value that is giving me problems.

I've been through various examples, but could not find anything that met my needs. Any help or suggestions would be very much appreciated.

 

Thank You

 

Veselin Tsvetanov
Telerik team
 answered on 06 Jan 2020
2 answers
3.8K+ views

We have a grid which is configured for batch in-cell editing. There is a conditional rule where if the user selects certain types of 'Code' in one column, then another column becomes required. We have implemented this with the following code in the onEdit event of the grid:

if (e.model.code == "A" || e.model.code == "B" || e.model.code == "C" || e.model.code == "D") {
            $("#column_LongNameId").attr("required", true);

}

The issue is the name of the column, "column_LongNameId" is long and user-unfriendly and as such, the 'required' pop-up which appears when the user clicks Save Changes, has the message appears "column_LongNameId is required".

We would like to set a custom validation message somehow, such that it simple says "'Name' is required", but cannot find a way via the grid APi or kendo validator to set this message. The conditional-logic nature of the rule plus the fact that we require In-Cell grid editing also makes this difficult to implement via validation rules.

How can we modify/change this validation message?

Andrei
Top achievements
Rank 1
 answered on 02 Jan 2020
2 answers
314 views
How do you add a PopOver to a Kendo Button when using the MVC wrapper, will not let me add 'data-toggle' and 'data-content' to HtmlAttributes, if anyone has an example it would be appreciated, thanks.
Peter
Top achievements
Rank 1
 answered on 02 Jan 2020
1 answer
400 views

When converting an existing application to use Bootstrap 4, I spent a fair amount of time trying to figure out restore right-align to menu items, so I thought I would share what I found.

Basically, it is as simple as adding the new Bootstrap class "ml-auto" to the first menu item that you wish to be right-aligned; if there are additional menu items added after that one, they too will be right-aligned, but do not need to have the class added.

I am using a SiteMap to build my menu, so I have added my own attributes to the SiteMap (see image) to configure this and other characteristics, e.g. icons. The Menu itself is added as a Partial View, and the partial contains the logic to add the custom configurations in the BindTo method (see image).

Additionally, I am using the responsive panel to toggle the menu to vertical below a breakpoint, so in my panel implementation I check the window width to remove or add the "ml-auto" class to control the display, i.e. remove the right alignment during vertical orientation and restore it when horizontal (see image)

Hope this helps someone...

 

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 02 Jan 2020
3 answers
572 views

I'm converting a legacy form to Telerik UI, DropDownListForm "onchange" event works without changing anything while the NumericTextBoxFor "change" and "spin" events don't work, do you know why? Here is the relevant source code of my view:

<div class="form-group">
              @Html.LabelFor(m=>m.Quantity, new { @class = "col-md-3 control-label" })
              <div class="col-md-4">
                  @*@Html.TextBox("quantity", Session["quantity"].ToString(), new { @class = "form-control", onchange = "this.form.submit();" })*@
                 
              @(Html.Kendo().NumericTextBoxFor(model=>model.Quantity).Decimals(2).Format("n0").HtmlAttributes(new { style = "width: 100%", @class = "form-control", change = "this.form.submit();", spin = "this.form.submit();"}))
              </div>
          </div>
 
          <div class="form-group">
              @Html.LabelFor(m=>m.SelectedYear, new { @class = "col-md-3 control-label" })
              <div class="col-md-4">
                  @*@Html.DropDownList("numYears", (List<SelectListItem>)ViewBag.PossibleYears, new { @class = "form-control", onchange = "this.form.submit();" })*@
 
                  @(Html.Kendo().DropDownListFor(model => model.SelectedYear).BindTo(Model.YearList).HtmlAttributes(new { style = "width: 100%", @class = "form-control", onchange = "this.form.submit();" }))
              </div>
          </div>
Tsvetomir
Telerik team
 answered on 02 Jan 2020
3 answers
2.3K+ views

Hello,

I need to reload the grid based on a  selection from a drop-down list.  I don't want to pre-load the grid and then filter, I only want  the grid to be populated after a change in selected value.
I have the drop-down list, and  the onChange event set up and working, the problem i am having is with the grid, its not re-loading or re-freshing with the data that is returned and i don't know why. Here is my code.

Index.cshtml

<div class="demo-section k-content">
    <h4>Parents:</h4>
    @(Html.Kendo().DropDownList()
              .Name("parents")
              .HtmlAttributes(new { style = "width:25%" })
              .OptionLabel("Select parent...")
              .DataTextField("FirstName")
              .DataValueField("ParentId")
              .Events(e => e.Change("onChange"))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetParents", "ParentChild");
                  });
              })
    )
</div>
 
<br class="clear" />
<br />
@(Html.Kendo().Grid<JustTestingWeb.Models.ChildViewModel>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(c => c.ChildId).Title("ChildID").Width(40);
              columns.Bound(c => c.ChildParentID).Title("ParentID").Width(40);
              columns.Bound(c => c.FirstName).Width(80);
              columns.Bound(c => c.LastNme).Width(80);
          })
          .Pageable()
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.SingleColumn);
          })
          .AutoBind(false)
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(false)
              .PageSize(5)
              .Model(model => { model.Id(p => p.ChildId);  })
              .Read(read => read.Action("Get_Child_By_Id", "ParentChildController").Data("additionalData"))
          )
    )
 
<script type="text/javascript">
    $(document).ready(function () {
        var parents = $("#parents").data("kendoDropDownList");
 
        $("#get").click(function () {
            var parentInfo = "\nParent: { parentid: " + parents.value() + ", pfname: " + parents.text() + " }";
        });
    });
 
    function additionalData(e) {
        var value = $("#parents").data("kendoDropDownList").value();
        return { parentid: value }; // send the parent id value as part of the Read request
    }
 
    function onChange() {
        var pid= this.value();
        alert(pid);
        $.get('/ParentChild/Get_Child_By_Id', { parentid: pid}, function (data) {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read(); // rebind the Grid's DataSource
        })
    }
</script>
<style>
    .k-readonly {
        color: gray;
    }
</style>

And here is the controller class

public class ParentChildController : Controller
{
    public DbQuery db = new DbQuery();
    // GET: ParentChild
    public ActionResult Index()
    {
        return View();
    }
 
 
    public JsonResult GetParents()
    {
        var parents= db.GetParents();
 
        return Json(parents.Select(p => new { ParentId = p.ParentId, FirstName = p.FirstName }), JsonRequestBehavior.AllowGet);
    }
 
    public  ActionResult Get_Child_By_Id([DataSourceRequest]DataSourceRequest request, int parentid)
    {
        var result = db.GetChildren(parentid);
 
        var children = result
            .Select(c => new ChildViewModel(c.ChildParentID,c.ChildId,c.FirstName,c.LastNme))
            .ToList();
 
        return Json(children.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }
 
}
Antony
Top achievements
Rank 1
Iron
 answered on 30 Dec 2019
1 answer
207 views

Im trying to make a Grid with inCell editing with a DropdownList in one cell.

The DropDownList is not shown correcty. When i click the cell i see a textfield for the id and the name.

@{
    ViewBag.Title = "Roles";
}
 
<h2>Roles</h2>
 
@(Html.Kendo().Grid<GridRole>()
    .Name("grid")
 
    // Die Spalten definieren
    .Columns(column =>
    {
        column.Bound(r => r.Id);
        column.Bound(r => r.Name);
        column.Bound(r => r.Description);
        column.Bound(r => r.App).ClientTemplate("#=App.AppName#").Sortable(false).Width(180);
        column.Command(command => command.Destroy()).Width(150);
    })
 
    // Toolbar definieren
    .ToolBar(toolbar =>
    {
        toolbar.Create();
         // toolbar.Save();
    })
 
    // Das editieren findet innerhalb der Zeile statt
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Filterable()
    .Selectable()
    .Sortable()
    .Scrollable()
    .AutoBind(true)
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
            model.Field(p => p.Name).Editable(true);
            model.Field(p => p.App).DefaultValue(
                ViewData["defaultApp"] as SelectedApp);
        })
        .PageSize(20)
        .Read(read => read.Action("Roles_Read", "Roles"))
        .Create(create => create.Action("Roles_Create", "Roles"))
    // .Update(update => update.Action("EditingCustom_Update", "Grid"))
    // .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
    )
)
 
<script type="text/javascript">
    function error_handler(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);
        }
    }
</script>
 
 
 
public class GridRole
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public Guid AppId { get; set; }
        public SelectedApp App {get; set;}
    }
 
    public class SelectedApp
    {
        public Guid AppId { get; set; }
        public string AppName { get; set; }
    }
 
@model SelectedApp
 
@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("AppId")
        .DataTextField("AppName")
        .BindTo((System.Collections.IList)ViewData["apps"])
)
Tsvetomir
Telerik team
 answered on 24 Dec 2019
1 answer
732 views

I have a set of data where for any given date, there is a number for each of five geographic regions. When I try to put this data in a pie chart, I get 5n different series in my pie chart, where n is the number of days of data. I just want the chart to add all the data for each region, no matter how many days, so that I just have five different series.

I've been scouring the documentation and forums for hours, but the only lead is Pie Chart Data Aggregates, which is only for the jQuery version of Kendo. I'm trying to get this to work for MVC, but the documentation for MVC Aggregates is completely unhelpful. How can I get the functionality I'm looking for?

Nikolay
Telerik team
 answered on 24 Dec 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? 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?