Telerik Forums
Kendo UI for jQuery Forum
1 answer
295 views

I need to change the behavior of the dropdown for the multiselect.  

I want the contents of the dropdown to be paged with the standard paging controls at the bottom of the list.

This way, instead of a scrollbar, the user can click the next / previous or a page number to navigate through all the possible options.

Is there any way to accomplish this using the Multiselect?  I looked through the Virtualization feature and it really does not do what I am looking for.

 

I attached a image showing what I am describing.  Its what the select would look like with the dropdown open.

Alexander Valchev
Telerik team
 answered on 09 Jun 2016
1 answer
286 views
I have a kendo grid in which one column can have null values. But I don't see the grid populating when there are null values. My code is here:
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: gridData,
columns: [
{ field: "name", title: "Name"},
{ field: "result",
title: "Result",
template: "# if (result == null) { #" +
"<span data-content=' '></span> } #" +
"# } else { #" +
"<span data-content=\"#: result#\"> </span>"}]})
;});
I don't get the grid shown when the "result" is null. However, I can get the grid when the value is not null. Not sure on how to handle the null values in templates.
Dimiter Madjarov
Telerik team
 answered on 09 Jun 2016
7 answers
591 views
Will kendo have native optgroup suppose anytime soon?

<select>
                <optgroup label="Social Icons">
                    <option value="icon-phone">icon-phone</option>
                    <option value="icon-phone-sign">icon-phone-sign</option>
                    <option value="icon-facebook">icon-facebook</option>
                    <option value="icon-facebook-sign">icon-facebook-sign</option>
                    <option value="icon-twitter">icon-twitter</option>
                    <option value="icon-twitter-sign">icon-twitter-sign</option>
                    <option value="icon-github">icon-github</option>
                    <option value="icon-github-alt">icon-github-alt</option>
                    <option value="icon-github-sign">icon-github-sign</option>
                    <option value="icon-linkedin">icon-linkedin</option>
                    <option value="icon-linkedin-sign">icon-linkedin-sign</option>
                    <option value="icon-pinterest">icon-pinterest</option>
                    <option value="icon-pinterest-sign">icon-pinterest-sign</option>
                    <option value="icon-google-plus">icon-google-plus</option>
                    <option value="icon-google-plus-sign">icon-google-plus-sign</option>
                    <option value="icon-sign-blank">icon-sign-blank</option>
                </optgroup>
                <optgroup label="Medical Icons">
                    <option value="icon-ambulance">icon-ambulance</option>
                    <option value="icon-beaker">icon-beaker</option>
                    <option value="icon-h-sign">icon-h-sign</option>
                    <option value="icon-hospital">icon-hospital</option>
                    <option value="icon-medkit">icon-medkit</option>
                    <option value="icon-plus-sign-alt">icon-plus-sign-alt</option>
                    <option value="icon-stethoscope">icon-stethoscope</option>
                    <option value="icon-user-md">icon-user-md</option>
                </optgroup>
            </select>
Alexander Valchev
Telerik team
 answered on 09 Jun 2016
1 answer
484 views

I have a Kendo UI Grid who's data is being read from a table T1. However, all other Create/Update/Delete operations are being saved to another table T2 along with a field/column 'Operation'. The purpose is to allow an authorized user to review those changes before approving them and updating the record in the original table T1. Therefore, any client-side create/update/delete operation results only an 'insert' operation into table T2. Now here the requirement is that once the server performs its task (inserting the updated model into table T2), the client should remove the model/row/record from the Kendo UI Grid. So once the server completes it's api call it returns the same model back to the client. And on the client-side I am handling the kendo dataSource's requestEnd event to remove the model from the grid. Below code shall give a better idea:

Kendo UI Grid Options:

ctrl.whtRatesMasterGridOptions = {
            dataSource: {
                type: 'odata',
                transport: {
                    read: {
                        url: 'api/WHTRatesMaster',
                        dataType: 'json',
                        cache: false
                    },
                    create: {
                        url: 'api/WHTRatesMasterPendingChange',
                        dataType: "json"
                    },
                    update: {
                        url: 'api/WHTRatesMasterPendingChange',
                        dataType: "json",
                        type: "POST"
                    },
                    destroy: {
                        url: 'api/WHTRatesMasterPendingChange',
                        dataType: "json",
                        contentType: "application/json",
                        type: "POST"
                    },
                    parameterMap: function (options, type) {
                        if (type !== "read" && options) {
                            options.Operation = type;
                            return kendo.stringify(options);
                        }
                    }
                },
                requestEnd: function (e) {  // ctrl.currentModelUid is set in the grid's edit event.
                    if (e.type === "create" || e.type === "update") {      // since kendo itself remove's a deleted record from the grid we are only remove the model in case of a 'create' or 'update' operation
                        var currentModel = ctrl.whtRatesMasterGrid.dataSource.getByUid(ctrl.currentModelUid);
                        ctrl.whtRatesMasterGrid.dataSource.remove(currentModel);
                    }
                },
                schema: {
                    data: function (data) {
                        if ('Items' in data)
                            return data.Items;
                        return data;
                    },
                    total: function (data) {
                        return data.Count ? data.Count : 0;
                    },
                    model: {
                        id: "PortfolioCountryEffectiveDateKey",
                        fields: {
                            PortfolioCountryEffectiveDateKey: { type: "string", editable: false, nullable: false },
                            Portfolio: { type: "string", editable: true, nullable: false, validation: { required: true } },
                            Iso3Code: { type: "string", editable: true, nullable: false, validation: { required: true } },
                            EffectiveDate: { type: "date", editable: true, nullable: false, validation: { required: { message: "Effective Date is required" } } },
                            // some more model fields....
                        }
                    }
                },
            },
            edit: function (e) {
                ctrl.currentModelUid = e.model.uid;
            },
        };

 

