Telerik Forums
UI for ASP.NET MVC Forum
2 answers
83 views

We are trying to implement the Telerik Scheduler and we have been able to populate the radScheduler calendar with data when passed through the view, but we want to filter our results based on the range that is displayed on the calendar. We saw that we could do this with the .read method, but when we try and populate the calendar with the database connection, the Html helper reads the front end web configuration instead of the back end  (web configuration file). Are there ways to fix this? 

@(Html.Kendo().Scheduler<ExtendedStoreInformationDTO>()

    .Name("scheduler")
    .Date(new DateTime(2016, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Height(600)
    .DataSource(d => d
    .Model(m =>
    {
        m.Id(f => f.StoreID);
        m.Field(f => f.Title).DefaultValue("Hello There"); 
    })
    .ServerOperation(true)
    .Read(read => read.Action("Read", "Home").Data("getAdditionalData"))
    )
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView();
        views.WeekView();
        views.MonthView(monthView => monthView.Selected(true));
        views.AgendaView();
        views.TimelineView();
    })
    .Timezone("Etc/UTC")
    .WorkDayStart(1,0,0))

Ai
Top achievements
Rank 1
 answered on 25 Mar 2016
4 answers
5.9K+ views

Hi

 i have add Kendo grid in my view that fetch data from text inputs throw JS Code and it works good, i have add Edit and Destroy Command buttons but i don't need default class from the and i try to set classes as:

columns.Command(command =>
{
    command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
    command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
});

but after grid has data i found two buttons has default class and when i use inspect element i see that:

<a class="k-button k-button-icontext k-grid-edit btn btn-success" href="#"><span class="k-icon k-edit"></span>Edit</a>
 
<a class="k-button k-button-icontext k-grid-delete btn btn-danger" href="#"><span class="k-icon k-delete"></span>Delete</a>

and i see that class of bootstrap works as it should be in i remove class "k-button"

 so please how can i do that and let bootstrap calsses works as i need ??

Full Grid Code:

@model MhafezClinic.Models.DBContext.PTData
 
@{
    ViewBag.Title = "FindData";
}
 
<h2 class="text-danger text-center">الإستعلام عن المرضى فى جميع العيادات</h2>
 
