Telerik Forums
UI for ASP.NET MVC Forum
1 answer
956 views

Hi,

I have an editor grid that has one editable cell. I want that cell to always be the input box (numeric text box in this case) instead of going back to a regular dirty cell after clicking out. So basically always keeping cells in edit mode.How can I achieve this? See attached image for example of what I mean.

 

Tsvetomir
Telerik team
 answered on 10 Jan 2020
4 answers
553 views
I'm using a Kendo Editor in TextArea mode, is there a way I can configure the styles (font, size, color) it applies to the content by default?
Petar
Telerik team
 answered on 10 Jan 2020
3 answers
700 views

Hi,

We have a grid with a detail template containing a tabstrip - much like the demo at https://demos.telerik.com/aspnet-mvc/grid/detailtemplate .

Three tabs got their content from calling controller actions which returned different Partial views.

We do not need to show multiple tabs now - we only need to show one so do not need the tabstrip control.

How can we keep the same method of getting the detailtemplate content from a controller action partialview without the tab strip?

The data is a single model - not a listing - so not suited to a grid or listview.

Many Thanks.

Nikolay
Telerik team
 answered on 09 Jan 2020
1 answer
306 views

Hi all,

I am trying to make an HtmlHelper to create sub grids by passing an ISubGridBuilder which will contain the construction detail of my sub grid.

Example:

public interface ISubGridBuilder
{
   string ActionName { get; }
   string ControlerName { get; }
   void BuildColumns(GridColumnFactory<dynamic> gcf);
}
 
public static MvcHtmlString SubGridClient(this HtmlHelper html, ISubGridBuilder builder)
{
   return html.Kendo().Grid<dynamic>()
      .Name("detailGrid")
      .Navigatable(n => n.Enabled(true))
      .Selectable(s => s
         .Mode(GridSelectionMode.Single)
         .Type(GridSelectionType.Row))
      .Columns(gcf =>
      {
         gcf.Bound("ParentId").Hidden(true);
         gcf.Bound("Id").Hidden(true);
         builder.BuildColumns(gcf);
      })
      .DataSource(d => d
         .Ajax()
         .Model(m =>
         {
            m.Id("Id");
            m.Field("ParentId", typeof(int));
         })
         .Read(r => r.Action(builder.ActionName, builder.ControlerName, new {Id = "#=ParentId#" }))
         .PageSize(3)
      )
      .Pageable(p => p
         .AlwaysVisible(false)
         .PageSizes(new[] { 3 })
      )
      .Events(e => e.Change("function(e) { onChange(e)}"))
      .ToClientTemplate();
}


The problem is that at runtime I get a reference error:

VM17183:3 Uncaught ReferenceError: ParentId is not defined
    at Object.eval [as tmpl0] (eval at compile (kendo.all.js:234), <anonymous>:3:12352)
    at Object.eval (eval at compile (kendo.all.js:234), <anonymous>:3:185)
    at d (jquery.min.js:2)
    at HTMLAnchorElement.<anonymous> (kendo.all.js:64799)
    at HTMLTableElement.dispatch (jquery.min.js:3)
    at HTMLTableElement.r.handle (jquery.min.js:3)

How can I add the ParentId parameter on the routeValues for the controller call.

Thank you!

Tsvetomir
Telerik team
 answered on 09 Jan 2020
3 answers
1.5K+ views

Hello,

We have an MVC project that uses the Kendo MVC grid to return well data records.  Because we use paging and can return several thousand records, we're using Ajax with server side paging like this (abbreviated):

