Telerik Forums
Kendo UI for jQuery Forum
1 answer
372 views

Hello

We're experiencing slow performance in IE 11 with a Kendo Grid when it contains a couple hundred rows. We use a custom rowTemplate which is fairly complex, with icons and angular markup.

What I see when debugging is that on every change to one item of the grid (change is triggered externally, not via direct edit on the grid, and sent to the DataSource with pushUpdate()), the whole grid is being re-rendered, which is fairly expensive as it has to render the complex template for all hundreds of rows.

Is it possible to have the grid only re-render the affected row ? It should significantly increase performance in our case.

Thanks

Kiril Nikolov
Telerik team
 answered on 19 Apr 2016
14 answers
1.1K+ views
I'm sending CRUD actions using JSON to a PHP backend.

Reading (including filtering and paging) is working fine. I'm now at the point of Creating new records using the 'batch' option.

I've managed to get the date to save the entered data into the MySQL database, but I can't figure out what the server response should be. I've tried to respond with 1 or true on success -- but the grid doesn't recognise that the data has been saved.

I've not tried Update, but I suspect the result will be the same.

What am I missing?

Thanks
Dimo
Telerik team
 answered on 19 Apr 2016
1 answer
297 views

I have an Angular App that muss send an authorization header within every request that makes to the server.

When defining the kendo datasource, I've added the header field:

