Telerik Forums
Kendo UI for jQuery Forum
2 answers
5.5K+ views

Dear Team,

I am new to Kendo control, please help me with this, I already have Tree View as shown in the attachment, Now I have two(Expand  and Collapse) buttons, I need to perform the  'Expand All'  on click of Expand button and 'Collapse All'  on click of  Collapse button.

How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button.

Please help me on this.

 

Vessy
Telerik team
 answered on 20 Mar 2019
1 answer
211 views

We need to get rid of Hibernate (change it to JDBC-driver).

We use springdemos and have already changed 90% of code, but we don't inderstand how to get rid of this function:

@Override
public DataSourceResult getList(DataSourceRequest request) {
    return request.toDataSourceResult(sessionFactory.getCurrentSession(), TObjectType.class);}

---

Full code of TObjectTypeDaoImpl (it's model):

--

package com.kendoui.spring.models;

import org.hibernate.Session;
import com.kendoui.spring.models.TObjectType;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Transactional;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

@Transactional
@Component
public class TObjectTypeDaoImpl implements TObjectTypeDao {
@Autowired
private SessionFactory sessionFactory;
private ConnectionToPostgresql cn;
{ try { cn = new ConnectionToPostgresql(); }
catch (Exception e) { e.printStackTrace(); } }

@SuppressWarnings("unchecked")
@Override
public List<TObjectType> getList() {
//return sessionFactory.getCurrentSession().createCriteria(TObjectType.class).list();
Connection connection = cn.getConnection();
List<TObjectType> result = new ArrayList<TObjectType>();
try {
Statement statement = connection.createStatement();
ResultSet resultSet = statement.executeQuery("SELECT * FROM \"TOBJECT_TYPE\"");
while (resultSet.next()) {
TObjectType to = new TObjectType();
to.setIdObjectType(resultSet.getString("ID_OBJECT_TYPE"));
to.setDescription(resultSet.getString("DESCRIPTION"));
to.setObject1C(resultSet.getString("OBJECT_1C"));
result.add(to);
}
return result;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
}

@Override
public DataSourceResult getList(DataSourceRequest request) {

return request.toDataSourceResult(sessionFactory.getCurrentSession(), TObjectType.class);

}

@Override
public void saveOrUpdate(List<TObjectType> products) {
// Session session = sessionFactory.getCurrentSession();
// for (TObjectType product : products) {
// session.saveOrUpdate(product);
// }
//Connection connection = cn.getConnection();
for (TObjectType product : products) {

Connection connection = cn.getConnection();
String item = product.getIdObjectType();
try {
if (item.equals(""))
{
System.out.println("New User");
Statement statement = connection.createStatement();
PreparedStatement preparedStmt = connection.prepareStatement("INSERT INTO \"TOBJECT_TYPE\" (\"DESCRIPTION\",\"OBJECT_1C\") VALUES (?, ?)");
preparedStmt.setString(1, product.getDescription());
preparedStmt.setString(2, product.getObject1C());
//preparedStmt.setString(1, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
else {
System.out.println("Update user");

PreparedStatement preparedStmt = connection.prepareStatement("UPDATE \"TOBJECT_TYPE\" SET \"DESCRIPTION\" = ?, \"OBJECT_1C\" = ? where \"ID_OBJECT_TYPE\" = ?");
preparedStmt.setString(1, product.getDescription());
preparedStmt.setString(2, product.getObject1C());
preparedStmt.setString(3, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();}
}
}

@Override //если добавляем
public void saveOrUpdate(TObjectType product) {
// Session session = sessionFactory.getCurrentSession();
// session.saveOrUpdate(product);
System.out.println("Вызвался метод saveOrUpdate(TObjectType product)");

}

@Override
public void delete(TObjectType product) {
System.out.println("Вызвался метод delete(TObjectType product)");
//Session session = sessionFactory.getCurrentSession();
//session.delete(session.load(TObjectType.class, product.getIdObjectType()));
}

@Override
public void delete(List<TObjectType> products) {
// Session session = sessionFactory.getCurrentSession();
// for (TObjectType product : products) {
// session.delete(session.load(TObjectType.class, product.getIdObjectType()));
// }
for (TObjectType product : products) {
Connection connection = cn.getConnection();
try {
PreparedStatement preparedStmt = connection.prepareStatement("DELETE FROM \"TOBJECT_TYPE\" WHERE \"ID_OBJECT_TYPE\" = ?");
preparedStmt.setString(1, product.getIdObjectType());
preparedStmt.executeUpdate();
connection.close();
}
catch (SQLException e){ e.printStackTrace();}
}
}
}

Konstantin Dikov
Telerik team
 answered on 20 Mar 2019
1 answer
1.2K+ views

I have used Kendo Grid in my project to display data. Here to insert grid data in my datasource, i have used the bellow code. But in the bellow code in insert statement i have provided field name of grid and have values assigned to it.
For example(AMOUNT: objGridData[idx].AMOUNT)

Hence my requirement is, that i need to do insert in my datasource without specifying field name as in future columns of grid might change for example can we use "datasource.add()".

// Insert Records to the Grid
 for (var idx = 0; idx < objGridData.length; idx++) {
 var newrec= grid.dataSource.insert(idx, {
            AMOUNT: objGridData[idx].AMOUNT,
            id: objGridData[idx].id,
            PERCENT: objGridData[idx].PERCENT,
            PRODUCT1: objGridData[idx].PRODUCT1,
            PRODUCT2: objGridData[idx].PRODUCT2,
            PRODUCT3: objGridData[idx].PRODUCT3,
            PRODUCT4: objGridData[idx].PRODUCT4,
 
         });
}

Any suggestion would be helpful.

Thanks

Alex Hajigeorgieva
Telerik team
 answered on 19 Mar 2019
1 answer
1.2K+ views

Hello,

I want to change ComboBox placeholder dynamically if there is no data return from api.

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div class="demo-section k-content"><h4>Find a product</h4><input id="products" style="width: 100%;" /><div class="demo-hint">Hint: type at least three characters. For example "che".</div></div><script> $(document).ready(function() { $("#products").kendoComboBox({ placeholder: "Select product", dataTextField: "ProductName", dataValueField: "ProductID", filter: "contains", autoBind: false, minLength: 3, dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",}}}});});</script></div></body></html>

 

if Above url not return any data then I want to change my Placeholder to "Try Again".

Martin
Telerik team
 answered on 19 Mar 2019
6 answers
250 views

I'm having an issue with an instance of the kendoScheduler. What's going on is, all crud operations, in addition to read, seem to want to use the 'get' type. I'm using the code from the demo on this site. So I figured, OK, I'll just add in the type: 'put', say for for update method. Still doesn't work.

On the other side of things, I'm using web api and I have all my different actions in the controllers, say, we're dealing with the update one only here - I have the [httpPut] attribute on top of the action. And I'm getting the 405 method not allowed error. 

Playing around, on the client side of things, I changed the updates type, to get, and add [httpGet] to the controller (even though this clearly isn't what I want here) - when I debug this, it finds the respective action, but the model is null.

What's going on when I have httpput on the controller and why on the front end is all crud operations trying to use a get?

Thanks.

 

Joana
Telerik team
 answered on 19 Mar 2019
1 answer
494 views

Hello,

I have a chart for which I added 2 series with a date category field. The step used for the categories are 1 hour. However my data begin on 00:45 and ended on 9:45.
I would like to be able to display 00:45 , 01:45 ,02:45 etc.. On my categories axis label. Most importantly, I would also like to be able to display the real point using a tooltip template

I have tried a couple of things but It never worked how I intended it to work.
I've noticed that using a tootltip template like :

tooltip: {
         visible: true,
         template: "#= '<b>' + dataItem.date + '</b>' #"
     }

I was able to get the real x coordinnates  (00:45, 01:45 etc..)

But When I use something like that:

tooltip: {
          visible: true,
           template: function(e){   
           return e.category;
           }

I'm not getting the real axis point.

In each case I didn't find any parameter in "e" that represent the real axis date point.

 

 

Here's an example of what I'm talking about:example

I would also state that I wanted to used the same kind of template in order to display the categories labels.

So in summary What I want is to be able to get the real points using tooltip template and categoryAxis label template in the form of a javascript function.

Any help will be appreciated.

Regards

Tsvetina
Telerik team
 answered on 19 Mar 2019
5 answers
314 views

Hello,

I am currently utilizing the JQuery Kendo UI Grid (v2018.3.1017) with keyboard navigation and  editing.  I have noticed that when utilizing the tab key navigation abilities with the if you are on the last column of a row, a console error will be thrown on the tab key press, and navigation does not continue to the next row.

 

After digging into the kendo  grid source code, I found that the cause seems to be that the hierarchy cell is actually being selected by the navigation logic, and the editCell method is being fired on this cell.  Which leads to the console error in the attached image.

I found that the cause for this seems to revolve around the _tabNext method, which is using a selector (DATA_CELL) that is incorrect.  The selector (:not(.k-group-cell):not(.k-hierarchy-cell:not(:has(.k-icon.k-i-collapse,.k-icon.k-i-expand))):visible) does not properly ignore hierarchy cells.

We have fixed this issue in our logic by overwriting the selector with the following selector (td:not(.k-group-cell):not(.k-hierarchy-cell):visible).

We have not yet upgraded to the 2019 version of the Kendo UI Grid, so I'm not sure if this issue has been addressed or not, but wanted to make your team aware of it.

Tsvetomir
Telerik team
 answered on 19 Mar 2019
8 answers
728 views

Hi, I'm implementing a Scheduler in .NET using MVC. The scheduler runs on top of Jquery. But my code is not working. I needed to try if I can use my own data, so I wrote my own controller method to retrieve data from a database and return it in JSON and not JSONP since it's all running on the same host. My view is as follows.

Index.cshtml
@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.timezones.min.js"></script>
<h2>Index</h2>
<div id="example">
    <div id="team-schedule">
        <div id="orders">
            <input checked type="checkbox" id="order1" aria-label="Order 1" value="200023">
            <input checked type="checkbox" id="order2" aria-label="Order 2" value="200027">
            <input type="checkbox" id="order3" aria-label="Order 3" value="200033">
        </div>
    </div>
    <div id="scheduler"></div>
</div>
@section SchedulerScripts{
   
        <script>
            $(document).ready(function() {
                $("#scheduler").kendoScheduler({
                    date: new Date("2013/6/13"),
                    startTime: new Date("2013/6/13 07:00 AM"),
                    height: 600,
                    views: [
                        "day",
                        { type: "workWeek", selected: true },
                        "week",
                        "month",
                        "agenda",
                        { type: "timeline", eventHeight: 50}
                    ],
                    timezone: "Etc/UTC",
                    dataSource: {
                        batch: true,
                        transport: {
                            read: {
                                url: "http://localhost:51329/Scheduler/SchedulerJSONData",               //This is the URL to retrieve my JSON data. Scheduler is the //controller where the SchedulerJSONData method is implemented.
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        schema: {
                            model: {
                                id: "orderId",
                                fields: {
                                    orderNo: { from: "ORDER_NO" },
                                    releaseNo: { from: "RELEASE_NO" },
                                    operationNo: { from: "OPERATION_NO" },
                                    start: { type: "date", from: "OP_START_DATE" },
                                    end: { type: "date", from: "OP_FINISH_DATE" },
                                    description: { from: "OPERATION_DESCRIPTION" },
                                }
                            }
                        },
                        filter: {
                            logic: "or",
                            filters: [
                                { field: "orderNo", operator: "eq", value: '200023' },
                                { field: "orderNo", operator: "eq", value: '200027' },
                                { field: "orderNo", operator: "eq", value: '200033' },
                            ]
                        }
                    },
                    resources: [
                        {
                            field: "orderNo",
                            title: "Order",
                            dataSource: [
                                { text: "Order 1", value: '200023', color: "#f8a398" },
                                { text: "Order 2", value: '200027', color: "#51a0ed" },
                                { text: "Order 3", value: '200033', color: "#56ca85" }
                            ]
                        }
                    ]
                });
                $("#orders :checkbox").change(function(e) {
                    var checked = $.map($("#orders :checked"), function(checkbox) {
                        return parseInt($(checkbox).val());
                    });
                    var scheduler = $("#scheduler").data("kendoScheduler");
                    scheduler.dataSource.filter({
                        operator: function(task) {
                            return $.inArray(task.orderNo, checked) >= 0;
                        }
                    });
                });
            });
        </script>
   
    }

My controller method to retrieve data from the database is as follows.

public ActionResult SchedulerJSONData() {
            con.Open();                                                         //con is my database connection string.
            OleDbDataAdapter oda = new OleDbDataAdapter("SELECT ORDER_NO, RELEASE_NO, OPERATION_NO, OP_START_DATE, OP_FINISH_DATE, OPERATION_DESCRIPTION FROM SHOP_ORDER_OPERATION_TAB where ORDER_NO='200023' OR ORDER_NO='200027' OR ORDER_NO='200033'", con);
            DataTable dt = new DataTable();
            oda.Fill(dt);
            string JSONString = string.Empty;
            JSONString = JsonConvert.SerializeObject(dt);
            return Json(JSONString, JsonRequestBehavior.AllowGet);
        }

This method returns the JSON data correctly, but when I plug the URL in bold above to retrieve the JSON in the scheduler, it doesn't work. Can anyone figure out what I have done wrong?

Dimitar
Telerik team
 answered on 19 Mar 2019
1 answer
140 views
I'd like to highlight the text a user has typed in any matching elements from the filtered list. I don't see any arguments available to the template function that indicate this. Am I overlooking something?
Marin Bratanov
Telerik team
 answered on 19 Mar 2019
1 answer
297 views

Is the Select event supported with the MVVM DropDownTree?  When I modify the example for the MVVM DropDownTree, it doesn't fire

<input
  data-role="dropdowntree"
  data-text-field="text"
  data-value-field="id"
  data-bind="value: selectedProduct, source: products, events: { change: onChange, select: onSelect }" />
 
Added to viewModel:
 
onSelect: function() {
 kendoConsole.log("event :: Select");
},

 

 

Marin Bratanov
Telerik team
 answered on 19 Mar 2019
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?