@(Html.Kendo().Grid<GroundWater.Models.GroundWaterSearchResult>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.well_id).Title("Well ID").Width(75).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Well_Name).Title("Well Name").Width(105).Locked(true);
              columns.Bound(p => p.Permit).Title("PermitNo").Width(90);
              columns.Bound(p => p.Well_Depth).Title("Well Depth").Width(64).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Water_Level_Depth).Title("Water Level Depth").Width(66).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
               columns.Bound(p => p.Measurement_By).Title("Measurement By").Width(111);
              columns.Bound(p => p.publication_name).Title("Publication Name").Width(93);
              columns.Bound(p => p.Elevation).Title("Elevation").Width(78).Format("{0:n2}").HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Elevation_Accuracy).Title("Elevation Accuracy").Width(121);
              columns.Bound(p => p.Top_Perforated_Casing).Title("Top Perforated Casing").Width(84).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Bottom_Perforated_Casing).Title("Bottom Perforated Casing").Width(85).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Base_of_Grout).Title("Base of Grout").Width(65).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Contact).Title("Owner").Width(130);
              columns.Bound(p => p.DIV).Title("DIV").Width(54).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.WD).Title("WD").Width(54).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.County).Title("County").Width(69);
              columns.Bound(p => p.basin).Title("Designated Basin").Width(91).HtmlAttributes(new { style = "text-align: right;" });
              columns.Bound(p => p.Management_District).Title("Management District").Width(91);
          })
          .Pageable(pager => pager
              .PageSizes(true)
              .PageSizes(new int[] { 10, 20, 50, 100 }))
          .Sortable(sorting => sorting.AllowUnsort(false))
          .Scrollable(scroll => scroll.Height(500))
          .Filterable()
          .Resizable(resize => resize.Columns(true))
          .Reorderable(reorderable => reorderable.Columns(true))
          .ColumnMenu()
          .DataSource(dataSource => dataSource
              .Ajax()
              .Read(read => read.Action("Wells_Read", "GroundWaterSearch").Data("filterData"))
              .ServerOperation(true)
              .PageSize(50)
          )
)

And the JS 

<script>
    function filterData() {
        return {
            Publication: document.getElementById('publicationArea').value
            //WellName: document.getElementById('wellname').value,
            //StartDate: document.getElementById('startdate').value,
            //EndDate: document.getElementById('enddate').value,
            //ContrArea: document.getElementById('contributingarea').value,
            //WaterDistrict: document.getElementById('waterdistrict').value
            //........ up to 10 additional fields

        };
    }
</script>

And the Controller looks like this:

 public ActionResult Wells_Read([DataSourceRequest]DataSourceRequest request, string Publication, ......add more parameters)
        {
            List<string> criteria = new List<string>();
            GetPublicationArea(Publication, criteria);

           .... additional search criteria

            var tempCalls = CallMgrData.GetGroundWaterLevelsResult(criteria);
            List<GroundWaterSearchResult> values = tempCalls.ResultSet.Select(x => ModelMapper.Map<GroundWater, GroundWaterSearchResult>(x)).ToList();
            DataSourceResult result = values.ToDataSourceResult(request);
            return Json(result);
        }

My question is, what are my options for returning the additional parameters to the Controller?  The View contains complex search criteria (including strings, numbers, and datetime) so I need to return up to 16 parameters from the DataSource.   I don't really want to keep adding a long list of parameters (many would or could be null).  I would rather return a single object to the controller.  I read somewhere I can pass a class object or maybe a json string as the DataSource.Data?  Any help would be appreciated.  Thanks

Viktor Tachev
Telerik team
 answered on 09 Jan 2020
1 answer
1.0K+ views

Hi I have need to display multiple dynamic grid on single page. I created partial view with dynamic grid binding and passing model and method name to bind data from view. First grid displays data and call data read action but rest of the grid do not display data or call method. It shows column names but no data. 

This is partial view

@(Html.Kendo().Grid<dynamic>()
        .Name(@ViewData["Name"].ToString())
        .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName);
        }
    })
        .Pageable()
        .Sortable()
        .Filterable()
        .Groupable()
        .Scrollable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
        .Model(model =>
            {
                 foreach (System.Data.DataColumn column in Model.Columns)
                    {
                        var field = model.Field(column.ColumnName, column.DataType);
 
                    }
            })
        .Read(read => read.Action(@ViewData["ActionName"].ToString(), "RunData"))
    )
    )

 

 

In main view I am passing list of datatable and in partial view it is getting datatable from ajax call. I have created 3 separate method (ReadData1, ReadData2, ReadData3) in RanData controller.
Thanks in advance.

 

@model List<System.Data.DataTable>
 
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
 
    <div>
        @{Html.RenderPartial("dGrid", Model[0], new ViewDataDictionary { { "ActionName", "ReadData1" },  { "Name", "Grid1" } });}
    </div>
 
   <div>
        @{Html.RenderPartial("dGrid", Model[1], new ViewDataDictionary { { "ActionName", "ReadData2" } ,  { "Name", "Grid2" } });}
    </div>
 
   <div>
       @{Html.RenderPartial("dGrid", Model[2], new ViewDataDictionary { { "ActionName", "ReadData3" }, { "Name", "Grid3" } });}
 
   </div>
Sadaf
Top achievements
Rank 1
 answered on 09 Jan 2020
1 answer
279 views
why is there no option to set a drop down list from readonly back into an editable mode?
Martin
Telerik team
 answered on 08 Jan 2020
4 answers
636 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
840 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
120 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
Licensing
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?