Telerik Forums
UI for ASP.NET MVC Forum
3 answers
729 views

Hello,

 

I have been through all samples but non match the Scenario i have. My Kendo grid is inside a vertical splitter and the columns are dynamic. So in datagrid read Event the Controller picks a variable select stetement and then the columns and column Header names are stored in viewbag and in view the columns get bound to viewbag and datab\able returned from controlller method. One column should be editable as Dropdown and rest all not editable.

 

Attached is my view code  and this is the column i am trying to use adropdown  editortemplate and when i add this editable line i get crash

.Editable(editable => editable.Mode(GridEditMode.InCell))

Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.

 if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
                       // columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);
                      
                    }

 

My editortemplatelooks like

 @(Html.Kendo().DropDownList().Name("Obj_AddressType")
            .DataTextField("Text")
                 .DataValueField("Value")
       .BindTo(new List<SelectListItem>
                   {
                        new SelectListItem {Text = "Kunde", Value = "0"},
                       new SelectListItem {Text = "Kunde", Value = "1"},
                       new SelectListItem {Text = "Rechnungsadresse", Value = "2"}
                   }))

 and view code

  rightverticalPanes.Add()
             .HtmlAttributes(new { id = "bottom-pane" })
             .Resizable(true)
             .Collapsible(false)
             .Content(@<text>
                        @(Html.Kendo().Grid(Model)
    .Name("Grid_ObjAdress")
     .DataSource(dataSource1 => dataSource1
                    .Ajax()
                    .PageSize(100)
                    .Model(model1 =>
                    {
                        if (Model != null)
                        {
                            foreach (System.Data.DataColumn ocolumn in Model.Columns)
                            {
                                if( ocolumn.ColumnName == "Obj_AddressType"){
                                    model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(true);
                                }else{
                                model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(false);
                                }
                            }
                        }
                    })
                    .Read(read => read.Action("ObjectAdress_Read", "ObjektActivity"))
 .ServerOperation(false)
                     )
                      .Resizable(resize => resize.Columns(true))
    .Columns(columns =>
    {
        if (ViewBag.ObjAdressHeader != null)
        {
            for (int k = 0; k < ViewBag.ObjAdressHeader.GetLength(0); k++)
            {
                if (ViewBag.AdrVisibleCols[k] == "0")
                {
                    columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Visible(false);
                }
                else
                {
                    if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
                       // columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);
                      
                    }
                    else
                    {
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Width(120);
                    }
                }
            }
        }
    })
         .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
                     .Sortable()
                     .Scrollable()
        .Filterable(filterable => filterable
                                          .Extra(false)
                                          .Operators(operators => operators
                                              .ForString(str => str.Clear()
                                                  .StartsWith("Starts with")
                                                  .IsEqualTo("Is equal to")
                                                  .IsNotEqualTo("Is not equal to")
                                              ))
                                          )
                                      .Groupable()
                                      .Reorderable(r => r.Columns(true))
                            .Resizable(r => r.Columns(true))
                                      )

Thanks

 

Anamika

Dimo
Telerik team
 answered on 15 Feb 2016
6 answers
298 views

I am working on single click for ASP.NET MVC scheduler. But the problem is when the custom event editor pop ups, there is only startdate and endate. How can I get other resource such as TechName?

 

