Telerik Forums
Kendo UI for jQuery Forum
3 answers
666 views

Hi guys, I've a case where I'm grouping with the grid, but want to sort in a different order.

E.g. by default if my group data field has values A, B, C, D this would be the group order.

I have data that is sorted by sections of data, that have an order the client wants displayed in a priority order.

To simplify it something like:

Display Field Value    Sort Field Value

A                                2

B                                4

C                                1

D                                3

I want the grouping text to be A, B, C, D, but the order to be C, A, D, B as per the sort field value (a field not to be visible).

I haven't been able to find anyway to do this. Any help greatly appreciated.

Konstantin Dikov
Telerik team
 answered on 28 Aug 2018
1 answer
122 views
Attached is the snippet for the Kendo UI grid. The full text (e.g. Column 1) is displayed in the header for all browsers except in the Safari browser. The Safari browser show ellipsis in the header title (Col...) that is causing issue for our customer. The customer does not know that they can expand the column in the grid. How can I show full text in the column header in Safari browser like it show in the Chrome etc? 
Konstantin Dikov
Telerik team
 answered on 28 Aug 2018
1 answer
104 views

Hi

in a kendo grid column I'm trying to render column sparklines from this markup:

<span class="compliance-dev" data-source="-1,-1,-1,1,1,-1,-1,-1"></span>

in grid.dataBound I do this:

var $spans = $(".compliance-dev", "#grid");

            $.each($spans, function() {
                var $span = $(this);
                var ds = $span.data("source").split(',');
                $span.kendoSparkline({
                    data: ds,
                    //series: [{
                    //    type: "column",
                    //    color: "#ff0000",
                    //    negativeColor: "#0099ff"
                    //}]
                });
            });

This renders into a sparkline of type line: https://dojo.telerik.com/UsUluTaK

How do I render the sparkline as a column graph?

/Morten

Daniel
Telerik team
 answered on 28 Aug 2018
2 answers
86 views

I am use in popup window TreeList, and bind treeList to array. Simple example http://dojo.telerik.com/OjipACUQ

Update button in popup window save record and array as one record.

Some problems i fix.

Add new record then edit and press cancel, record will be removed, but record is not dirty and not isNew()

How can i fix it?

In my application editing and adding works, in the example does not work. i don't know why.

Alexander
Top achievements
Rank 1
 answered on 27 Aug 2018
1 answer
170 views
Is there another way to catch the moment when tooltip changes its position from ie. 'bottom' to 'top' than monitoring class '.k-callout-[n,e,w,s]'? Because in latest Kendo version this class, once given, doesn't change the arrow direction.
Ivan Danchev
Telerik team
 answered on 24 Aug 2018
5 answers
797 views

How do I set the uid for files in the initial file list options for the upload widget?  

When I upload files the guid is auto generated and easily available in the upload event via e.files[0].uid

I have saved this information in the database along with the file and can repopulate the widget with previously uploaded files, but not set the uid, a new, different one is generated.  I would like to set it so I can use the existing uid when a user clicks remove on a previously uploaded file and I can delete it from the database.

The initial files array seems not to support it, is there another way?

http://docs.telerik.com/kendo-ui/api/javascript/ui/upload#configuration-files

Ivan Danchev
Telerik team
 answered on 24 Aug 2018
1 answer
302 views

