Telerik Forums
Kendo UI for jQuery Forum
7 answers
1.0K+ views
Hi, 
I did see the "expand with one click" thread but that did not solve my problem.  I need the selected node to toggle expand/collapse on the single click.  I tried using the toggle() method, via the "select" event but that only works the first time the node is selected.  The "select" event only fires once and there is no documented alternative click event on the node. This means that if a user clicks on a node the first time it expands but if he/she clicks on it again it will not collapse because the "select" event does not fire again.  Is there an event that fires every time the node is clicked on that I could hook into?  Or is there some other solution for my issue?

Thanks
Andrew
Top achievements
Rank 1
 answered on 22 Apr 2015
4 answers
268 views
Reordering columns works with the Kendo Grid, but I have to drag and drop several times to go from one side of the grid to the other.  Is there any functionality that allows the column to be dragged by clicking in scrollbar area or something like this, so that a column can be moved by dragging it only once?
Simon
Top achievements
Rank 1
 answered on 21 Apr 2015
2 answers
474 views

I have a Kendo UI Editor inside a Kendo UI Window. It works fine, but if you highlight some text the toolbar disappears and you can't format it. Clicking outside the editor and then back inside brings the toolbar back, but it will disappear once again if you try to select text. I do not have this issue if I move the editor outside the window. Is there something I'm missing, or is this a bug with the Editor inside a Window?

Here is my code:

@{ 
    Html.Kendo().Window()
            .Name("dlgEmail")
        .Title("New Email")
        .Actions(actions => actions
            .Close()
        )
        .Content(@<text>
            @using (Html.BeginForm("SendEmailWithAttachment", "Donor", FormMethod.Post, new { id = "frmEmail" }))
            {
                <p class="validateTips">
                </p>
                <fieldset>
                    <table>
                        <tr>
                            <td>To:</td>
                            <td>
                                @Html.Kendo().MultiSelectFor(m => m.EmailWithAttachment.ToEmail).Name("ddlTo").BindTo(Model.EmailSelectList).Placeholder("Select address(es)...")
                            </td>
                        </tr>
                        <tr>
                            <td>BCC (Optional):</td>
                            <td>
                                @Html.Kendo().TextBoxFor(m => m.EmailWithAttachment.BCC).Name("txtBCC").HtmlAttributes(new { style = "width: 200px;" })
                            </td>
                        </tr>
                        <tr>
                            <td>Subject:</td>
                            <td>
                                @(Html.Kendo().TextBoxFor(m => m.EmailWithAttachment.Subject)
                                .Name("txtSubject")
                                .HtmlAttributes(new { style = "width: 200px;" }))
                            </td>
                        </tr>
                    </table>
                    <br />
                    @(Html.Kendo().EditorFor(m => m.EmailWithAttachment.Body)
                            .Name("txtEmailBody")
                            .Tag("div")
                            .HtmlAttributes(new { style = "width: 450px; height: 200px;" })
                            .Tools(tools => tools
                            .Clear()
                            .Bold().Italic().Underline()
                            .JustifyLeft().JustifyCenter().JustifyRight()
                            .InsertUnorderedList().InsertOrderedList()
                            .Outdent().Indent()
                            .CreateLink().Unlink()
                            .InsertImage()
                            .ViewHtml()
                            .FontName()
                            .FontSize()
                            .FontColor())
                            .Messages(messages => messages
                            .InsertOrderedList("Insert numbered list")
                                .InsertUnorderedList("Insert bulleted list"))
                                .Events(events => events.Paste("onEditorPaste"))
                    )
 
                    <input id="chkIncludeSignature" type="checkbox" /> <span>Include saved signature? (Signature defined in the My Profile tab.)</span>
                    <br />
                    <br />
                    <div id="divAttachments">
                        <span>Attachments (Optional):</span>
                        @(Html.Kendo().Upload()
                            .Name("EmailAttachments")
                        .HtmlAttributes(new { accept = ".png,.jpg,.gif,.xls,.xlsx,.doc,.docx,.pdf,.txt" })
                        )
                    </div>
                </fieldset>
                <div style="clear: both;">
                    <div style="float: right;">
                        <span id="lblEmailSendStatus"></span>
                        <img id="imgEmailSendStatus" class="loading-invisible" src="~/Image/ajax-loader.gif" alt="" />
                        <input type="submit" id="btnEmailSave" class="k-button" value="Send" />
                        <span id="btnEmailCancel" class="k-button">Cancel</span>
                    </div>
                </div>
            }
        </text>)
        .Modal(true)
        .Draggable()
        .Resizable()
        .Width(500)
        .Visible(false)
        .Render();
}

