Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.3K+ views

There must be something about the ToDataSourceResult method that I do not understand.  When DataSourceRequest.Page is 1, the resulting DataSourceResult.Data has the 10 elements that I passed into it, but, if DataSourceRequest.Page is 2, the resulting DataSourceResult.Data has 0 elements.  It is as if ToDataSourceResult is doing paging by only selecting the elements for the selected page range, but I am doing my own paging, so I want all elements passed to ToDataSourceResult to be included in DataSourceResult.Data.  Does this mean I should not be using ToDataSourceResult and should just populate the Data field manually?

 

request.Page = 1;
// results is a list of 10 elements
var gridModel = results.ToDataSourceResult(request);
// since Page is 1, dataCount will be 10
var dataCount = gridModel.Data.AsQueryable().Count();
 
request.Page = 2;
// results is a list of 10 elements
gridModel = results.ToDataSourceResult(request);
// since Page is 2, dataCount will be 0
dataCount = gridModel.Data.AsQueryable().Count();
Anton Mironov
Telerik team
 answered on 04 May 2020
2 answers
3.4K+ views

I have the data source defined using Read for my Kendo MVC grid.  Every time that the data is refreshed, I want to include some data from the browser.  I don't care if  I have to use params or query string or whatever, but I need to be able to specify values to include in the ajax call to the server and those values will change as the user interacts with the page.  How do I get those values included in the ajax call?  There must be a standard way to do this, since it is hard to imagine a grid without fields on the screen controlling the grid data, but I cannot find any examples of this in the demos.

 

.DataSource(dataBinding => dataBinding.Ajax()
         .Read(read => read.Action("_CustomBinding", "Members"))
)
Tsvetomir
Telerik team
 answered on 30 Apr 2020
1 answer
1.6K+ views

We are using the Kendo Grid for MVC and provider a software for agencies to see their list of clients. One of our grids is fairly large and has about 15 columns, and depending on the agency there can be upwards of 15,000 records returned within this single grid. We are noticing that the load time in this scenario is very long (9 seconds). I would have thought that by using ajax and paging that this time would be much lower and that as you change places or search in the headers it would do another call with those filters.

Here is what we have currently.

What can be done to speed up this grid?

 