Hi All,

        I am working on grid filter and I meet such a problem. The type of field "status" is string and it will return 0 for Female and 1 for Male. I use a template to show "Male" or "Female" instead of "0" or "1" respectively in grid. However, the filter doesn't work because it only receives "0" or "1" and "Female" or "Male" will show nothing in grid. The code is below.

     { 'field': 'status' , 'title': 'Gender', 'width': 110, 'template': &quot;#= status === '1' ? 'Male' : 'Female' #&quot, }

       I wanna use filter to accept "Male" or "Female", or create a multiple selection, how should I make it? Thanks for your help.

James

Georgi
Telerik team
 answered on 24 Aug 2018
5 answers
137 views

I want to use pagination to display data, but it won't be in a grid form, I would just show some documents in a div, but still want to be able to paginate - i.e. request html for n-th page.

Is this possible?

Tsvetina
Telerik team
 answered on 23 Aug 2018
9 answers
1.6K+ views

Hi,

I spent days about that without finding any solution. 

The case is simple :

I have a Grid using virtual scrolling and a "nav toolbar" with buttons : "First, Previous, Next, Last".

The nav toolbar purpose is to navigate through the records contained in the grid.  

Note that the grid itself is in a kendo TabStrip but at this point, I use the nav toolbar only when the grid is visible. Later, I'll need to resync the grid if the user use the toolbar when the tab ontaining the grid is hidden, but it's another story.

 

I tried several approaches, here is the last.

Working code for "First" button : In any case, I get the first record selected at the top of the grid 

first : function () {
            if(oTab.oGrid.dataSource.page() != 1){
                gotoFirstRow=true;  // => the select will occur in dataBound event       
                oTab.oGrid.dataSource.page(1);
            }
            else {
                oTab.oGrid.select("tr:eq('0')");
            }
        }

 

In databound this code works, simple :

...
     if (gotoFirstRow){
gotoFirstRow=false;                
oTab.oGrid.select("tr:eq('0')");
 }

...

 

The same kind of code works for the "Last" button.

 

For the "Next" (and "Prev") button, it works untill the grid needs to load data :

next : function () {

                // The uidNext is set in change event : When a record is selected, I populate

                // uidCurrent/idproCurrent for the current record

                // uidNext/idproNext for the next record if any (or null if no more record)

                // uidPrev/idproPrev for the previous record if any (or null if no more record)
                // idpro is a unique field idnetifier all records have
            
if (typeof uidNext == "undefined"){ // For example when the current selected record is the last one
                return;
            }
            idproToSelect=idproNext; // => So the select will occur in dataBound event.    
             
            oTab.oGrid.select("tr[data-uid='"+uidNext+"']");           
             

                        // Now trying to put the selected record at the top of the grid. The goal is that if user use the nav bar, the grid always presents the

                       // record at the top

            var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;
            var selectContentOffset = oTab.oGrid.select().offset().top;
            var distance = selectContentOffset - scrollContentOffset;
            oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);
}

 

When I use scrollTop, if Kendo needs more records, it loads them. So I continue the process in dataBound event :

 

A this point, nothing works at all. This this the code in databound event:

if (idproToSelect != null){
                     
             // After new records are loaded, I search a record matching the unique field idproToSelect assigned previously
oTab.oGrid.element.find("td[data-field='idpro']").each(function(i, item) {
       if($(item).html() == idproToSelect) {

           // When I found it, I get the uid in order to select the row

          uidToSelect=$(item).parent().attr('data-uid');
       }
});

      // The row is selected

oTab.oGrid.select("tr[data-uid='"+uidToSelect+"']");
// RAZ
uidToSelect=null;
 idproToSelect=null;

 

// Now trying to put selected row at the top of the grid : not working

var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;
       var selectContentOffset = oTab.oGrid.select().offset().top;
       var distance = selectContentOffset - scrollContentOffset;
       oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);

 }

The problem i that grid nehavior becomes erratic, the scroll position is not right, so most of the time, I think the right record is selected, but it isn't showed. I suspect a problem with scrollTop when used form databound event. 

 

ANDRE
Top achievements
Rank 1
 answered on 23 Aug 2018
1 answer
1.7K+ views

I have a check box and kendo switch,i want the switch to be disabled by check the checkbox and enabled by un-check the checkbox,i think 4 years back this was a question and as it was answered at the time,should be able to do so,any way here is the code:

 

  
      <input type="checkbox" id="eq1" class="k-checkbox"> 
     <label>Crew Present:</label><input type="checkbox" id="notifications-switch" aria-label="Notifications Switch" disabled="disabled" />
      <label>Grid Loss:</label><input type="checkbox" id="notifications-Grid" aria-label="Notifications Switch" disabled="disabled" />

here is the JS:

 

 $(function () {
          $("#notifications-switch").kendoMobileSwitch();

          //$("#notifications-Grid").kendoMobileSwitch();

      });


      $("#eq1").change(function () {
          debugger;
          $("#notifications-Grid").prop("disabled", !$(this).is(":checked"));
      });

Ivan Danchev
Telerik team
 answered on 23 Aug 2018
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?