The 'PortfolioCountryEffectiveDateKey' is simply a concatenation of the Portfolio, Iso3Code & the EffectiveDate fields - the server sends it when grid performs a read operation. The database tables have a composite key on these three columns, but since kendo does not have a concept of specifying composite key, I have used such a concatenated property to allow kendo uniquely identify a record in its dataSource by the model.id configuration.

Server-side API:

[Route("api/WHTRatesMasterPendingChange")]
        [ResponseType(typeof(WHTRatesMasterPendingChange))]
        public IHttpActionResult WHTRatesMasterPendingChange(WHTRatesMasterPendingChange whtRatesMasterPendingChange)
        {
    // dbcontext.dbset.Add(whtRatesMasterPendingChange)
    return Ok(whtRatesMasterPendingChange);
        }

The signature of the Read API:

public PageResult<WHTRatesMaster> GetWHTRatesMasterDbSet(ODataQueryOptions options, [FromODataUri]bool showActivePortfolios)

Here both the WHTRatesMaster & WHTRatesMasterPendingChange models have a the same composite identity fields (Portfolio, Iso3Code, EffectiveDate).
Problem: The desired functionality ('inserting' records into the table T2 & removing the record from the kendo grid) works well for the CREATE & DESTROY operation. However, when I try to update records, the first request is successful, but for the second request two API calls are made (the first is success, second fails because kendo sends the same model again to the server) - which results in a primary key violation constraint error. So how to I solve the problem of kendo making the same API call twice.
(TO BE NOTED : I am using the same server-side API and type:POST for Create, Update, & Destroy)
EDIT: If I remove the 'requestEnd' event handler, then only single API calls are made to the server. But I also need to remove the updated row from the grid; so don't think I can do away with this event.

Boyan Dimitrov
Telerik team
 answered on 09 Jun 2016
1 answer
3.8K+ views

I have a kendo grid in which one column can have null values. But I don't see the grid populating when there are null values. My code is here:

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: gridData,

columns: [

{ field: "name", title: "Name"},

{ field: "result",

title: "Result",

template: "# if (result == null) { #" +

"<span data-content=' '></span> } #" +

"# } else { #" +

"<span data-content=\"#: result#\"> </span>"}]})

;});
I don't get the grid shown when the "result" is null. However, I can get the grid when the value is not null. Not sure on how to handle the null values in templates.

Dimiter Madjarov
Telerik team
 answered on 09 Jun 2016
1 answer
135 views
I have a dropwdown list, which values should be populated via ajax and server filtering based on the filterfield:

$(document).ready(function() {
  $("#customerDropdown").kendoDropDownList({
    filter: "startswith",
    dataTextField: "CustomerName",
    dataValueField: "CustomerId",
    dataSource: {
      serverFiltering: true,
      transport: {
        read: {
          url: "/managecards/carddetails/read_customers",
          data: GetCustomerFilterValue
        }
      }
    }
  });
});
 
function GetCustomerFilterValue() {
  return { filterValue: $("#customerDropdown").data("kendoDropDownList").filterInput.val() };
}



The Problem is, that the Ajax Callback happens only one time.

For example:

- If I type Foo, the `read_customers` action is called with Foo.
- After that, if I write Bar, there will be no callback.

What point is missing? I basicly want only the items that matches with the filter, because we are speaking about 50k datarows.
Alexander Valchev
Telerik team
 answered on 09 Jun 2016
4 answers
671 views
Hi,

Is it possible to add placeholder text to an input (text box) shown on the grid row filter?

Thanks,

Michael
Kiril Nikolov
Telerik team
 answered on 09 Jun 2016
5 answers
404 views

HI,

We have requirement to implement drag and drop in Kendo Tree List.

We would like to check , if Drag and Drop feature is available in Kendo Tree list ?  As per our requirement we need to drag and drop each nodes across parent nodes.  The requirement is not drag and drop the nodes between parent notes.  The parent node itself should be provided with an option to drag and drop across. and During drop we have validations to perform . hence need to catch the drop event.  How this drop event can be catched ?

Thanks

 

Alex Gyoshev
Telerik team
 answered on 09 Jun 2016
1 answer
181 views

Hello,

I was going through the Scheduler MVVM demo:

http://demos.telerik.com/kendo-ui/scheduler/mvvm

I want to set currentTimeMarker to false, in order to hide the time marker. I want to do it in html by means of data- attribute. So I add this to the div element for the scheduler:

data-current-time-marker="false"

I re-run the demo, but the time marker is still there...

Thank you for the answers,

Boris

Vladimir Iliev
Telerik team
 answered on 09 Jun 2016
8 answers
236 views

HI all, i was wondering if it is possible to get beta or preview versions of KendoUI for Angular2 before planned release dates.

I am thinking of using it on one of projects so in way we are interested to be beta testers.

Thank you.

Petyo
Telerik team
 answered on 09 Jun 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?