@(Html.Kendo().Scheduler<TaskViewModel>()
                                    .Name("schedulerJob")
                                    .Date(DateTime.Today)
                                    .StartTime(7, 0, 0)
                                    .Height(700)
                                    .EventTemplate("#if(title == 'Reservation') {#" +
                                                    "<div class='reservationClass' style='float: left;'>" +
                                                    "<img src='http://www.alegoo.com/images05/newyear/calendar-b11/015/calendar-icon-15.png' style='width:22px;' />" +
                                                        "#= title #" +
                                                    "</div>" +
                                                    "#}" +
                                                    "else {#" +
                                                    "<div class='jobClass' style='float: left;'>" +
                                                    "<img src='http://www.gratispos.com/wp-content/uploads/2011/06/User-Group-Home.png' style='width:22px;' />" +
                                                        "#= title #" +
                                                    "</div>" +
                                                    "#}#")
                                    .Views(views =>
                                    {
                                        views.TimelineView(v => v.Selected(true));
                                    })
                                    .Events(e =>
                                    {
                                        e.Edit("schedulerJob_edit");
                                        e.Navigate("schedulerJob_navigate");
                                        e.Remove("schedulerJob_remove");
                                        e.Save("schedulerJob_save");
                                        e.DataBinding("schedulerJob_dataBinding");
                                        e.DataBound("schedulerJob_dataBound");
                                        e.MoveEnd("schedulerJob_moveend");
                                        e.ResizeEnd("schedulerJob_resizeend");
                                    })
                                    .Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
                                    .Resources(resource =>
                                    {
                                        resource.Add(m => m.TechName)
                                            .Title("Techs")
                                            .Name("Techs")
                                            .DataTextField("TechName")
                                            .DataValueField("emm_code")
                                            .DataSource(d => d.Read("Techs", "JOBS"));
                                    })
                                    .DataSource(d => d
                                        .Model(m =>
                                        {
                                            m.Id(r => r.emm_code);
                                        })
                                        .ServerOperation(true)
                                        .Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
                                        .Create("JobSchedule_Create", "JOBS")
                                        .Update("JobSchedule_Update", "JOBS")
                                        .Destroy("JobSchedule_Delete", "JOBS")
                                    )
                                    .Editable(e => {
                                        e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));
                                    })
                                )
 

 Custom editor code

<script id="schedulerJobEditor" type="text/x-kendo-template">
                                    <div>
                                        <table style="border-collapse: initial;">
                                            <tr>
                                                <td align="right">
                                                    <label for="Start">Job Date:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="jobDateTextbox" class="k-input k-textbox" name="start" data-bind="value: StartViewDate" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                                <td align="right">
                                                    <label for="ReservedDate">Reserved On:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservedDateTextbox" class="k-input k-textbox" name="reservedDate" data-bind="value: ReservationViewDate" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                            </tr>
 
                                            <tr>
                                                <td align="right" width="25%">
                                                    <label for="StartViewTime">Job Time:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="jobTimeTextbox" class="k-input k-textbox" name="start" oninput="JobTimeInput()" onblur="JobTimeBlur()" data-bind="value: StartViewTime">
                                                    <input type="hidden" id="keyFlagTextbox" class="k-input k-textbox" name="keyflag" data-bind="value: KeyFlag">
                                                </td>
                                                <td align="right" width="14%">
                                                    <label for="ReservedTime">Time:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservedTimeTextbox" class="k-input k-textbox" name="reservedTime" data-bind="value: ReservationViewTime" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                            </tr>
 
                                            <tr>
                                                <td align="right">
                                                    <label for="Duration">Duration:</label>
                                                </td>
                                                <td>
                                                    <select name="duration" id="durationDropDownList" onchange="DurationChange()" data-bind="value: Duration">
                                                        @foreach (var dur in (List<ServicePROWeb.ServiceProWCFService.TypeMstr>)HttpContext.Current.Session["DurationList"])
                                                        {
                                                            <option value='@dur.ty_desc'>@dur.ty_desc</option>
                                                        }
                                                    </select>
                                                </td>
                                                <td align="right">
                                                    <label for="ReservationID">Reservation ID:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservationIDTextbox" class="k-input k-textbox" name="reservationID" data-bind="value: ReservationID" style="border-width: 0px;width:100%" disabled="disabled">
                                                </td>
                                            </tr>
 
                                            <tr>
                                                <td align="right">
                                                    <label for="TechName">Tech:</label>
                                                </td>
                                                <td colspan="3">
                                                    <input type="text" class="k-input k-textbox" name="techName" data-bind="value: TechName" disabled="disabled">
                                                </td>
                                            </tr>
 
                                            <tr>
                                                <td align="right">
                                                    <label for="Title">Reason for Reservation:</label>
                                                </td>
                                                <td colspan="3">
                                                    <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" style="width: 60%;">
                                                </td>
                                            </tr>
 
                                            <tr>
                                                <td>
                                                     
                                                </td>
                                                <td colspan="3">
                                                    <input type="checkbox" id="chkRecurring" data-bind="value: IsRecurring" onmouseup="toggleRecurringDiv()">Recurring Reservation
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                        <div id="divRecurring" style="width: 95%; margin-left: 5px; padding: 10px;display: none;">
                                            <input type="radio" class="rdoTech" name="rdoTech" value="c" checked="checked">Current Tech
                                            <input type="radio" class="rdoTech" name="rdoTech" value="a" style="margin-left: 15px;">All Techs
                                            <span style="margin-left: 24px;">Every: </span><input type="text" id="everyTextbox" class="k-input k-textbox" name="recurrenceNumber" data-bind="value: Frequency">
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="d" checked="checked" style="margin-left: 15px;">Day(s)
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="w" style="margin-left: 15px;">Weeks(s)
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="m" style="margin-left: 15px;">Month(s)
                                            <br /><br />
                                            <input type="checkbox" id="chkIncludeBusinessDays" data-bind="value: IsNonBusinessDaysIncluded">Include Non-Business Days
                                            <label for="UntilDate" style="margin-left: 30px;">Until: </label>
                                            <input type="text" id="untilDateTextbox" class="k-input k-textbox" name="UntilDate" data-bind="value: UntilDate">
                                            <span style="margin-left: 15px;">(max. 3 months)</span>
                                        </div>
                                    </div>
                                </script>
 

