Telerik Forums
UI for ASP.NET MVC Forum
9 answers
1.8K+ views

Hi there,

I am using this code in the Html.Kendo().Grid:

columns.Bound(p => p.Positive).ClientTemplate("<input type='checkbox' \\#= Positive ? checked='checked' :'' \\# />");

In the login form I use a @Html.Kendo().CheckBoxFor (checkbox for 'remember me').

How can I change the style of the rendered checkbox in the grid to the style of the kendo checkbox?

Kind regards,

David

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 05 May 2020
3 answers
2.1K+ views

I am binding a Kendo grid using Ajax binding. In the last column of the grid I want to show action buttons based on the status. In html I have a kendo template. But im not sure how to set kendo template in grid column using it's ID.

I'm open for any other suggestions, if there are any other ways to do this.

<div>
    @(Html.Kendo().Grid<BatchDetail>()
    .Name("grid")
    .Columns(col =>
    {
        col.Bound(p => p.ID);
        col.Bound(p => p.OriginalCost);
        col.Bound(p => p.Status);
       //how do I add new column here which is not bound to any property, but it need to render a template below 
    })
    .AutoBind(true)
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read
            .Action("GetData", "Detail", new { ID = Model.ID })))
    )
</div>
 
<script id="action-template" type="text/x-kendo-template">
    #if(Status == "Error") {#
    <button class="resolve-button"
            onclick="location.href='@Url.Action("DoAction", "Detail")?fileID=#: FileID #&ID=#: ID#'">
        Resolve
    </button>
   #}#
</script>

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 05 May 2020
3 answers
107 views

Hello EveryOne,

so I have two schedulers and I made for each Scheduler a CustomEditor.

Events Scheduler and Communication Scheduler...

In Both CustomEditor I have a Type DropDownList but each one is calling the items in the list from another table (another ActionMethod).

So one of the Type DropDownList works fine .. and by fine I mean if I edit an event and I change the value in the list .. it sends the new selected value to the actionMethod.

But the other one is working with one condition  !!

So I tested almost all options that I can do .. and one was WEIRD!

So that's what I did :

1- Create an Event

2- Give a Value for Type

3- Save the Event

4- Edit that Event

5- Change the value of Type

6- Save the Event

Now at step 6 .. it sends all new values to the ActionMethod...

but if I created an event and give it just a Title and Time without giving it a Type Value then try to do steps 4,5 and 6 .. it sends a value [object][Object] to the ActionMethod.

Now This is not a new problem .. I've seen others asking almost the same question .. but the answers there didn't help me much.

So Please .. any Solution will be great...

PS: This Worked Fine before two days .. now it doesn't 

Veselin Tsvetanov
Telerik team
 answered on 05 May 2020
1 answer
968 views

     Hi All

 

We are new to Kendo, hence this might be a simple scenario that we are not able to get around.

 

We have a grid, in which Employee Name column is actually a DropDown selection with in column that uses DropDownFor. We initially bound our column to Employee Object in the Model, but then Filtering, Export to Excel etc features didn't work. Upon some research we found that we need to bind to a view model that has only basic data types and not any complex data types.

We then created a view model on top of our Model and bind that to grid, but doing this we have lost the Employee Id which was earlier being set properly. Grid now shows Employee Name only which is not a unique field, we need to know the ID of selected member.

 

Can you please help us understand how we bind an object to column and still preserve all features of the grid like Filtering etc. 

If that is not possible can you suggest a way where in we can set ID of selected employee within viewmodel and not just name.

 

Please let me know if I can explain any further.

 

Thanks

M.

Tsvetomir
Telerik team
 answered on 05 May 2020
3 answers
157 views

Hi,

I'm using scheduler timeline view. When browser is in full screen , it works well. But after resized, resource header goes to misaligned just like attached.
Yellow is <td> , red is <div class="k-scheduler-items">.

How can I fix it?

Aleksandar
Telerik team
 answered on 04 May 2020
3 answers
1.5K+ 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.8K+ 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.7K+ 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
141 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
173 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
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
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?