@(Html.Kendo().Grid(Model)
            .Name("ClientsGrid")
            .Events(e => e
            .ColumnMenuInit("onColumnMenuInit"))
                .Columns(columns =>
                {
                    columns.Template(c => { })
                        .HeaderTemplate(
                            @<text>
                                @if (ViewBag.CanAddClients)
                                    {
                                    <a href='/clients/clientsAdd.asp?AgencyID=@Session["SelectedAgencyID"]'><i class='fas fa-plus fa-lg hidden-xs' id='ClientAdd' style='color: rgb(4, 167, 200); padding-right:4px' title='Client Add'></i></a>
                                    }
                             </text>)
                            .ClientTemplate(@"#=getAccessibleLinks(ClientID, DocCnt)#").MinScreenWidth(768).Width(130);
                            columns.Bound(c => c.FirstName).Width(130).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));
                            columns.Bound(c => c.LastName).ClientTemplate("#if (!LastName){#Null#} else {# #=LastName# #}#").Width(130).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));
                            columns.Bound(c => c.Age).Sortable(true).HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(80);
                            columns.Bound(c => c.InsuredInsAndPayerName).Title("Primary Ins").MinScreenWidth(768).Width(150).Filterable(ftb => ftb.Multi(true).Search(true));
                            columns.Bound(c => c.Insured2InsAndPayerName).Title("Secondary Ins").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Multi(true).Search(true));
                            columns.Bound(c => c.RecordNumber).Title("Record #").HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(110).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));
                            columns.Bound(c => c.Status).MinScreenWidth(992).Width(100).Filterable(ftb => ftb.Multi(true).Search(true));
                            columns.Bound(c => c.StaffName).Title("Lead Staff").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));
                            columns.Bound(c => c.TherapistName).Title("Therapist").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith").SuggestionOperator(FilterType.StartsWith)));
                            columns.Bound(c => c.ClientTeamName).Title("Team").MinScreenWidth(992).Width(150).Filterable(ftb => ftb.Multi(true).Search(true));
                            columns.Bound(c => c.OfficeName).Title("Office").MinScreenWidth(992).Width(120).Filterable(ftb => ftb.Multi(true).Search(true));
                            columns.Bound(c => c.BillingReady).HeaderTemplate(@"<span class='hoverToolTip' title='<b>Billing Ready</b><br> If there is a Green Check icon, then your client is billing ready. Ortherwise, the client needs more information.'>BR</span>").ClientTemplate("#if (BillingReady){#<i class='far fa-check fa-md text-center' style='color:rgb(0, 133, 18);'>#}else {#<i class='far fa-times-circle fa-md text-center' style='color:rgb(196, 18, 48);'>#}#").HtmlAttributes(new { @class = "align-center" }).MinScreenWidth(768).Width(70);
                            columns.Bound(c => c.DateExpIssue).Title("Exp").HeaderTemplate(@"<span class='hoverToolTip' title='<b>Expiration Issues</b><br> If a Red Icon is shown, then your client has expiration issues.'>Exp</span>").ClientTemplate("#if(DateExpIssue){#<i class='far fa-times-circle fa-md text-center' style='color:rgb(196, 18, 48);'>#}#").HtmlAttributes(new { @class = "align-center" }).Width(75).MinScreenWidth(768);
                            columns.Bound(c => c.ClientID).Sortable(false).Title("CP ID").HtmlAttributes(new { @class = "alignRight" }).MinScreenWidth(992).Width(80);
                        })
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .Read(read => read.Action("GetClientsGridDetails", "Clients").Data("BindingClientsGrid"))
                        .PageSize(ViewBag.pageSize)
                        )
                        .ClientDetailTemplateId("template")
                        .ToolBar(toolbar =>
                        {
                            toolbar
                        .Template(
                            @<text>
                                <div class="toolbar">
                                    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 toolBarItem">
 
                                        <label class="category-label" for="category">Client Status:</label>
                                        @(Html.Kendo().DropDownList().Name("ClientStatusID")
                                                                    .HtmlAttributes(new { @id = "ClientStatusID" })
                                                                    .DataTextField("Status")
                                                                    .DataValueField("StatusID")
                                                                    .Value("0")
                                                                    .Text("Current Only")
                                                                    .Events(e => e.Change("filterClientsGrid"))
                                                                    .SelectedIndex(0)
                                                                    .DataSource(source =>
                                                                    {
                                                                        source.Read(read =>
                                                                            {
                                                                                read.Action("BindClientStatusDetails", "Clients");
                                                                            })
                                                                    .ServerFiltering(true);
                                                                    })
                                                                    .AutoBind(false)
 
                                        )
                                </div>
                                    @if (ViewBag.UserType == "Staff")
                                                {
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 toolBarItem">
                                            <label class="category-label" for="category">Staff Services:</label>
                                            @(Html.Kendo().DropDownList().Name("StaffServiceID")
                                                                        .DataTextField("StaffSeviceName")
                                                                        .DataValueField("StaffServiceId")
                                                                        .Events(e => e.Change("filterClientsGrid"))
                                                                        .Value("Active Only")
                                                                        .Text("Active Only")
                                                                        .DataSource(source =>
                                                                        {
                                                                            source.Read(read =>
                                                                            {
                                                                                read.Action("BindStaffServiceDetails", "Clients");
                                                                            })
                                                                        .ServerFiltering(true);
                                                                        })
                                            )
                                        </div>
                                                }
                                                else
                                                {
                                        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"></div>
                                                }
                                     
 
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <h4 class="page-title text-center">@ViewBag.Title</h4>
                                    </div>
 
                                </div>
                            </text>);
                            })
                            .Sortable()
                            .ColumnMenu()
                            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                            .Events(events => events
                                .DataBound("onDataBound")
                            )
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(true)
                            .Read(read => read.Action("GetClientsGridDetails", "Clients").Data("BindingClientsGrid"))
                            .PageSize(ViewBag.pageSize)
                            )
                            .Scrollable()
                            .Pageable(x => x.PageSizes(new int[] { 50, 100, 250 }))
                            .Resizable(resize => resize.Columns(true))
                            .Reorderable(reorder => reorder.Columns(true))
                            .NoRecords("No records found.")
)
<script id="template" type="text/x-kendo-template">
    <div class="container-fluid hidden-lg hidden-md">
        <div class="row" style="background:rgb(160, 211,222) !important; padding-top:5px; padding-bottom:5px; text-align:center;">
            <div class="col-xs-11"><b><span style="color:rgb(3, 140, 167);">Client Details</span></b></div>
        </div>
        <div class="row" style="background:white !important; border: 1px solid rgb(160, 211,222);">
            <div class="col-md-3 col-sm-4">
                <div style="text-align:center; border-bottom:1px solid color: rgb(255, 255, 255); " class="p-t-10">
                    <a href='/clients/Details/#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-user visible-xs' id='ClientsDetails' style='color:rgb(4, 167, 200); padding-right:4px;' title='Client Details'></i></a>
                    <a href='/clients/Details/#=ClientID#?Tab=clientDocs' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-paperclip visible-xs' id='ClientDocs' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Docs'></i></a>
                    <a href='/clientsservices/index/#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-hand-holding-heart visible-xs' id='ClientServices' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Service'></i></a>
                    <a href='/clients/clientsAuths.asp?ClientID=#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-check-square visible-xs' id='ClientAuths' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Auths'></i></a>
                    <a href='/clients/clientsEvents.asp?ClientID=#=ClientID#' class="p-5 hidden-lg hidden-md hidden-sm visible-xs-inline-block"><i class='far fa-user-friends visible-xs' id='ClientEvents' style='color:rgb(4, 167, 200); padding-right:4px' title='Client Events'></i></a>
                </div>
                <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Lead Staff:</b>#if(StaffName){# #: StaffName # #}#</div>
                <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Therapist:</b>#if(TherapistName){# #: TherapistName # #}#</div>
                <div class="p-b-10 hidden-lg hidden-md visible-sm visible-xs"><b>Team:</b>#if(ClientTeamName){# #: ClientTeamName # #}#</div>
                <div class="p-b-10 hidden-lg hidden-md hidden-sm visible-xs"><b>Office:</b>#if(OfficeName){# #: OfficeName # #}#</div>
                <div class="p-b-10 hidden-lg hidden-md"><b>Primary Ins:</b>#if(InsuredInsAndPayerName){# #: InsuredInsAndPayerName # #}#</div>
                <div class="p-b-10 hidden-lg hidden-md"><b>Secondary Ins:</b>#if(Insured2InsAndPayerName){# #: Insured2InsAndPayerName # #}#</div>
 
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Age:</b>#if(Age){# #: Age # #}#</div>
                <div class="p-b-10 visible-xs"><b>Billing Ready:</b>#if(BillingReady){#<i class='far fa-check fa-md text-center' style='color:rgb(0, 133, 18);' />#}#</div>
                <div class="p-b-10 hidden-lg hidden-md hidden-sm"><b>Expiration Issues:</b>#if(DateExpIssue){# #: DateExpIssue # #}#</div>
                <div class="p-b-10 hidden-lg hidden-md hidden-sm"><b>Status:</b>#if(Status){# #: Status # #}#</div>
                <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>Record Number:</b>#if(RecordNumber){# #: RecordNumber # #}#</div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="p-b-10 hidden-lg visible-md visible-sm visible-xs"><b>CPID:</b>#if(ClientID){# #: ClientID # #}#</div>
 
            </div>
 
        </div>
    </div>
