Telerik Forums
UI for ASP.NET MVC Forum
1 answer
103 views
Hi,

We are evaluating the scheduler control for our application.
We need to add a checkbox on top of each day caption.Please see the attached image. Is there any options to do that?

Thanks,
Jazeel 
Vladimir Iliev
Telerik team
 answered on 11 Mar 2015
1 answer
366 views
I have a custom command and when i clicked it, i want to call an ajax function and if it returns, i want it to be disable. I have more than 1000 rows , and i want to refresh only related row. 

@(Html.Kendo().Grid<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.JointNo).Width(140);
            columns.Bound(c => c.WlbJointLocation).Width(190);
            columns.Command(command => command.Custom("FitUp").Click("showDetails"));
 
        })
 
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
                .Read(read => read.Action("Grid_Read", "WlbExplorer"))
        )
)
@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
)
 
<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= JointNo # #= JointNo #</h2>
        <em>#= WlbJointLocation #</em>
        <dl>
            <dt>City: #= WlbJointLocation #</dt>
            <dt>Address: #= WlbJointLocation #</dt>
        </dl>
         
    </div>
</script>
 
 
 
<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());
 
    function showDetails(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
 
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>
Alexander Popov
Telerik team
 answered on 11 Mar 2015
2 answers
1.5K+ views
I have an Ajax populated treeview....
@(Html.Kendo().TreeView()
    .Name("fao")
    .HtmlAttributes(new {@class="fixed-height" })
    .DataTextField("Text")
    .TemplateId("treeview-item-template")
    .DataSource(ds => ds
        .Read(r => r
            .Action("_ModuleData", "Home")
        )
        .Model(m => m
            .Children("Items")
            .HasChildren("HasChildren")
        )
    )
)

I have a requirement to update some data hidden against each child item - in the template - when a action (triggered outside of the control) occurs.

The template, for completeness, looks like this ...

<script id="treeview-item-template" type="text/kendo-ui-template">
    #= item.Text #<input type='hidden' class='hidden-data' data-fal='#= item.Fal#' data-uid='#=item.uid#'/>
</script>

Now, I have code for the trigger and that works just fine.

I have code to update the hidden data. Again. No worries.

What I can't figure out is how to simply get at all of the child (and granchild, etc) nodes of the node that is selected when the trigger fires.

If I were trying to get at the children when the node was initially clicked, I kind of expected to be able to say something like...

function doSomething(e)
{
    for(n=0; n<e.node.nodes.length; n++)
    {
        doSomethingElse(e.node.nodes[n]);
    }
}

But no such functionality seems to exist.

Does anyone have any suggestions how I might go about this?









Alex Gyoshev
Telerik team
 answered on 11 Mar 2015
2 answers
86 views
I implemented inline editing for one of my Model(ClassRoom). And this model has a foreignkey coloumn which maps to the other table.(Teacher).
But i have 100.000+ Teachers in my database. What is the efficient way to load Teachers.

NOTE: (Also Teached is in the filter coloum. ) 
Vladimir Iliev
Telerik team
 answered on 11 Mar 2015
1 answer
1.1K+ views
Hi, 
I am trying to put a cascading dropdowns into my GridView and for first step, i want to create a basic editor template. 
It is working while in edit mode, but in read-mode, i could not figure how i shoul read. This field is WlbLine property. 

How can i get the WlbLine.LineNo in grid-Read-Mode. 

Here is my view:

@model IEnumerable<Umki2.Areas.Wlb.ViewModels.VmWlbWeldLogBook>


@(Html.Kendo().Grid(Model)
         .Name("grid")
         .DataSource(ds => ds
         .Ajax()
         .PageSize(20)
         .Model(model =>
         {
             model.Id(a => a.Id);
             model.Field(a => a.Id).Editable(false);
             model.Field(a => a.PID).Editable(false);
 
         })
             .Create(create => create.Action("Grid_Create", "WlbWeldLogBook"))
                     .Read(read => read.Action("Grid_Read", "WlbWeldLogBook"))
                     .Update(update => update.Action("Grid_Update", "WlbWeldLogBook"))
                     .Destroy(destroy => destroy.Action("Grid_Destroy", "WlbWeldLogBook"))
         )
         .Columns(p =>
         {
             p.Command(commands =>
             {
                 commands.Edit();
                 commands.Destroy();
             }).Title("").Width(180).Locked();
 
 
             p.Bound(c => c.WlbLine).Width(160);
             p.ForeignKey(c => c.WlbSpoolId, (System.Collections.IEnumerable)ViewData["WlbSpoolId"], "Id", "SpoolNo").Width(110).Locked(true).Lockable(false);
             p.Bound(c => c.PID).Width(200);
             p.Bound(c => c.JointNo).Width(110).Locked(true).Lockable(false);
             p.Bound(c => c.WeldingProcess).Width(200);
             p.Bound(c => c.WlbJointLocation).Width(200);
             p.Bound(c => c.WlbJointType).Width(200);
             p.ForeignKey(c => c.WrhIdentity1Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);
             p.ForeignKey(c => c.WrhIdentity2Id, (System.Collections.IEnumerable)ViewData["WrhIdentityList"], "Id", "IdentityNo").Width(110);
 
         })
             .ToolBar(toolbar =>
             {
                 toolbar.Create();
                 toolbar.Excel();
             })
     .Editable(editable => editable.Mode(GridEditMode.InLine))
     .Pageable()
     .Sortable()
     .Groupable()
     .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
     .Resizable(resizable => resizable.Columns(true))
     .Scrollable(scrollable => scrollable.Height(430))
     .Reorderable(reorderable => reorderable.Columns(true))
     .ColumnMenu()
     .Excel(excel => excel
         .FileName("LineList_" + System.DateTime.Now + ".xlsx")
         .Filterable(true)
         .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
         )
                 )

And my editor template WlbLine.cshtml

@model Umki2.Areas.Wlb.Models.WlbLine
 
@(Html.Kendo().DropDownListFor(m => m)
                  .AutoBind(false)
                  .OptionLabel("Select Line...")
                    .DataTextField("LineNo")
                  .DataValueField("Id")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetLines", "WlbWeldLogBook", new { area = "Wlb" }))
                                .ServerFiltering(true);
                  })
)
@Html.ValidationMessageFor(m => m)