Jon
Top achievements
Rank 1
 answered on 21 Apr 2015
1 answer
813 views

Here is the use case:

var data = [{name: "Joe", age:30}

, {name:"Tom", age:29}

, ....

];

and I have a grid on top of this data source, when user update single entry of it(say via input with ngModel),

say updated "Joe" to "Chris", I want to refresh a grid's row, I'm using refreshGrid to update the whole grid and reselect and refocus row/cell right now, 

thought be something better there, Is there any method can refresh just one part of row, was using angular ui-grid before which handles

stale check of data can make specific cell update, is there any way can do row/cell update?

We are using it for mobile apps(Cordova on Android), it is quite slow to refresh a grid just for one value update.

 

 

Boyan Dimitrov
Telerik team
 answered on 21 Apr 2015
1 answer
132 views

Experiencing an odd issue with IE11 on windows 7 and windows 8.1 (as desktop program).  Not an issue when I tested on Chrome (win7, win8, mac) or firefox (win 8). 

Starting with the Basic Usage script for the validator from the KendoUI demos.

Add the <option></option> to the Start Time select options, this will allow the empty label to be the default when the drop down loads.

**NOTE: I can only reproduce this when using 'FullScreen' in the dojo, using the dojo side window, it does not have the issue.

Load the page and don't click anywhere else on the screen and click in the middle of the 'Start time' drop down to open the list.  When the list expands the validation error for the field being required is now shown.  The blur event for the validation appears to have been triggered.  This is only happening in this one environment, so I don't feel this is the desired result.

I created an example at

http://runner.telerik.io/fullscreen/eBajU

It has multiple drop-downs.  The problem that I am experiencing only happens the first time on any of the drop downs on the page.  Once the blur event occurs for the first drop down when opening the drop down, the second dropdown will not have the same problem.

 Any ideas would be appreciated.

Mark

Atanas Georgiev
Telerik team
 answered on 21 Apr 2015
3 answers
113 views

Hi

I am trying to get RequireJS and kendo mobile to play nicely. I have followed the blog post : http://blogs.telerik.com/appbuilder/posts/14-03-27/structuring-hybrid-mobile-applications

 And this works as a  fine but i have one major challenge (documentation is slim on requireJS), I have tried to get a tabstrip working however hrefs simply do not work, - to activate templates in a similar fashion to the tabstrip demo project.

 It can never find the template no matter what i call it.

 I have attached a sample project.

 

 

Petyo
Telerik team
 answered on 21 Apr 2015
3 answers
523 views

I'm using autocomplete for editing column inside the Kendo grid. The idea is when users type barcode or scan barcode in the edit cell, autocomplete will give them list of items containing entered text.

The autocomplete works well when I type barcode by keuboard, but when I use the barcode scanner, it seem they can't detect the change and not call method in read action in server.

I also tried with change event of autocompete and call ajax to the same method in read action. But it said $("#PARTCODE").data("kendoAutoComplete") is undefined. The function is below.

Can you please let me know anyway to make autocomplete works with barcode scanner?

Thanks

  function onPartCodeChange(e)

    {
        debugger;
       

        $.ajax({
            url: "@Url.Action("GetPartCodesFromPartAndSupplier", "Shared")",
            data: { text: e.sender._old },
            dataType: "json",
            type: "POST",
            async: true,
            success: function (myData) {
                debugger;
                if(myData.length==0)
                    {
                          alert("No matching barcode found.");              
                    }
                else
                {
                    
                    $("#PARTCODE").data("kendoAutoComplete").dataSource.data(myData);
                  
                    }
               
            }

        });
      
        }

Alexander Popov
Telerik team
 answered on 21 Apr 2015
3 answers
168 views
Hi,