Script for single click. Only startdate and endate are being passed for the new event. How can I pass other resource like "TechName" here.

 

$(function () {
 
    var scheduler = $("#schedulerJob").data("kendoScheduler");
 
    $("#schedulerJob").on("mouseup touchend", ".k-scheduler-table td, .k-event", function (e) {
        target = $(e.currentTarget);
        ee=e;
        if (target.hasClass("k-event")) {
            var event = scheduler.occurrenceByUid(target.data("uid"));
            scheduler.editEvent(event);
        } else {
            slot = scheduler.slotByElement(target[0]);
 
            scheduler.addEvent({
                start: slot.startDate,
                end: slot.endDate
            });
        }
    });
})

 

Thanks

James
Top achievements
Rank 1
 answered on 12 Feb 2016
4 answers
703 views

I have a decimal property in my modal which keeps loosing decimal precision whenever i bind it to Kendo grid.

Here is the example.

If the value is 501.14, grid will display 501.14. (correct)
If the value is 501.10, grid will display 501.1    (wrong, it should have displayed 501.10)
If the value is 501.00, grid will display 501       (wrong, it should have displayed 501.00)

I know i can easily solve this issue by using 'Format' function in the grid, i.e. .Format("{0: n2}") but the issue is i won't know how many decimal places i will be getting during the call so i won't be able be to hard code the value in 'Format' function. Also, i need to display all the decimal places even though it is just 0 at the end i.e .00 or .10. 

 Any suggestion how i can fix this issue?

Thanks

Avinash

Kostadin
Telerik team
 answered on 12 Feb 2016
5 answers
818 views
Please help me. How to add DropDownList MVC to Tool Bar. Please send me example.

Thank you,

Viktor
Alexander Valchev
Telerik team
 answered on 11 Feb 2016
2 answers
142 views

Hello,

tried a simple chart with remote data, but theres no POST to PPM_Read on page load/refresh ...

everything else is working fine, grids, dropdownlist, etc ...

Maybe anyone knows what i'm doin wrong here ?

 

Greetings, Oliver

 

Controller:

public ActionResult PPM_Read()

 

 

{

 

var data = db.viewPointCipWqsScrapPartsMonthPPM;

return Json(data, JsonRequestBehavior.AllowGet);

 

 

}

 

 

View:

@(Html.Kendo().Chart<MapsMvc.Areas.mPointCip.Models.viewPointCipWqsScrapPartsMonthPPM>().Name("chart2")

.Title("WQS")

.Legend(legend => legend

.Position(ChartLegendPosition.Top))

.DataSource(dataSource => dataSource.Read(read => read.Action("PPM_Read", "WQS")))

.Series(series =>

{

series.Column(model => model.PPM).Name("PPM");

})

.CategoryAxis(axis => axis

.Categories(model => model.LastProcess)

.Labels(labels => labels.Rotation(0))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0:N0}"))

.MajorUnit(1000)

.Line(line => line.Visible(true))

.Max(10000)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0:N0}")

)

)

 

 

T. Tsonev
Telerik team
 answered on 11 Feb 2016
3 answers
176 views
I was wondering if this is even possible using the current set of tools.  I'm attaching an example of what our users would like to see.  This can be done in excel, but I've google searched how to do this and came up empty.  It's basically a radar chart that doesn't put the lines between plot points.  Can someone help me out on how to pull this off?
Iliana Dyankova
Telerik team
 answered on 11 Feb 2016
