Telerik Forums
UI for ASP.NET MVC Forum
4 answers
2.0K+ views

I’m currently testing the Grid control for ASP.NET MVC 5 and I need some help with paging. I’ve managed to get it working with my ASP.NET MVC 5 application at a basic level (data is fetched from a database and displayed in the grid) but the paging is not working (paging buttons are grayed out).

I found the following guide to enable paging but I still can’t make it working:

http://demos.telerik.com/aspnet-core/grid/paging

I mean what does it require to enable paging buttons? My goal is to fetch data, for example, 20 rows at a time (page 1), and when you click on the next button, you'll get the next 20 items (page 2) from the database etc. Is this possible with the Grid?

Here's my code that I'm using to show the grid and fetch the data:

 @(Html.Kendo().Grid<PluTable>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Code);
        columns.Bound(p => p.Description1);
        columns.Bound(p => p.Price);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pageable => pageable
      .Input(true)
      .Numeric(true)
      .Info(true)
      .PreviousNext(true)
      .Refresh(true)
      .PageSizes(true)
      .ButtonCount(5))     
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events
        .Error("error_handler")
        )
        .Model(model => model.Id(p => p.Code))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )
Viktor Tachev
Telerik team
 answered on 12 Oct 2017
1 answer
383 views

Hi,

If I change the text of a button it removes span and other classes as well.

This is my code but doesn't work.

@(Html.Kendo().Menu()

                            .Name("HeaderMenu")
                            .Items(items =>
                            {
                                items.Add().Text("Home").Action("Index", "Home").SpriteCssClasses("fa fa-home");
                                items.Add().Text("About").Action("About", "Home").SpriteCssClasses("fa fa-info");
                                items.Add().Text("Contact").Action("Contact", "Home").SpriteCssClasses("fa fa-mobile-phone");
                                items.Add().Text("User").HtmlAttributes(new { id = "userloggedin" }).SpriteCssClasses("fa fa-user").Items(children => {
                                    children.Add().Text("Sign out").SpriteCssClasses("fa fa-sign-out").HtmlAttributes(new { id = "signout" }).Enabled(false);
                                });
                            }))

 

<script type="text/javascript">
    function onButtonClick(e) {
            var html = $("#userloggedin").children(".k-link").html();
            console.log(html);
            $("#userloggedin").children(".k-link").text("It is me!");

            html = $("#userloggedin").children(".k-link").html();
            console.log(html);

    }

</script>

Dimitar
Telerik team
 answered on 12 Oct 2017
1 answer
193 views

Hello,