<fieldset>
    <legend class="panel-heading panel text-primary" dir="rtl">
        <span class="glyphicon glyphicon-search"></span>
        <span>إبحث عن طريق الإسم أو رقم الملف الطبى أو رقم الهاتف ...</span>
    </legend>
    <div class="panel panel-default k-pr">
        <div class="panel-heading">
            <table class="table table-bordered" dir="rtl">
                <tbody>
                    <tr>
                        <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                            إسم المريض:
                        </td>
                        <td>
                            <input type="text" data-val="false" id="PT_Name" class="form-control" style="margin:auto; min-width:250px;" />
                        </td>
                        <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                            رقم الملف الطبى:
                        </td>
                        <td>
                            <input type="text" data-val="false" id="PT_Clinic_ID" class="form-control" style="width: 150px; margin:auto; text-align:center;" />
                        </td>
                        <td style="width: 120px; text-align: center; font-size: medium; font-weight: bold; vertical-align:middle">
                            تليفون المريض:
                        </td>
                        <td>
                            <input type="text" data-val="false" id="PT_Phone" class="form-control" style="width: 150px; margin:auto; text-align:center;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center;" colspan="6">
                            <input id="showGrid" style="font-size: medium; font-weight: bold" type="submit" value="إستعلام" class="btn btn-primary" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <div class="k-rtl">
                @(Html.Kendo().Grid<MhafezClinic.Models.DBContext.PTData>()
                    .Name("SHPTData")
                    .HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
                    .AutoBind(false)
                    .Columns(columns =>
        {
            columns.Bound(e => e.ClinicCode)
                .ClientTemplate("#=ClinicCode.Clinic_Code_Name#").Title("كود العيادة")
                .Sortable(false).HtmlAttributes(new { @style = "text-align:center;" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(75)
                .Filterable(false);
            columns.Bound(e => e.PT_Clinic_ID)
                .HtmlAttributes(new { @style = "text-align:center;" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(165)
                .Title("رقم الملف الطبى");
            columns.Bound(e => e.PT_Name)
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                .Title("إسم المريض").Width(145);
            columns.Bound(e => e.PT_Address)
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
                .Sortable(false).Title("العنوان").Width(192);
            columns.Bound(e => e.PT_Phone)
                .HtmlAttributes(new { @style = "text-align:center;" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(109)
                .Filterable(false).Sortable(false).Title("رقم التليفون");
            columns.Bound(e => e.PT_Age)
                .HtmlAttributes(new { @style = "text-align:center;" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(50)
                .Filterable(false).Sortable(false).Title("السن");
            columns.Bound(e => e.PT_First_Visit_Date)
                .HtmlAttributes(new { @style = "text-align:center;" })
                .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
                .Filterable(false).Sortable(false).Title("تاريخ أول زيارة");
 
            columns.Command(command =>
            {
                command.Edit().HtmlAttributes(new { @class = "btn btn-success" });
                command.Destroy().HtmlAttributes(new { @class = "btn btn-danger" });
            });
        })
 
        .Pageable()
        .Sortable()
                .Filterable(filterable => filterable
                          .Operators(operators => operators
                                            .ForString(str => str.Clear()
                                            .StartsWith("يبدء بـ")
                                            .IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
                                          ))
 
                           .Operators(operators => operators
                                             .ForNumber(str => str.Clear()
                                             .IsEqualTo("يساوى").IsNotEqualTo("لا يساوى")
                                             .IsGreaterThanOrEqualTo("أكبر من أو يساوى")
                                             .IsGreaterThan("أكبر من").IsLessThanOrEqualTo("أقل من أو يساوى")
                                             .IsLessThan("أقل من")
                                            ))
 
                                            .Messages(m =>
                                                m.And("و").Or("أو")
                                                .Filter("بحث").Clear("إلغاء")
                                                .Info("حدد فلتر البحث الذى تريده"))
            )
 
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
 
            .DataSource(source => source.Ajax()
                    .Model(model =>
                        {
                            model.Id(e => e.PT_ID);
                            model.Field(e => e.PT_ID).Editable(false);
                        })
                  .Events(events => events.Error("error_handler"))
                  .Read(read => read.Action("GetDataAll", "PTDatas").Data("getAdditionalData"))
                          .Update(update => update.Action("Update_Order", "Orders"))
                                  .Destroy(des => des.Action("Update_Order", "Orders"))
 
                ))
            </div>
        </div>
    </div>
</fieldset>
 
@section scripts{
    <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>
 
    <script>
        function getAdditionalData() {
            return {
                PT_Name: $('#PT_Name').val(),
                PT_Clinic_ID: $('#PT_Clinic_ID').val(),
                PT_Phone: $('#PT_Phone').val(),
            };
        }
 
        $(document).ready(function () {
            $('#showGrid').click(function () {
 
                if ((!$('#PT_Name').val()) && (!$('#PT_Clinic_ID').val()) && (!$('#PT_Phone').val())) {
                    $("#SHPTData").data("kendoGrid").dataSource.data([]);
                    alert("من فضلك ادخل القيمة المراد البحث عنها");
                    return;
                }
 
                else if (($('#PT_Name').val() && $('#PT_Clinic_ID').val()) || ($('#PT_Name').val() && $('#PT_Phone').val()) || ($('#PT_Clinic_ID').val() && $('#PT_Name').val())) {
 
                    $("#SHPTData").data("kendoGrid").dataSource.data([]);
                    alert("لا يمكن البحث بأكثر من شرط فى نفس الوقت");
                    return;
                }
                else {
                    $('#SHPTData').data('kendoGrid').dataSource.fetch();
                }
            });
        });
    </script>
}

and please are there is any way to display message in grid when there is No Data ?

Dimiter Madjarov
Telerik team
 answered on 25 Mar 2016
1 answer
357 views

I am trying to draw vertical line on category axis so that I can differentiate previous  values and future from that point. 

 

Razor view:

@(Html.Kendo().Chart()
.Name("chart")
.Title("Scheduled Info")
.Title(title => title.Font("24px Arial"))
.Transitions(false)
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.HtmlAttributes(new {style = "border: 1px solid #1593cc;height: 400px;"})
.Legend(true)
.Legend(legend => legend.Font("medium Arial"))

.Series(series =>
{
series.Line(Model.ScheduledD0)
.Style(ChartLineStyle.Smooth)
.Color("#ee7624")
.Name("D0")
.Markers(x => x.Visible(false));
series.Line(Model.ScheduledA14)
.Style(ChartLineStyle.Smooth)
.Color("#1593cc")
.Name("A14")
.Markers(x => x.Visible(false));
})
.CategoryAxis(axis => axis
.Line(line => line.Visible(true))
.MajorGridLines(lines => lines.Visible(true))
.MajorTicks(lines => lines.Visible(false))
.Categories(Model.ScheduledPlotTime)
.Labels(labels=> labels.Step(4)))
.ValueAxis(axis => axis.Numeric()
.Max(100)
.Labels(labels => labels.Format("{0}%")))
)

Model:

public class graphs

{
 public List<decimal> ScheduledA14 { get; set; }
 public List<decimal> ScheduledD0 { get; set; }
public List<string> ScheduledPlotTime { get; set; }
}

 

 

 

Daniel
Telerik team
 answered on 25 Mar 2016
6 answers
86 views

I've run into an interesting issue.

I have a grid's initial page being set to a range of items equal to that of the item count appended to the front of the page Ex. 4 rows, equals initial page 401. If I click the center page button of the page navigation it displays the data. What makes even less sense is I have an identical grid on another page returned from a separate controller but the same model and configuration, it works just fine. The only difference between the two grids is the parameters that are supplied to fetch the data, along with the route to allow the additional parameter in the URL. 

    The first thing i noticed is in my console I did have two errors regarding the sourcemaps for kendo.all.min.js.map and the kendo.aspnetmvc one as well. I grabbed replaced the existing ones from the original location and all cleared up in the console yet this issue still remains.

Is this a known issue on MVC 6 helpers?

Things I've tried. I supplied the model's row count in the datasource to override. Turning paging off makes it render correctly, though I would very much like for it work as it works on the same model elsewhere. I have also allowed ServerOperations to fetch the paging information again, but it acts like it doesnt know it needs to.

The model is an

IEnumerable<Document>

@(Html.Kendo().Grid<Document>(Model)
            .Name("bookpage-grid")
            .Columns(columns =>
            {
                columns.Bound(m => m.ImageIndicator).Width(35).Title("Img").Filterable(false);
                columns.Bound(m => m.Instrument).Width(130);
                columns.Bound(m => m.Name).Width(200);
                columns.Bound(m => m.NameType).Width(75);
                columns.Bound(m => m.Type).Width(75);
                columns.Bound(m => m.Date).Width(75);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Pdf();
                toolbar.Excel();
            })
                .Excel(excel => excel.FileName(Model.FirstOrDefault().BookPage + "Export.xslx"))
                .Selectable()
                .Groupable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .Pageable()
                .DataSource(datasource => datasource
                .Ajax()
                .PageSize(10)
                .ServerOperation(false)
                )
           
)

ian
Top achievements
Rank 2
 answered on 24 Mar 2016
1 answer
1.1K+ views

hi,

we need to have a kendo ui mvc grid with dynamic columns binding, also each column has a specific format and name.

i've created a view model like so

    public class ReportGridColumnsViewModel
    {
        public DataTable GridColumns { get; set; }
        public Dictionary<string, ColumnProperty> ColumnData{ get; set; }
    }
}

the question is, how i do pass this view model from controller method, how do i use ToDataSourceResult with that, i do i not:

below wont work, because gridData is ReportGridColumnsViewModel, not IQueriable

        public virtual ActionResult GridData([DataSourceRequest]DataSourceRequest request, ReportGridViewModel viewModel)
        {
            var gridData = _transformer.GetGridData(viewModel, SessionUser);
            Session["KendoTradeAckGrid"] = gridData;
            return Json(gridData.ToDataSourceResult(request));
        }

we are using ajax as data source in grid.

thanks,

Inna

Dimo
Telerik team
 answered on 24 Mar 2016
1 answer
2.3K+ views

Not sure that the MaskedTextBox is the right control to use for this, but here goes:

I need to have an input for an email address that:

A) Is a hyperlink to start an email with displayed email address as the "To:" address.
AND
B) Allow the user to edit the email address if they so desire.

So, first, I need to have it appear as a link that can be edited,

Second, I need to know what I would use for a mask (assuming that this is the right control for this)

Can anyone point me in the right directions?

TIA,
Bob Mathis

Georgi Krustev
Telerik team
 answered on 24 Mar 2016
6 answers
231 views
Hello.

I have set up my environment to include 

~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.is-IS.min.js

followed by a localization script in _Layout.cshtml like this

<script type="text/javascript">
kendo.culture("@culture");
</script>

and construct a Slider in an Editor Template like so:
@model string
@(Html.Kendo().Slider()
.Name(@ViewData.ModelMetadata.PropertyName)
.Min(0.55)
.Max(34.1))
.SmallStep(0.5)
.LargeStep(5.5)
.Value(@Convert.ToDouble(Model))
)

The problem is that the tooltip will show a dot for decimal separator like "34.1" instead of the expected "34,1" (for example).

Also, when the value is read from the control it contains a dot instead of the comma. As a result, the value will come from the slider as 341 instead of 34.1 (or 34,1 in Icelandic, to be exact).

Do you have any clue what I could do differently, am I missing something or am I misunderstanding the concept of culture and decimal numbers as far as the Slider goes?

Sincerely,
Baldvin
Stéphane
Top achievements
Rank 1
 answered on 23 Mar 2016
1 answer
217 views

Ive a scheduler with a custom editor template. The template displays a MultiSelect whose selectable values will differ depending upon what specific event is picked. So when I click an event I capture the Edit event and I refresh the MultiSelect to populate its selecteble values and this works.

 

$('#PrerequisiteOids').data('kendoMultiSelect').dataSource.read();

 

However my selected values from my model are never set in the control. I'm guessing this is something to do with it being in a Template - how do I bind my values from the selected Event?

The MultiSelect in the Template looks like this:

@(Html.Kendo().MultiSelectFor(model => model.Prerequisites)
  .Name("Prerequisites")
  .AutoBind(true)
  .DataTextField("Title")
  .DataValueField("Oid")
  .DataSource(source =>
  {
    source.Read(read =>
    {
    read.Action("GetPrerequisites", "CourseCalendar").Data("getCourseEventID");
    })
  .ServerFiltering(true);
  })
  .HtmlAttributes(new { @class = "universalWidth" }))

 

Has 

 

 

 

Ruairi
Top achievements
Rank 1
 answered on 23 Mar 2016
1 answer
177 views

Hello,

I'm trying to use the toolbar as a workaround to the Rad Ribbon for Asp.Net Ajax: http://demos.telerik.com/aspnet-ajax/ribbonbar/examples/tooltip/defaultcs.aspx

that is not available in MVC. Where i am struggling is how to create headers/labels for each toolbar section like the Ribbon example (Clipboard, Font, Paragraph, Editing...) that will go on top (or bottom). Are there any examples of this, or is this even possible?

 

Thanks in advance,

Dave

Ivan Danchev
Telerik team
 answered on 22 Mar 2016
5 answers
133 views

Hello, 

I am working with Kendo Scheduler. I want to set my work week to start at Sunday and end at Thursday. 

I wrote the following code to define work week start and end.

  .WorkWeekStart(-7)
  .WorkWeekEnd(-3)

 

Now, my work week is displaying fine, but i have problem with navigation trough work weeks. This navigator doesn't work. When I click forward it doesn't respond at all, also when I click back, it jumps for two weeks back. All other navigators are working fine (day, month, agenda).

 

When I try

.WorkWeekStart(0)
 .WorkWeekEnd(4)

today button redirects me to next week.

Plamen
Telerik team
 answered on 22 Mar 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?