Telerik Forums
Kendo UI for jQuery Forum
9 answers
1.7K+ 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
3 answers
131 views

Hi all, Please help me to fix issue. Data display in grid is not correctly. Time always is AM not PM

(Ex: 2018-08-14 1:00:00 PM
instead 2018-08-14 1:00:00 AM )

Boyan Dimitrov
Telerik team
 answered on 22 Aug 2018
5 answers
238 views

Hello, one would expect the slider to change when dragging the slider handle on a touch device. Does the widget not support touch/drag gestures in mobile devices?

Thanks,
Bernd

Ankit
Top achievements
Rank 1
 answered on 21 Aug 2018
2 answers
256 views

Hi,

I use the following code for all my boolean fields. Example :

{ field: "L_NEW",  title: "Nouveau", template: kendo.template('#= L_NEW ? "Oui" : "Non" #'),
                 filterable: { messages: { isTrue: "Oui", isFalse: "Non" } }}
    

 

For one of them, it's definitly not working. I get standard behavior, see attachment.

I have other screens working perfectly with the same code. I checked all I can checked.

The only idea is a problem with the field name ? This is the only difference I can see with other cases.

Thanks.

 

ANDRE
Top achievements
Rank 1
 answered on 21 Aug 2018
5 answers
682 views
Hi 

I am working on reordering row using drag and drop functionality for that I have implemented the code from the jsFiddle (http://jsfiddle.net/UsCFK/) successfully but it seem work like swapping between two rows.

My requirement is different if user drop any specific row it should be place on that location and other location gets modified accordingly for example I have 6 rows,
1
2
3
4
5
6

dragged  2nd row and drop on between 5th and 6th row, now order become
1
3
4
5
2

Right now this is not working as per jsFiddle library.

There is a way to do this?

Thanks-
Atul K.
-------------------------------------------
Build Relationship Dynamically 
nicolaken
Top achievements
Rank 1
 answered on 21 Aug 2018
2 answers
227 views

I'm having quite a few small issues with implementing a remote transport using Kendo Grid, with Node/Express backend. I basically want to build a simple backend catering to Kendo. I made a simple table on the server called Todo, with two fields: TodoID and TodoItem. I'm using this just to try and create a REST based CRUD using Kendo Grid.

Here's my datasource and grid definition:

var dataSource = new kendo.data.DataSource({
        autoSync: true,
        batch: true,
        schema: {
            model: {
                id: "TodoID",
                TodoID: {editable: false, nullable: true}
            }
        },
        transport: {
            create: {
                url: "http://localhost:3000/todo/create",
                contentType: 'application/json',
                dataType: "json"
            },
            read: {
                url: "http://localhost:3000/todo/read",
                contentType: 'application/json',
                dataType: "json"
            },
            update: {
                url: "http://localhost:3000/todo/update",
                contentType: 'application/json',
                dataType: "json"
            },
            destroy: {
                url: "http://localhost:3000/todo/delete",
                contentType: 'application/json',
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        }
    });

 

And here's the grid:

$("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        editable: "inline",
        toolbar: ["create"],
        columns: [{
            field: "TodoID",
            title: "ID",
            filterable: false
        }, {
            field: "TodoItem",
            title: "Item",
            filterable: false
        }, {
            command: ["edit", "destroy"], title: " ", width: "250px"
        }]
    });

 

Read and Update are working fine on both client and server. Delete and Create are odd.

1. When I click delete button, the REST method on server is called twice. Why?

I searched and looked into bath, auto sync, results I'm returning, etc. but can't figure out why. Here is the code on the server:

router.get('/delete', function(req, res, next) {
    var models = JSON.parse(req.query.models);
    connection.query('DELETE from Todo WHERE TodoID =' + models[0].TodoID + ';', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            console.log(results);
            res.status(200).json(models);
        }
    });
});

 

And here is the server logged messages (two of them one after another): 

OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 200 2793.546 ms - 34
OkPacket {
  fieldCount: 0,
  affectedRows: 0,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 304 1615.503 ms - -

2. The second issue is when I click "Add new record" in the grid, it immediately calls my server side Create route. I setup the ID and return that, and the Grid updates, but it's not in edit mode. What I want is click Add and then it let's me edit the row in the grid and then only calls create when done, does nothing if cancelled.

Here is the server side code for create (although I believe this should be called until after the record is added to the grid).

router.get('/create', function(req, res, next) {
    connection.query('INSERT INTO Todo (TodoItem) VALUES ("New item");', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            res.status(200).json([{ TodoID: results.insertId }]);
        }
    });
});

 

What do I need to do on the client side to let the grid editing complete the new item before it calls create on server? Seems like if I disable auto sync it can work they way I want, but then the other operations are broken.

Thanks,
Brett

Milena
Telerik team
 answered on 21 Aug 2018
8 answers
440 views
$("#grid").kendoGrid({ toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", proxyURL: "https://demos.telerik.com/kendo-ui/service/export", filterable: true}, dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"}, schema:{ model: { fields: {UnitsInStock: { type: "number" },ProductName: { type: "string" },UnitPrice: { type: "number" },UnitsOnOrder: { type: "number" },UnitsInStock: { type: "number" }}}}, pageSize: 7, group: { field: "UnitsInStock", aggregates: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum"},{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "count" }]}, aggregate: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum" },{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "min" },{ field: "UnitsInStock", aggregate: "max" }]}, sortable: true, pageable: true, groupable: true, filterable: true, columnMenu: true, reorderable: true, resizable: true, columns: [{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#", groupFooterTemplate: "Average: #=average#" },{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #", groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }]});

function search() {
            $('#grid').data('kendoGrid').dataSource.read({
                "CusCode": $("#CusCode").val(), "FromDate": $("#FromDate").val(), "ToDate": $("#ToDate").val()
                                    , "IsAllEquity": $("[name=rbStock]:checked").val(), "EquitySymbol": $("#EquitySymbol").val()
                                    , "IsAllDerivative": $("[name=rbDerivative]:checked").val(), "Instrument": $("#Instrument").val()
            });
            $("#grid").data("kendoGrid").refresh();
        }

 

Export Excel But data was lost when I called search() ( Use initialize parameter not in search() )

 

n/a
Top achievements
Rank 1
 answered on 21 Aug 2018
1 answer
184 views

Hi you have a  bug, in the chart i write label in Hebrew(RTL language) and it write the label text in reverse,

תפוח -> חופת

לימון -> ןומיל

It is write the label like mirror

Tsvetina
Telerik team
 answered on 21 Aug 2018
2 answers
168 views

Hi, I'm working with DialogFlow and Kendo UI for JQuery and ASP.NET to build a chatbot. I have an issue with the RenderAttachment method. No matter what value (carousel or list or anything else) I give to the AttachmentLayout parameter, the messages are displayed with a list format (Vertical aligned). Is it normal? If not, please can ou help me?

 

encl: my code

Yves William
Top achievements
Rank 1
 answered on 21 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
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?