I have a Diagram Widget with a ShapeTemplate (Html.Kendo().Diagram().Editable.ShapeTemplateName("NodeEditTemplate")

@model Web_Anlageneditor.ViewModels.Diagram.DiagramEditNodeVm
 
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.AntiForgeryToken()
<div class="form-group row">
    @Html.LabelFor(m => m.Title, new { @class = "col-sm-10 " })
    <div class="col-sm-10">
        @Html.EditorFor(m => m.Title, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(m => m.Title, "", new { @class = "text-danger" })
    </div>
</div>
<script>
    //Kendo Validation
    $(function() {
        $("form").kendoValidator();
    });
</script>

 

How can I access the window's Title-bar, Width, etc. build around this Template when editing/creating the shape? (s. attachment)

Stefan
Telerik team
 answered on 12 Oct 2017
3 answers
387 views
Hi, 
I have my model described like: 
    public class PerformanceChartSeriesModel_2
    {
        public string[] Date { get; set; }
        public double[] P1 { get; set; }
    }

Now, I chart :
    @(Html.Kendo().Chart<PerformanceChartSeriesModel_2>()
        .Name("chartPerformance")        
        .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
        )
        .DataSource(ds => ds
            .Read(read => read.Action("PerformanceChartData", "Performance").Data("performanceChartData"))
        )
       .Series(series =>
       {
           series.Line(p=>p.P1);                      
       })
               .CategoryAxis(axis =>
               {
                   axis.Categories(l => l.Date);
               })   

Neither series nor categories pick up values, series actually behave in a strange way drawing only one point.
Could you tell what is wrong, or how can I work with such model.
Thanks.
Stefan
Telerik team
 answered on 11 Oct 2017
4 answers
253 views

Hello, is it possible to use the gantt chart with a signalR datasource in either Asp.NET MVC or Core? I can't seem to find any demos/examples of it and my attempts are not succesful.

Below is my Gantt.cshtml:

@using KendoNetCoreTest.Models;
@using Kendo.Mvc.UI.Html;
<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.min.js")"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>
<script type="text/javascript">
    var hub = $.connection.ganttHub;
    var start = $.connection.hub.start();
    function pushEvent(e) {
        var notif = $("#notif").data("kendoNotification");
        notif.success(e.type);
    }
</script>
<div>
    @(Html.Kendo().Notification()
        .Name("notif")
        .Width("100%")
        .Position(p => p.Top(0).Left(0))
    )
</div>
<div>
    @(Html.Kendo().Gantt<GanttTask, GanttDependency>()
            .Name("gantSignalR")
            .Columns(cols => {
                cols.Bound(c => c.ID);
                cols.Bound(c => c.Title);
                cols.Bound(c => c.Start);
            })
            .DataSource(ds => ds
                .SignalR()
                .AutoSync(true)
                .Events(e => e.Push("pushEvent"))
                .Transport(tr => tr
                    .Promise("start")
                    .Hub("hub")
                    .Client(c => {
                        c.Read("read");
                        /*                      c.Create("create");
                                                c.Update("update");
                                                c.Destroy("destroy"); */
                    })
                    .Server(s => {
                        s.Read("read");
                        /*                      s.Create("create");
                                                s.Update("update");
                                                s.Destroy("destroy"); */
                    })
                )
                .Schema(sch => sch.Model(m => {
                    m.Id(f => f.ID);
                    m.Field(f => f.Title).DefaultValue("New task");
                    m.Field(f => f.Start).DefaultValue(DateTime.Now);
                    m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));
                    m.Field(f => f.Name).From("Name").DefaultValue("New task");
                    m.Field(f => f.ParentID).From("ParentID").DefaultValue(null);
                    m.Field(f => f.OrderId).From("OrderId");
                }))
            )
    )
</div>
<div>
    @(Html.Kendo().Grid<GanttTask>()
        .Name("grid")
        .Columns(cols => {
            cols.Bound(c => c.ID);
            cols.Bound(c => c.Title);
            cols.Bound(c => c.Start);
            cols.Bound(c => c.End);
            cols.Command(c => { c.Edit(); c.Destroy(); });
        })
        .DataSource(ds => ds
            .SignalR()
            .AutoSync(true)
            .Transport(tr => tr
                .Promise("start")
                .Hub("hub")
                .Client(c => {
                    c.Read("read");
                    c.Update("update");
                })
                .Server(s => {
                    s.Read("read");
                    s.Update("update");
                })
            )
            .Schema(sch => sch.Model(m => {
                m.Id(f => f.ID);
                m.Field(f => f.Title).DefaultValue("New task").Editable();
                m.Field(f => f.Start).DefaultValue(DateTime.Now).Editable();
                m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));
                m.Field(f => f.Name).DefaultValue("New task");
                m.Field(f => f.ParentID).DefaultValue(null);
                m.Field(f => f.OrderId);
            }))
        )
        .Editable(e => e.Mode(GridEditMode.InLine))
    )
</div>

 

The hub is currently just returning a dummy data of

public List<GanttTask> Read() {
            return new List<GanttTask>() {
                new GanttTask() { ID= 1, Title = "New task", Name= "New Task", Start = DateTime.Now, End=DateTime.Now.AddDays(2), OrderId = 1, ParentID = null }
            };
        }

 

The result is a bit mixed for the gantt. It show the ids but nothing else, while the grid shows everything ok, see attached picture. The grid meanwhile shows the dates also.

Rami
Top achievements
Rank 1
Veteran
 answered on 11 Oct 2017