Finally my controller : 

public JsonResult GetLines()
       {
           return Json(
   db.WlbLine.Select(x => new
   {
       Id = x.Id,
       LineNo = x.LineNo
   }), JsonRequestBehavior.AllowGet);
 
       }
 
       public ActionResult Index()
       {
           ViewBag.WlbSpoolId = db.WlbSpool.ToList();
           ViewBag.WrhIdentityList = db.WrhIdentityList.ToList();
           return View();
       }
 
       public ActionResult Grid_Read([DataSourceRequest]DataSourceRequest request)
       {
           IQueryable<WlbJoint> WlbJoint = db.WlbJoint;
 
           var model = from o in db.WlbJoint
                       select new VmWlbWeldLogBook
                       {
                           Id = o.Id,
                           JointNo = o.JointNo,
                           WeldingProcess = o.WeldingProcess,
                           WlbJointType = o.WlbJointType,
                           WlbJointLocation = o.WlbJointLocation,
                           WlbSpoolId = o.WlbSpoolId,
                           WrhIdentity1Id = o.WrhIdentity1Id,
                           WrhIdentity2Id = o.WrhIdentity2Id,
                           WlbLineId = o.WlbSpool.WlbIsometric.WlbLineId,
                           PID = o.WlbSpool.WlbIsometric.WlbLine.PID
 
                       };
           DataSourceResult result = model.ToDataSourceResult(request);
           return Json(result);
       }

Vladimir Iliev
Telerik team
 answered on 11 Mar 2015
1 answer
284 views
OK.

I know I'm not the brightest button in the box, but I feel even more stupid after spending the better part of a day trying to work this out.

I have a gauge with 5 values and I want to put a text label next to the major tick of each one on the chart but I can't get anything to work.

My chart definition looks like this...

@(Html.Kendo().LinearGauge()
    .Name("progressGauge")
    .Pointer(pointer => pointer
        .Value(2.5)
        .Shape(GaugeLinearPointerShape.Arrow)
    )
 
    .Scale(scale => scale
        .MajorUnit(1)
        .MinorUnit(0.5)
        .Max(4)
        .Vertical(false)
        .Ranges(ranges =>
        {
            ranges.Add().From(0).To(1).Color("#dbe5f1");
            ranges.Add().From(1).To(2).Color("#cadbf0");
            ranges.Add().From(2).To(3).Color("#b2c9e5");
            ranges.Add().From(3).To(4).Color("#94b6df");
        })
    )                            
)

I'm trying to put in a template that will allow the value of the label to be changed.

A post on StackOverflow pointed me in the right direction (I think) but it assumed I was working with kendo directly. It's my attempt to get the template working with the MVC wrappers that has me stumped.

A line like this works...

.Labels(x=>x
    .Template("#= 't' #")
)

insomuch that it prints 't' as the label for each item, so it's of no practical help.

Any kind of JS just returns an error. for example, ...