1 answer
148 views

how can I add a blank item at the top of TimePicker list?

 

My code looks like this,

 

function timeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                    .appendTo(container)
                    .kendoTimePicker({
                        //interval: 15
                        //max: new Date(2000, 0, 1, 22, 0, 0) //date part is ignored
                        //min: new Date(2000, 0, 1, 8, 0, 0) //date part is ignored
                    });
        }

        $("#HoursGrid").kendoGrid({
            dataSource: {
                data: @Html.Raw(Json.Encode(Model.HoursList)),
                schema: {
                    model: {
                        fields: {
                            DealerID: {type: "int", editable: false},
                            dayNo: {type: "int", editable: false},
                            dayName: { type: "string", editable: false },
                            OpenTime: { type: "date", editable: true },
                            CloseTime: { type: "date", editable: true }
                        }
                    }
                }
            },
            //toolbar: ["save"],
            columns:[
                {   field: "dayName",          title: "Day of Week"   },
                {   field: "OpenTime",    title: "Sales Hours - Open From",  type: "date", format: "{0:hh:mm tt}", editor: timeEditor  },
                {   field: "CloseTime",   title: "Close At",                 type: "date", format: "{0:hh:mm tt}", editor: timeEditor  }
            ],
            editable: true,
            scrollable: false,
            save: function(e){
            },
            databound: DD.Kendo.AddExtraStyleToGrid // this is where the hover effect function is bound to grid
        });

Marin
Telerik team
 answered on 11 Feb 2016
7 answers
456 views

A I have a simple diagram (a vertical line of connected circles, of variable length) which I want to display in a pop-up window, to display a graphical indication of where a record is within a workflow.

I can get everything to work, except that by default the diagram has a lot of surrounding white space, that causes the windows scrollbars to show, even when the whole diagram easily fits into the visible space.

I would like to scale the diagram to always fit in the window (without showing scrollbars). I've tried using the bringIntoView method on the databound event, but this doesn't work (the API documentation doesn't give any clues as to what exactly the View area is). I would also like to keep the zoom functionality disabled.

 My current window definition is:-

 

@(Html.Kendo().Window()
    .Name("historyWnd")
    .Title("Approval History")
    .Content(@<text>
 
 
 
 
    @(Html.Kendo().Diagram()
      .Name("diagram")
      .DataSource(dataSource => dataSource
          .Read(read => read
              .Action("GetHistory", "MyVacancies").Data("vFilter")
          )
          .Model(m => m.Children("Items"))
      )
      .Editable(false)
      .Pannable(false)
      //.Zoom(0)
      .Layout(l => l.Type(DiagramLayoutType.Layered))
      .ShapeDefaults(sd => sd
          .Visual("visualTemplate")
          .Content(c => c
              .Template("#= dataItem.PositionName #")
              .FontSize(8)
              .Color("white")
          )
 
      )
      .ConnectionDefaults(cd => cd
          .Stroke(s => s
              .Color("#979797")
              .Width(2)
          )
      )
      .Events(events => events.DataBound("onDataBound"))
 
    )
 
  
 
    </text>)
    .Modal(true)
    .Visible(false)
    .Height(450)
    .Width(300)
    )

and the template is:-

 

<script>
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;
 
 
        g.append(new dataviz.diagram.Circle({
            width: 70,
            height: 70,
            fill: dataItem.Colour,
            stroke: {
                width: 0
            }
        }));
 
 
 
 
        return g;
    }
 
</script>

Thanks

Dimo
Telerik team
 answered on 10 Feb 2016
2 answers
116 views

Is it possible to enter the date without having to type the century?  It seems that 1/1/16 is not valid, you have to enter 1/1/2016.  Most of the time the century is the current one.  In fact not entering the year at all would be even better, so that the year defaults to this year.  Either of these things possible?

 

Thanks

Scott Waye
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 09 Feb 2016
2 answers
191 views

Hi , the arrow for the validation message is in the center, so if the column width is shorter than the message the arrow points to the wrong column, see image attached.  Can the arrow be moved to the left, or the message centred on the column, not left aligned?

 

THanks,

Scott Waye
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 09 Feb 2016
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
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Security
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
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?