3 answers
1.2K+ views

Hi,

I am trying to use Panelbar as a Side bar navigation (something like Outlook).

I have the Model this way.

public class NavbarMainMenuModel
{
    public int Dept_id { get; set; }
    public int Seq_no { get; set; }
    public string Dept_name { get; set; }
    public List<NavbarMenuItem> Items { get; set; }
}
public class NavbarMenuItem
{
    public int Menu_item_id { get; set; }
    public int Seq_no { get; set; }
    public int Dept_id { get; set; }
    public string MenuName { get; set; }
}

 

Now, I want to load the Panel bar with this data.

Currently, I have this code and it only display the top level items but not the children.

 

<div id="responsive-panel" style="width:200px;">
    @(Html.Kendo().PanelBar()
            .Name("panelbar")
            .ExpandAll(false)
            .ExpandMode(PanelBarExpandMode.Multiple)
            .DataTextField("Dept_name")
            .DataSource(ds=>ds
                .Read(read=>read.Action("GetMainMenuItems","Home"))
                )
            .Events(e=>e
            .Select("panelbarselected")
            )
    )
</div>

 

How do I get the Main list and sub items display on the PanelBar?

Also, i need to display them in the right sequence (if possible).

 

Thanks,

Arun

 

 

Arun Perregattur
Top achievements
Rank 1
 answered on 10 Oct 2017
1 answer
182 views

