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

Is there a way to set the background color of all cells in a column across multiple pages of a grid?  I have a javascript function that sets the background color, however, as soon as I change pages, my highlighting goes away.

 

Thanks,

Matt

Matthew
Top achievements
Rank 1
 answered on 29 Mar 2016
7 answers
754 views

 

I have a grid in which one of the columns is a dropdown. I'd like to enable the Multi Filter checkboxes for this column.

How can I do this?  If I set Multi to true it just displays the usual dropdown filter menu.

 

Liesa
Top achievements
Rank 1
 answered on 29 Mar 2016
3 answers
348 views

I have a MultiSelectFor using ajax read where I return a list of SelectList Items. Some of the SelectList items have their selected property set to true. The MultiSelect does not display those items as being pre-selected.

I have attached a file showing the View and the Controller code. (in VB)

Ivan Danchev
Telerik team
 answered on 29 Mar 2016
1 answer
173 views

There has to be a setup issue somewhere.  I copied and pasted the Kendo dropdown example.

However the dropdown never calls my method in my controller.  It renders on my page(empty).

What am I missing?

  @(Html.Kendo().DropDownList()

                .Name("myMainName")

                .DataTextField("CustomerName")

                .DataValueField("CustomerID")

                .DataSource(s => {

                    s.Read(read =>

                    {

                        read.Action("GetCustomerList", "MyController");

                    })

                })

                .SelectedIndex(0)

 )

 

_Layout

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

@Styles.Render("~/bundles/css")

@Styles.Render("~/Content/kendo/css")

 

BundleConfig

    {

        public static void RegisterBundles(BundleCollection bundles)

        {

           

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

           

 

            bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/*.css"));

 

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

                "~/Scripts/kendo/kendo.all.min.js",

                // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler

                "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

 

            bundles.Add(new StyleBundle("~/Content/kendo/css").Include(

                "~/Content/kendo/kendo.common-bootstrap.min.css",

                "~/Content/kendo/kendo.bootstrap.min.css"));

 

            

 

            bundles.IgnoreList.Clear();

        }

Viktor Tachev
Telerik team
 answered on 29 Mar 2016
7 answers
1.5K+ views

Here is the code I am using to create the TreeView...

01.@(Html.Kendo().TreeView()
02.        .Name("CategoryTree")
03.        .TemplateId("TreeViewTemplate")
04.        .HtmlAttributes(new { })
05.        .DataTextField("Description")
06.        .AutoScroll(false)
07.        .LoadOnDemand(true)
08.        .Events(e => e.Select("_CategoryChooserView_OnCategorySelected"))
09.        .Events(e => e.Expand("_CategoryChooserView_OnCategoryExpand"))
10.        .Events(e => e.Collapse("_CategoryChooserView_OnCategoryCollapsed"))
11.        .Animation(true)
12.        //.DataSpriteCssClassField("DataSpriteCSSClass")
13.        .DataSource(d => d
14.            .Model(m => m
15.                .Id("CategoryCode")
16.                .HasChildren("HasChildren")
17.            )
18.            .Read(read => read.Action("ListSubCategories", "Services"))
19.            .Events(e => e.RequestEnd("_CategoryChooserView_OnCategoryRequestEnd"))
20.            .Events(e => e.RequestStart("_CategoryChooserView_OnCategoryRequestStart"))
21.    ))


After the Treeview is instantiated, I want to call a JavaScript function like this one to expand and select a particular node.  The node is not necessarily a top level node - it could be quite a ways down in the hierarchy.

01.function _CategoryChooserView_SelectNode(CategoryCode)
02.{
03. 
04.    if (CategoryCode.length > 0)
05.    {
06.        var TreeView = $("#CategoryTree").data("kendoTreeView");
07.        var DataItem = TreeView.dataSource.get(CategoryCode);
08. 
09.        if (DataItem)
10.        {
11.            var Node = treeview.findByUid(DataItem.uid);
12.            treeview.select(Node);
13. 
14.            ScrollElementToScrollableParent(Node);
15.        }
16.    }
17.}

The problem is that DataItem (line 7) comes back undefined every time, no matter what I feed "get()" method.  It seems to me that with a client side Treeview that fetches its data from a remote source upon expansion of a node, this can never be possible.

How can I programmatically expand and work my way down to the node I want selected?  I somehow need to expand each node down to the target node.  Is it even possible?

I pulled some of this from an example located here: http://www.telerik.com/forums/programatically-select-a-tree-node
Daniel
Telerik team
 answered on 28 Mar 2016
1 answer
71 views

Hello,

I'm having trouble getting the scheduler to display correctly when using JQuery 2.2.0. The times table is showing beside the days of the week instead of under it.

 

I've created a simple example here:

http://jsbin.com/lemadiqaju/1/edit?html,output

 

Any suggestions on how to get the scheduler working correctly?

Thank you.

Vladimir Iliev
Telerik team
 answered on 28 Mar 2016
3 answers
489 views
I have two drop downs in my Kendo grid, one for categories and one for sub-categories.  The sub-categories drop down needs to change based on the value of the category drop down.  This if fairly common scenario, but a bear to implement for someone who is new to Kendo.  For anyone attempting to do so, I strongly recommend searching the forum for 'KendoGridWithInCellCascadingDropDownLists' and studying it closely.  

I now have everything working properly and thought I would share a bit of what I learned from the experience.

a. While in InCell editing mode you cannot do something like this in your filter function:

    function filterSubCategories()
    {
        return { catId: $("#CategoryId").data("kendoDropDownList").value() };
    }

Instead, you must use the following to get the "CategoryId":

    function filterSubCategories()
    {
        var grid    = $("#equip-grid").data("kendoGrid");
        var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
        var model   = grid.dataItem(editRow);

        return { catId: model.CategoryId };
    }

To me this is less than intuitive, NOT very developer friendly and somewhat of a hack!

b. In Inline edit mode, the filter function is called when the user selects an item from the CATEGORY drop down.  In InCell edit mode, the filter function is called when the user first clicks the SUB-CATEGORY drop down button.

This behavior in item b. is the reason for my post.  WHY this inconsistency, why not call the filter function when the user changes the CATEGORY drop down?

From a useabilty stand-point, I need to clear the SUB-CATEGORY drop down and set it to the OptionLabel value, whenever the CATEGORY drop down changes.  

Any thoughts on how to accomplish this?


Vladimir Iliev
Telerik team
 answered on 28 Mar 2016
2 answers
92 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
6.0K+ 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
362 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
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
DateTimePicker
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
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?