</script>

Nikolay
Telerik team
 answered on 30 Apr 2020
4 answers
104 views

Found a similar question here: https://www.telerik.com/forums/datarangepicker-label-localization

 

So I know, this element is new to Kendo UI and the localization files aren't completed. The difference to the post is, I'm using MVC. Is it possible to modify the missing localization values through razor? Or directly change the "Start" and "End" messages?

If not, how can I implement the solution in the other thread? Or are there other solutions?

 

Before someone is asking. The localization for other elements works properly:

<script src="https://kendo.cdn.telerik.com/2020.1.219/js/cultures/kendo.culture.de-DE.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.219/js/messages/kendo.messages.de-DE.min.js"></script>

Nikolay
Telerik team
 answered on 30 Apr 2020
1 answer
131 views
I have 2 grids. Grid A and grid B. Grid B has a column with a dropdown list. Some of the items in the grid B dropdown list are from a column in grid A. Is there a way to update the dataSource, client side, of the dropdown list in grid B when a column in grid A is updated? All without posting back to the server. The dataSource for the dropdown list in grid B only seems to be available on an edit event of the grid B column containing the dropdown list. Is there a way to access the dataSource of the grid B dropdown list on an edit event of a grid A column? I'm using MVC and have my grids defined with Razor and my bond dropdown lists are in partial view editor templates.
Nikolay
Telerik team
 answered on 29 Apr 2020