.Labels(x=>x
    .Template("# 'function(r){ return 't'} #")
)

reports the following error in Chrome...

Uncaught Error: Invalid template:'# 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''; 'function(r){ return 't'} ;$kendoOutput+='';}return $kendoOutput;'

I wondered if the JS was simply being executed, so I tried this ...

.Labels(x=>x
    .Template("#= 'function(r){ return 't'} #")
)

and that get's me a slightly different error....

Uncaught Error: Invalid template:'#= 'function(r){ return 't'} #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''+( 'function(r){ return 't'} )+'';}return $kendoOutput;'

So, I'm falling at the first fence,. The most frustrating thing is that I can't find any meaningful documentation.

Can some one PLEASE help me?





Danail Vasilev
Telerik team
 answered on 11 Mar 2015
1 answer
809 views
Hi All,
I am stuck with a very small problem. Please help me in solution to the problem.
Basically, I need to compare the value in the BatchingStatus field in my dataset accordingly need to disable the checkbox in the grid.
Following is my code. Attached the screen shot of portal.

@using (Html.BeginForm("ReplaySelectedMessages", "Home"))
   {
        
    <div id="gridContent">
       <h1></h1>  
    @(Html.Kendo().Grid<XYZ.MessageReplay.MvcApp.Models.LogModel>(Model)
    .Name("gridTable") 
   //.EnableCustomBinding(true)
   
    .HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})       
    .Columns(columns => 
        {
          
            columns.Template(@<text>#if(@item.BatchingStatus) == 0 { # <input class='box'  id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' /> #} else {# <input class='box'  id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' disabled='disabled'/> #} # </text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
            columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);           
            columns.Bound(p => p.ReceivePortName)
                .Width(100)
                .Filterable(ft => ft.UI("ReceivePortsFilter").Extra(false));          
            columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter").Extra(false));
            columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
            columns.Bound(p => p.ControlID).Width(100).Filterable(e => e.Extra(false));
            columns.Bound(p => p.SenderID).Width(100).Filterable(ft => ft.UI("SenderIDFilter").Extra(false));
            columns.Bound(p => p.ReceiverID).Width(100).Filterable(ft => ft.UI("ReceiverIDFilter").Extra(false));
            columns.Bound(p => p.InterchangeID).Width(100).Filterable(e => e.Extra(false));
            columns.Bound(p => p.ReplayedCount).Width(100).Filterable(e => e.Extra(false));
            columns.Bound(p => p.RetryCount).Width(100).Filterable(e => e.Extra(false));
            columns.Bound(p => p.AckCode).Width(100).Filterable(e => e.Extra(false));
            columns.Bound(p => p.BatchingStatus).Width(100).Filterable(e => e.Extra(false));
        })
           // .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Filterable()
            .Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
            .Sortable()
            .Scrollable(src => src.Height("auto"))
            .Resizable(resize => resize.Columns(true))
            )



Tim
Top achievements
Rank 1
 answered on 10 Mar 2015
1 answer
98 views
I show you the scenario, we have a combobox with filter “contains”. 

Combobox ProductorSearch
@model int
 
@(Html.Kendo().ComboBox()
    .Name("ContactID")
    .HtmlAttributes(new { style = "width:300px" })
    .AutoBind(false)
    .Placeholder("Escriu...")
    .DataTextField("Nom")
    .DataValueField("ContactID")
    .Filter(FilterType.Contains)
    .MinLength(4)
    .DataSource(source =>
    {
        source.Read(read => read.Action("SearchProductors", "Productors", new { area = "Comercial" }).Data("filterProductors"))
            .ServerFiltering(true);
    })
    //.HeaderTemplateId("ProductorSearch_HeaderTemplate")
    .TemplateId("ProductorSearch_ItemTemplate")
)
 
<script id="ProductorSearch_HeaderTemplate" type="text/x-kendo-tmpl">
    <div>
        <span class="k-widget k-header">Productor</span>
        <span class="k-widget k-header">Poblacio</span>
    </div>
</script>
<script id="ProductorSearch_ItemTemplate" type="text/x-kendo-tmpl">
    <div style="width:300px">
        @*<span class="k-state-default">#: data.Poblacio #</span>*@
        <p><span class="k-state-default">#: data.Nom #</span><span class="k-state-default">#: data.Poblacio #</span></p>
    </div>
</script>