this._tableData = new kendo.data.DataSource({
      transport: {
        read: {
          cache: true,
          url: `${this.baseUrl}/uiobjects/_search`,
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          type: "POST",
          headers: {'Authorization': this.header}
        },

Allowing me to fill the kendo grid with data, but for one of the rows I've defined a template:

template: `<div class='title'><div class='pic'><img src="#:_links.previewdata.href#" alt="thumbnail"></div><span>#: title #</span></div>`

and there makes another request to the server in order to grab the image. 

My problem here, is that I am not being able to set this authorization header for these request. Angular interceptors doesn't work because they are not made through $http.

Is there any clean way to intercep these request, or to add a Header??

Petyo
Telerik team
 answered on 19 Apr 2016
1 answer
372 views

Hello,

I'm trying to create a kendo grid with pagination, sorting and filtering in server side.

The grid configuration in client side is:

$scope.options = {
                sortable: true,
                filterable: true,
            pageable: true,
            dataSource: {
                    transport: {
                        read: {
                            url: "api/items",
                            contentType: "application/json",
                            dataType: "json",
                            type: "POST"
                        },
                        parameterMap: function (options) {
                            return kendo.stringify(options);
                        }
                    },
                    schema: {
                        total: "totalItems",
                        data: "items"
             },
                    serverPaging: true,
                    pageSize: 4,
                    serverSorting: true
                }
            };

In server side, I've tried to do the pagination but it doesn't work. I have used Kendo.DynamicLinqThe DataSourceRequest containg (take, skip, sort) is corrected loaded from the request but when the query is executed it returns an error because of AutoMapper conversion from Dto to Model.

What is the correct way of implementing server side pagination, sorting and filtering for Kendo UI Grid, Web API and Automapper(conversion from dto to model)?

 

 

 

Nikolay Rusev
Telerik team
 answered on 19 Apr 2016
3 answers
933 views

Hi,

do you have any solution with Kendo UI to produce a simple Dual List Box like e.g. http://www.virtuosoft.eu/code/bootstrap-duallistbox/ ?

MultiSelect is fine, but if you have longer lists it is not viable. A dual list box does the same Thing as MultiSelect, but is much more intuitive and clear. Any hints are welcome. Thanks!

Best regards

Martin

Dimiter Topalov
Telerik team
 answered on 19 Apr 2016
1 answer
5.4K+ views
Hi

I am trying to format my data as per http://docs.telerik.com/kendo-ui/framework/globalization/numberformatting

This is my example:

http://jsfiddle.net/Lqxon2f1/2/

After I format my data is looks like it is not recognized as number anymore and hence not summed up properly.

Also I am unsure how to format the sum displayed in my footer column

Help appreciated!

BR

http://jsfiddle.net/Lqxon2f1/2/
Rosen
Telerik team
 answered on 19 Apr 2016
3 answers
128 views

I got some extra div showing in the scheduler view. Anyone knows why?

the three little very thin bars are not any of my events.

Stephen
Top achievements
Rank 1
 answered on 18 Apr 2016
2 answers
617 views

I have a Kendo Editor defined as below:

      @(Html.Kendo().Editor()
      .Name("RestrictionsEditor")
      .Tag("div")
      .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
            .CreateLink().Unlink()
            .InsertImage()
            .TableEditing()
            .FontColor().BackColor()
      )
      .Value(@<text><p>This is readonly editor initially and only gets in edit mode after button is clicked</p></text>))
        

Below is how I am making the Editor as readonly:

           <script type="text/javascript">
                $(function () {
                    var editor = $("#RestrictionsEditor").data("kendoEditor"),
                    editorBody = $(editor.body);

                    // make readonly
                    editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
                })
                   
            </script>

 

I want to get editor in 'Edit' mode only when a button is clicked. Below is how I am defining my button:

                         <button class="btn-sm" id="edit">Edit</button>

 

I have defined my button just before initializing Kendo Editor.

 

And below is how I am trying to get the editor to edit mode:

         <script type="text/javascript">
                $("#edit .btn").click(function () {

                var editor = $("#RestrictionsEditor").data("kendoEditor"),
                editorBody = $(editor.body);
                
                editorBody.attr("contenteditable", true).find("a").off("click.readonly");
                })
            </script>

 

Now, when I run application my editor is in read only and when I click 'Edit' button, editor doesn't gets in edit mode and instead as soon as I click button, I m directed to the original page. Forgot to mention, my editor is inside a tab, which is inside of a modal.

 

Can you tell  me where I am doing wrong and how can I acheive th

 

Thanks!

RJ
Top achievements
Rank 1
 answered on 18 Apr 2016
1 answer
147 views

I've tested in Chrome (49.0.2623.112 m), Firefox (45.0.2), IE 11 (11.212.10586.0), and MS Edge (25.10586.0.0).

I'm having to programmatically resize some parent panes and a vertical splitter, it would be nice to bind that event and call my resize function there.

And while the contentLoad event doesn't appear to be working, the resize event does fire.

I'd also like to note that the kendoSplitter loads beautifully in IE 11.

 

Thanks!

Alex Gyoshev
Telerik team
 answered on 18 Apr 2016
1 answer
200 views

Is it possible to have jQuery run inside of an inline template?

Here's what I'm trying to accomplish.  I have an inline template that contains a form that the user fills out to submit back to my controller.  I have a set of radio buttons on the form.  If they click on the last radio button, I need my textarea to appear and be required for form submission.  

Here's my template:

<script type="text/x-kendo-template" id="rejectTemplate">
    <div id="reject-container">
        @using (Html.BeginForm("RejectConcern", "Filter", FormMethod.Post, new { @id = "rejectConcern", @style = "width:100%", @class = "k-content" }))
        {
            @Html.AntiForgeryToken()
            <input type="hidden" id="id" name="id" value="#= data.id #" />
            <table>
                <tr>
                    <td valign="top">
                        <label>Reason</label>
                    </td>
                    <td>
                        <label>
                            @Html.RadioButton("reasonForRejection", "NotQuestion", false, new { @id = "reasonForRejection" })Concern is not a question and will not be answered
                        </label>
                        <label>
                            @Html.RadioButton("reasonForRejection", "Inappropriate", false, new { @id = "reasonForRejection" })Concern contains inappropriate language and will not be answered
                        </label>
                        <label>
                            @Html.RadioButton("reasonForRejection", "Irrelevant", false, new { @id = "reasonForRejection" })Concern is not relevant to our business/operation and will not be answered
                        </label>
                        <label>
                            @Html.RadioButton("reasonForRejection", "Personal", false, new { @id = "reasonForRejection" })Concern is about an individual, a specific group, or area and will not be answered
                        </label>
                        <label>
                            @Html.RadioButton("reasonForRejection", "Other", false, new { @id = "reasonForRejection" })Other
                        </label>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                    @Html.TextArea("answer",
                        new
                        {
                            @id = "answer",
                            @name = "answer",
                            @class = "k-textbox",
                            @placeholder = "Enter the reason for rejection here.",
                            @validationmessage = "The reason for rejection is required.",
                            @style = "width: 600px; min-width:600px; max-width:69%; height:200px",
                            @maxlength = "1000"
                        }
                    )
                     </td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <div class="actions">
                            <button type="submit" id="rejectConcernButton" class="k-button">Submit</button>
                        </div>
                    </td>
                </tr>
            </table>
        }
    </div>
</script>

How can I use jQuery to show/hide the answer textarea field depending on if the last radio button is checked or not?  If jQuery isn't possible, can it be done via regular JavaScript?

Dimiter Topalov
Telerik team
 answered on 18 Apr 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?