I've got an MVC implementation of a grid, datasource settings below

 

            .DataSource(datasource => datasource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Read(read => read.Action("Data_Read", "StaffManager")
                    .Data("pageData")
                )

I have ServerOperation(false) to allow for some client side sorting, which works great!  Now I'm trying to get client side paging working but I cannot.

My page event handler is here:

    function onGridPage(args) {
        pageNumber = args.page;
        var grid = $('#grid').data('kendoGrid');    
        
        grid.dataSource.read();
        grid.dataSource.sync();
        grid.refresh();
    }

When I click page, I get back a valid json result from my read method (expecting 1 item) but the grid doesn't display anything.  The page numbers and totals are updated correctly, just no data is shown.  In dev tools, I see the json object that has data.

I assume that the datasource isn't being updated after the read.

 

Any suggestions?

Coy
Top achievements
Rank 1
 answered on 10 Oct 2017
3 answers
545 views
Hi,

I have a razor patial view that contains a few controls (i.e. inputs, drop downs, date pickers...). These controls are created using kendo helper functions for MVC.
In my main view I have an "Add Item" ajax action link that woud append a new instance of partialview in a div container every time it's clicked.
Using this approach kendo controls don't get correctly rendered. Dropdowns show as text, datepickers are missing styles .

If there is a different/better approach that I should be using for Adding dynamic partials to the view please let me know.

The code that adds partialview to main view is:
@(Ajax.ActionLink("Add another shipment", "BlankEditor", new AjaxOptions
    {
        UpdateTargetId = "items",
        InsertionMode = InsertionMode.InsertAfter,
    }))
And the Partial View is looking like this:

@model SupplyViewModel
<div class="k-block k-info-colored" style="margin-bottom: 1em;">
    <div class="k-block">
        <div style="display: inline-block;">
            <div class="editor-label">
                @Html.LabelFor(model => model.ReportDate)
            </div>
                        <div class="editor-field">
                @(Html.Kendo().DatePickerFor(model => model.ReportDate)
                      .Name("ReportDate" + new Random().Next())
                      .Value(DateTime.Now.Date)
                      .Max(DateTime.Now.Date))
                @Html.ValidationMessageFor(model => model.ReportDate)
            </div>
        </div>
        <div style="display: inline-block;">
            <div class="editor-label">
                @Html.LabelFor(model => model.OrganizationId, "Supplier")
            </div>
            <div class="editor-field">
                @(Html.Kendo().DropDownListFor(model => model.OrganizationId).Name("ddlOrganization").HtmlAttributes(new { @Class = "HABddList" }).SelectedIndex(0).BindTo(ViewBag.OrganizationId))
                @Html.ValidationMessageFor(model => model.OrganizationId)
            </div>
        </div>
    </div>
    <div class="k-block vesselinfo" style="position: relative;">
        <div style="display: inline-block;">
            <div class="editor-label">
                @Html.LabelFor(model => model.VesselName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.VesselName)
                @Html.ValidationMessageFor(model => model.VesselName)
            </div>
        </div>
        <div style="display: inline-block;">
            <div class="editor-label">
                @Html.LabelFor(model => model.VesselId)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.VesselId)
                @Html.ValidationMessageFor(model => model.VesselId)
            </div>
        </div>
        <div style="display: inline-block;">
            <div class="editor-label">
                @Html.LabelFor(model => model.PortOfEntryId, "PortOfEntry")
            </div>
            <div class="editor-field">
                @(Html.Kendo().DropDownListFor(model => model.PortOfEntryId).OptionLabel("Select Port of Entry...").BindTo(ViewBag.PortOfEntryId))
                @Html.ValidationMessageFor(model => model.PortOfEntryId)
            </div>
        </div>
        @*        <div style="float: right;">
            <a href="#" class="k-button show_hide" style="text-align: right;">Hide</a>
        </div>*@
    </div>
    @*    <div class="k-block k-info-colored" id="vesselShowButton" style="text-align: right;">
        <a href="#" class="k-button show_hide">Show Vessel Info</a>
    </div>*@
    <div class="k-block">
        <div class="dates">
            <div class="editor-label">
                @Html.LabelFor(model => model.EstimatedDepartureDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.EstimatedDepartureDate)
                @Html.ValidationMessageFor(model => model.EstimatedDepartureDate)
            </div>
        </div>
        <div class="dates">
            <div class="editor-label">
                @Html.LabelFor(model => model.EstimatedArrivalDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.EstimatedArrivalDate)
                @Html.ValidationMessageFor(model => model.EstimatedArrivalDate)
            </div>
        </div>
        <div class="dates">
            <div class="editor-label">
                @Html.LabelFor(model => model.DepartureDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.DepartureDate)
                @Html.ValidationMessageFor(model => model.DepartureDate)
            </div>
        </div>
        <div class="dates">
            <div class="editor-label">
                @Html.LabelFor(model => model.ArrivalDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ArrivalDate)
                @Html.ValidationMessageFor(model => model.ArrivalDate)
            </div>
        </div>
    </div>
    <div class="k-block">
        <table class="quantities">
            <tr>
                <th></th>
                <th>Unit</th>
                <th>Sizes:</th>
                @foreach (SelectListItem item in ViewBag.ProductSizeId)
                {
 
                    <th>@item.Text</th>
 
                }
            </tr>
            <tr>
                <td style="font-size: smaller;">Quantity in</td>
                <td>lugs</td>
                <td></td>
                @foreach (SelectListItem item in ViewBag.ProductSizeId)
                {
 
                    <td>@(Html.Kendo().NumericTextBox<double>()
                          .Name(item.Text)
                          .Format("##,#")
                          .Spinners(false)
 
                          )</td>
 
                }
            </tr>
        </table>
    </div>
</div>
 
 
 
<script>
    $(function () {
 
        //var ddLists = $(".HABddList").each(
        //    function () {
        //        // $(this).data("kendoDropDownList").list.width("auto");
        //        alert('hi');
        //        setWidth($("this"));
        //    });
        setWidth($("#ddlOrganization"));
 
        //$(".vesselinfo").hide();
        //$(".show_hide").show();
 
        //$('.show_hide').click(function () {
        //    $(".vesselinfo").slideToggle();
        //    $("#vesselShowButton").slideToggle();
        //});
 
    });
 
 
    function setWidth(el) {
        var d = el;
        var p = d.data("kendoDropDownList").popup.element;
        var w = p.css("visibility", "hidden").show().outerWidth() + 30;
        p.hide().css("visibility", "visible");
        d.closest(".k-widget").width(w);
    }