Model
public class CollectServiceViewModel
    {
        [DisplayName("Ordre")]
        [HiddenInput(DisplayValue = false)]
        [Required(ErrorMessage = "El número d'ordre es obligatori.")]
        public int ServiceID { get; set; }
 
        [DisplayName("Albarà")]
        public string RefExt { get; set; }
 
        [DisplayName("Full Seguiment")]
        public string DocNum { get; set; }
 
        [DisplayName("Data Comanda")]
        //[DisplayFormat(DataFormatString = "{0:d}")]
        [DataType(DataType.Date)]
        public DateTime DataOrdre { get; set; }
 
        [DisplayName("Data Servei")]
        [DataType(DataType.Date)]
        [UIHint("CustomDate")]
        public Nullable<DateTime> DataServei { get; set; }
 
        [DisplayName("Expedició")]
        [UIHint("ExpeditionsByData")]
        public Nullable<int> ExpeditionID { get; set; }
        //public Nullable<short> Position { get; set; }
 
        [DisplayName("Urgent")]
        public bool Urgent { get; set; }
 
        [DisplayName("Reclamat")]
        [DataType(DataType.Date)]
        public Nullable<DateTime> DataClaim { get; set; }
 
        [DisplayName("Recollida Extra")]
        public bool Extra { get; set; }
 
        [DisplayName("Productor")]
        [Required(ErrorMessage = "El productor es obligatori.")]
        [UIHint("ProductorSearch")]
        public int ContactID { get; set; }
 
        [DisplayName("Productor")]
        [HiddenInput(DisplayValue = false)]
        public string ProductorName { get; set; }

Grid in View
@(Html.Kendo().Grid<CollectServiceViewModel>()
        .Name("collects")
        .HtmlAttributes(new { style = "height: 100%; border: 0;" })
        .Scrollable()
        .ToolBar(t =>
        {
            if (User.IsInRole("Modify"))
            {
                t.Create().Text("Nou Servei");
            }
        })
        .Columns(columns =>
        {
            columns.Bound(f => f.ServiceID).Width(80);
            columns.Bound(f => f.DataServei).Width(110);
            columns.Bound(f => f.RefExt).Width(110);
            columns.Bound(f => f.DocNum).Width(110);
            columns.Bound(f => f.ProductorName).Width(300).Filterable(f => f.Operators(g => g.ForString(h => { h.Clear(); h.Contains("Conté"); })));
            columns.Bound(f => f.ContactID).Title("Codi").Width(80);


The first time I write a text with 4 o more chars my chars are hidden and then I can see a char 0. This behavior is only occurred the first time, after that the behavior is normal.



Thanks in advance.
Xavier
Kiril Nikolov
Telerik team
 answered on 10 Mar 2015
2 answers
96 views
Hi guys,

I have an MVC app built using the MobileApplication wrapper. Everything is working fine but I'm struggling with incorporating a form that submits to the controller. Everything I've found says the MobileApplication wrapper turns your site into a SPA which is great so no postbacks. That means all of the forms have to be created using Ajax.BeginForm rather than Html.BeginForm. I can't seem the find the right combination of setting ServerNavigation(true|false) and building a form that works in my MobileViews.

In my View I have the form defined as Content but looking at the markup it never actually created the <form> tag. Here's an example of one of my form markup:

@(Html.Kendo().MobileView()
    .Title("Site Verification")
    .Name("outage-details-view")
    .Content(@<text>
        @using (Ajax.BeginForm("OutageDetails", "Outage", new AjaxOptions
        {
            HttpMethod = "POST"
        }))
        {
            @Html.ValidationSummary(true);
            @Html.AntiForgeryToken()
            <div class="form-group">
                @Html.LabelFor(model => model.MeterNumber)
                @Html.TextBoxFor(model => model.MeterNumber, new { @type = "number", @class = "form-control", placeholder = "Meter Number" })
            </div>
            <div class="form-group">
                <label>OR</label>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.SiteId)
                @Html.TextBoxFor(model => model.SiteId, new { @class = "form-control", @type = "number", placeholder = "Site ID" })
            </div>
            <input type="submit" value="Next"/>
        }
    </text>)
)

The markup is displaying the form elements, but not the surrounding <form> tag so nothing is firing.

Thanks
Kiril Nikolov
Telerik team
 answered on 09 Mar 2015
1 answer
77 views
I know that the 2015 Q1 release has a fix in it to allow all pages to be included when doing a PDF export from a grid.

I also know that the beta version is only a trial and not a commercial version of the product and why this is so.

I'm coming under a fair bit of pressure to get this fix in place.

So, 
  1. What will the impact be on my application if I use the trial version?
  2. Do we have any sort of a timescale for the official release if Q1 for UI for MVC
Vladimir Iliev
Telerik team
 answered on 09 Mar 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
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
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
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
DateTimePicker
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
+? 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?