We have used KendoUI grid control in our application with Detail template. During testing, we found that there is performance difference between IE8 and other browsers  like Firefox, Chrome and IE9. Data binding/loading in IE 8 browser take more time than compared to other browsers(almost more than double time).

I checked by putting stopwatch with each and every events/steps and found that, binding data to grid take more time in IE8 browser.

Below is small snap of code we used for binding.
<div>

  @(Html.Kendo().Grid<Orderlist>()
            .Name("OrderlistGrid")
            .HtmlAttributes(new { @class = "t-gridcenter" })
            .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .Events(events => events.Error("onTelerikAjaxError"))
                            .Read(read => read.Action("GetOrderList", "Orderlist", Html.AntiForgeryMvcTokenRouteValues("GetOrderList").AddRouteValues((RouteValueDictionary)ViewData["OrderListModel"]))))

            .Columns(columns =>
            {
        ...
        ...//around 18 columns
        ...
         })

 .ClientDetailTemplateId("OrderlistTemplate")
            .Events(events =>
            {
                
                events.DataBound("OnDataBound");
            })
            .Filterable()
            .Sortable(m => m.SortMode(GridSortMode.MultipleColumn))
            .Scrollable(scrollable => scrollable.Height("auto"))
            .Resizable(resizing => resizing.Columns(true))
            .Pageable(pager =>
            {
                pager.Refresh(true);
                pager.Numeric(true);
            }))
</div>

<script id="OrderlistTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=OrderId#")
            .HtmlAttributes(new { @class = "boxcnt" })
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("<b>Order details</b>").Encoded(false)
                .LoadContentFrom("OrderVerification", "Orderlist", Html.AntiForgeryMvcTokenRouteValues("OrderVerification").AddRouteValues(new { OrderId = "#= OrderId #" }).AddRouteValues(new { HashedParam = "#= HashedParam #" }));
            }).ToClientTemplate())
</script>


 function OnDataBound() {
//format cells in different conditions. like bold, background colors etc.
}

Please have look and provide your inputs on that.

Thanks in advance,
Vladimir Iliev
Telerik team
 answered on 21 Apr 2015
1 answer
245 views

Does the Kendo Datasource and Grid support OData v4 functions?  If so, I'm looking for an example of a kendo grid/datasource that's connected to an OData v4 function, particularly an unbound function with two or more parameters.  I'm curious to know if I could map the row filter values to the parameters in the URL that OData functions require.

 

The term function is generic so just for clarity, the function I mean are the ones described here: http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/odata-v4/odata-actions-and-functions

 

My use case is simple. I have an OData function that calls a stored procedure for the purpose of ad-hoc reporting. It works when I call it directly from the browser with http://localhost:333/odata/GetMyReport(parameter1='something', parameter2='something').  The problem I'd like to solve, is to get the grid with a row filter, i.e., "filterable: { mode: 'row' }", to generate the correct URL by preventing it from generating "?filter=..." and instead modifying the URL path by replacing the parameter values with what was entered in the filters.

 

Any ideas?

 

 

 

 

 

Rosen
Telerik team
 answered on 21 Apr 2015
6 answers
1.0K+ views
I am using the Kendo Grid and ajax bindings. However I would like to be able to filter the results based on values of controls set outside of the grid? I know I could use the built in filters but I don't want the grid to fetch the data before filtering it. I want my controller to filter the data before the grid is bound to it. How do I accomplish this?

The following is a simple example of what my page might look like.

Start Date -------------------            End Date -------------------       FilterButton

Grid
------------------------------------------------------------------------
Name  | Birth Date | .....
________________________________________________________

When I click the Filter button I want to rebind the grid based on values of my Model, which would be updated from the StartDate value and EndDate value selected prior to clicking the Filter Button. I have tried using javascript where I first set the values on the Model based on the selected values of the controls and then calling rebind on the grid. For this I also my model type as a parameter to the select query but that does not work. It always calls the constructor on the Model parameter that is passed into the select query when I do this. This seems like such a simple thing.

Thanks,

Billy Jacobs

Boyan Dimitrov
Telerik team
 answered on 21 Apr 2015
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
Licensing
ScrollView
Switch
TextArea
BulletChart
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
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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?