</script>
<style scoped>
    .k-numerictextbox {
        max-width: 50px;
        margin: 0px;
        padding: 0;
    }
 
    .show_hide {
        display: none;
    }
 
    .dates {
        display: inline-block;
        margin-left: 1em;
    }
 
        .dates:nth-of-type(1) {
            margin-left: 0;
        }
 
    .quantities {
        border-collapse: collapse;
        border-spacing: 0;
        border: solid 1px;
    }
 
        .quantities th {
            min-width: 40px;
            max-width: 50px;
            text-align: center;
            font-size: 1em;
            border: solid 1px;
            margin: 0.5em 0.5em;
        }
 
            .quantities th:nth-of-type(1) {
                width: 35px;
            }
 
        .quantities td {
            text-align: center;
            padding: 0;
            border: solid 1px;
        }
</style>
Viktor Tachev
Telerik team
 answered on 10 Oct 2017
1 answer
312 views

Hi! 

My problem is, that I have a custom class with 3*2 fileds (DateTime and an integer value for 3 different things, so I want to see 3 series in my charts):

My viewmodel:

public class RiportViewModels
    {
        private DateTime _firstDate;
        private DateTime _secondDate;
        private DateTime _thirdDate;

        public DateTime FirstDate
        {
            get => _firstDate;
            set
            {
                if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                _firstDate = new DateTime(value.Year, value.Month, 1);
            }
        }
        public int FirstAmount { get; set; }

        public DateTime SecondDate
        {
            get => _secondDate;
            set
            {
                if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                _secondDate = new DateTime(value.Year, value.Month, 1);
            }
        }
        public int SecondAmount { get; set; }

        public DateTime ThirdDate
        {
            get => _thirdDate;
            set
            {
                if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
                _thirdDate = new DateTime(value.Year, value.Month, 1);
            }
        }
        public int ThirdAmount { get; set; }
    }

 

My controller:

 

public class RiportController:Controller
{

[HttpGet]
public ActionResult Show()
{
return View();
}

[HttpPost]
public async Task<ActionResult> Show([DataSourceRequest] DataSourceRequest request)
{
List<RiportViewModels> result = new List<RiportViewModels>();
//here I fill up this list
return Json(result, JsonRequestBehavior.AllowGet);
}
}

 

And the Chart is empty:

@(Html.Kendo().Chart<RiportViewModels>()
          .Name("chart")
          .Title("My results")
          .Legend(legend => legend
              .Position(ChartLegendPosition.Top)
          )
          .DataSource(x => x
              .Read(read => read.Action("Show", "Riport"))
              )
          .ChartArea(chartArea => chartArea
              .Background("transparent")
          )
          .SeriesDefaults(seriesDefaults =>
              seriesDefaults.Line().Style(ChartLineStyle.Smooth)
          )
          .Series(series =>
          {
              series.Line(model => model.FirstAmount, category => category.FirstDate).Name("My first amount");
              series.Line(model => model.SecondAmount, category => category.SecondDate).Name("My second amount");
              series.Line(model => model.ThirdAmount, category => category.ThirdDate).Name("My third amount");
          })
          .CategoryAxis(axis => axis
          .ValueAxis(axis => axis
          .Numeric()
          .Labels(labels => labels.Format("{0}"))
          .Line(line => line.Visible(false))
          .Max(30000)
          )
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Format("{0}")
          )
    )

 

I would like to see 3 lines, on the X axis the dates showing only the year and the month, on the Y axis the amount field.

Can you please help me, why my chart is totally empty?

Many thanks

Stefan
Telerik team
 answered on 10 Oct 2017
1 answer
178 views

I am no longer able to resize columns in Google Chrome.  I've noticed this issue in the past but it seemed to resolve itself.  After updating to the latest release, it looks like the issue is back.  I don't know if this has to do with the update, but it is a crucial feature that I need.  

 

I don't think this is something on my end, as it looks to be broken in the demo while in chrome:

http://demos.telerik.com/aspnet-mvc/grid/column-resizing

Orlin
Telerik team
 answered on 10 Oct 2017
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
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
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?