1 answer
95 views

I have a simple kendo editor in my MVC app. When using Firefox, BR tag is being added at the end of the string typed into the editor. This does happen in Firefox only.

 

@(Html.Kendo().Editor().Name("MyEditor")

.HtmlAttributes(new { cols = "5", rows = "5", style = "width: 500px;height:50px" })

.Tools(tools => tools.Clear()))

 

var r = $('#MyEditor').data('kendoEditor').value()

 

How should it be fixed, so I don't get the unwanted html?

Martin
Telerik team
 answered on 29 Apr 2020
3 answers
3.3K+ views

I use ToDataSource to return a subset of records to display in the grid, using the DataSourceRequest's Page and PageSize to determine which rows to return.  What I can't figure out is how to indicate to the grid how many total records there are, so that it can display the right page count.  Is this as simple as returning a different structure that includes the total record count or what?  I cannot find any examples of this online.

return Json(enumerable.ToDataSourceResult(request));

Nikolay
Telerik team
 answered on 29 Apr 2020
3 answers
273 views

I had the following set up using version 2020.1.114:

bundles.Add(new StyleBundle("~/Content/kendo/css")
                .Include("~/Content/kendo/2020.1.114/kendo.bootstrap-v4.min.css")
                .Include("~/Content/kendo/2020.1.114/kendo.mobile.all.min.css")
            );

bundles.Add(new ScriptBundle("~/bundles/kendo")
                .Include("~/Scripts/kendo/2020.1.114/kendo.all.min.js")
                .Include("~/Scripts/kendo/2020.1.114/kendo.aspnetmvc.min.js")
            );

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

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

 

I used the VS extension to upgrade to 2020.1.406, changed the paths in BundleConfig.cs, recompiled, and now the <link> and <script> tags don't get rendered at all.  This is all with "debug=true".  The other bundles I have set up are rendering fine... It's ONLY the kendo ones that don't.

 

Literally only upgraded to 2020.1.406.  Nothing else changed in the application.

 

Anybody else seeing this issue?

 

Thanks in advance!

KF

Ivan Danchev
Telerik team
 answered on 28 Apr 2020
1 answer
5.6K+ views
Hello,
I am looking for information on how to add a dropdown box to an MVC specific grid control. I need the box to display in a cell and show when the grid is rendered. Do you know of a sample or have example code available?

Thanks 
Huey
Top achievements
Rank 1
 answered on 28 Apr 2020
4 answers
1.5K+ views

Any hints as to why I can't get the DataBound client side event to fire on my grid?  The server side Ajax call is definitely happening and I can see the wait spinner start and stop.  It appears as though every other part of the Grid is rendering properly, but I cannot get any of the events in the browser to fire. Are there any particular client side libraries that need to be configured?  I already had an issue where I found I needed to upgrade my jquery version in order for the Ajax bind to occur.

Subscribe using jquery:

$(document).ready(function () {     var grid = $("#GridAppointmentAllList").data("kendoGrid");     grid.bind("dataBound", xx_onDataBound2); })

Subscribe using Fluent API:

.Events(events => events.DataBound("xx_onDataBound").DataBinding("xx_dataBinding"))

Eric
Top achievements
Rank 1
Veteran
Iron
 answered on 27 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?