Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.2K+ views

Hi

I have a grid that has inplace editing enabled.  I would like to capture the tab event on one specific cell's input.  I've added this to my view:

 

    $(document).ready(function () {
        var grid = $("#ItemsGrid");
        $(document).on("keydown", "input#UnitPrice", function (e) {
            console.log("keydown on input UnitPrice");
            var code = e.keyCode || e.which;

            if (code === 9) {
                console.log("Tab");
            }
        });
    });

 

however, I find that "Tab" is never logged to the console.  It seems that it's getting suppressed by kendo.js (at least, thats what I can figure out by poking around in the debugger...)

 

Is there a better way to capture keydown events in a specific edit cell?

Konstantin Dikov
Telerik team
 answered on 13 Nov 2017
4 answers
211 views

Hi,

I am trying to show two "columns" on the same PDF page when exporting. The columns content might increase too much, and when that happens, the user expect to see the same organization within the PDF but in here, this is not the case http://dojo.telerik.com/@Deyner/IDaYEw. Is there a way to make this pdf exporting to look in a proper way? showing both  "columns" next the other even if their content fits in multiple pages. This is a breaker for our company, since we just implemented a new project where users can edit "documents" online and export them (which technically are multiple kendo ui editors that simulate every field the user can edit) . How can we make this work? 

 

PD: The layout we have is much more complex than the one on the example, so we hope the solution you give us will also work with our real layout.

 

Thanks,

Deyner Lezcano

Veselin Tsvetanov
Telerik team
 answered on 13 Nov 2017
1 answer
216 views

Dojo demonstrating the issue: https://dojo.telerik.com/@ian+telerik@ocucom.com/EBeDE

When using a HierarchicalDataSource bound to a viewModel, using any method to insert a new row in a child datasource results in a duplicate top-level item in the bound HTML view, until the "change" event is manually triggered on the parent. 

My goal is putting together a hierarchical product editor (for, say, departments and employees; some hierarchy where the children are of differing object types to the parent). 

 

Ianko
Telerik team
 answered on 13 Nov 2017
6 answers
426 views

 If I have a node in a HierarchicalDataSource, and I want to sync changes to it, I assume I should call

node.parentNode().children.sync()

When I call this, the resulting data packet contains, as its 'id' property, the id of the parentNode, not of the child. 

This seems to be due to the fact that kendo.data.Node's _initChildren function indiscriminately applies the parent's identity to the request's data object. 

Clearly, that makes no sense for update/delete actions, where some other property would make more sense, or the ability to include or not include the parent property. 

Arguably, the entire path should be available, for situations where a node can exist in multiple places in the tree. 

I suppose I could overcome this with the data: property being a function, but I think the basic assumption is mistaken.

 

Viktor Tachev
Telerik team
 answered on 13 Nov 2017
9 answers
1.6K+ views

Hi there,

I have a textbox where the user can enter multiple partnumbers (as comma separated) and the partnumber should have the autocomplete feature enabled for every selection. This was possible with the kendo autocomplete feature easily. But in my case, there were around 2 lakh partnumbers in the DB and so, the page was stuck up, when it tries to load the data. So, instead we wanted to only pull the top 20 matching partnumbers in the autocomplete functionality.

With this being said, we should be making Server Filtering instead of getting all the data in one shot. I did see multiple similar examples, but nothing was working in my case, as I was trying to fetch the data from the DB using stored procedure call. Below is my code.

 $("#txtPartNumbers").kendoAutoComplete({
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: ApiBaseUrl.val + 'mycontroller/getParts',
                        type: "get",
                        dataType: "json",
                        data: { partNumber: 200, maxCount = 20}
                    }
                }
            },
            filter: "startswith",
            placeholder: "Select Inventory Parts..",
            minLength: 3,
            separator: ", "
        });

 

partNumber (is the search text) and maxCount(20 in my case) are the parameters that I used to pass to the controller method and then to the stored procedure.

 

 

Appreciate your help on this.

 

Thanks!

Regards

Neelima

 

 

 

 

 

 

Neelima
Top achievements
Rank 1
 answered on 11 Nov 2017
3 answers
1.0K+ views

For those who're wondering how to catch KendoUI autocomplete filter on server side webapi2 controller without having to deal with filter.filters[0] query string prarameters.

This is how I've solved it:

JS:

$("#values").kendoAutoComplete({
    minLength: 3,
    enforceMinLength: true,
    dataTextField: "value",
    dataValueField: "id",
    dataSource: {
        type: "json",
        severFiltering: true,
        serverPaging: true,
        transport: {
            read: "/api/values",
            parameterMap: function (data, type) {
                return { filter: $('#values').val() };
            }
        }
    },
    filtering: function (e) {
        if (!e.filter.value) {
            e.preventDefault();
        }
    }
});

 

The trick here is to use  parameterMap to change request url.

 

WebApi2:

public class ValuesController : ApiController
{
    // GET api/values
    [HttpGet]
    [Route("api/values", Name = "r2", Order = 2)]
    public IEnumerable<ValueModel> Get()
    {
        //var filters = new AutoCompleteFilters(Request.GetQueryNameValuePairs());
        return new List<ValueModel>() {
            new ValueModel() { id = 1, value = "item 1" },
            new ValueModel() { id = 2, value = "item 2" },
            new ValueModel() { id = 3, value = "item 3" },
        };
    }
    //GET api/values?filter=item
    //GET api/values/ite
    [HttpGet]
    [Route("api/values/{filter?}", Name = "r1", Order = 1)]
    public IEnumerable<ValueModel> Get(string filter)
    {
        return new List<ValueModel>() {
            new ValueModel() { id=1, value="item 1" },
            new ValueModel() { id=2, value="item 2" },
            new ValueModel() { id=3, value="item 3" },
        }.Where(m => m.value.StartsWith(filter, StringComparison.CurrentCultureIgnoreCase));
    }
}

The trick on WebApi2 is to use "named" Route attributes with optional {filter?} parameter

 

This solution allows either :

http://localhost:11989/api/values?filter=item

or

http://localhost:11989/api/values/ite

What is cool in case your api is exposed to third-party applications.

Happy coding!

 

 

Neli
Telerik team
 answered on 10 Nov 2017
1 answer
534 views

Hi,

I'm having an issue with a hierarchical grid using ASP.NET MVC5 where I can't seem to access the child grid data in any client templates.

My overall goal is to be able to put an aggregated max value in the ClientFooterTemplate of the first column.

Here's my cut down grid code:

01.@(Html.Kendo().Grid<XXViewModel>()
02.    .Name("XXGrid")
03.    .EnableCustomBinding(true)
04.    .AutoBind(true)
05.    .DataSource(ds => ds
06.        .Ajax()
07.        .Read(r => r.Action("XX_Read", "XX")
08.        .ServerOperation(true)
09.    )
10.    .Events(ev =>
11.    {
12.        ev.DetailExpand("detailExpand");
13.        ev.DetailCollapse("detailCollapse");
14.    })
15.    .Columns(c =>
16.    {
17.        c.Bound(m => m.XXId);
18.        c.Bound(m => m.FirstName);
19.        c.Bound(m => m.Surname);
20.    })
21.    .ClientDetailTemplateId("xx-detail-template")
22.)
23. 
24.<script id="xx-detail-template" type="text/x-kendo-template">
25.    <div class="xx-detail-template">
26.        <div class="xx-detail-child-grid" style="width: 1140px">
27.            @(Html.Kendo().Grid<YYViewModel>()
28.                  .Name("ChildGrid_#=XXId#")
29.                  .Columns(c =>
30.                  {
31.                      c.Bound(m => m.Channel)
32.                          .Title("Channel")
33.                          .ClientFooterTemplate("Last refreshed: #=data.ImportedDate.max#")
34.                          .Width(140);
35.                      c.Bound(m => m.SentDate)
36.                          .Title("Sent")
37.                          .Format("{0:yyyy/MM/dd HH:mm}")
38.                          .Width(140);
39.                  })
40.                  .DataSource(ds => ds
41.                      .Ajax()
42.                      .Read(r => r.Action("XXChild_Read", "XX", new {attendeeId = "#=XXId#"}))
43.                      .Aggregates(a => a.Add(m => m.ImportedDate).Max())
44.                      .Sort(s => s.Add(m => m.SentDate).Descending()))
45.                  .ToClientTemplate()
46.                  )
47.        </div>
48.    </div>
49.</script>

 

A javascript error is being raised from line 33 of the above snippet: data.ImportedDate is undefined. Upon inspection I can see that data is referencing the datasource of the parent grid. How do I access the child grid's datasource in the client templates?

 

 

Stefan
Telerik team
 answered on 10 Nov 2017
1 answer
2.7K+ views
I am using kendo grid. i want to add textbox to multiple rows in kendo grid without clicking any edit button and i am using java spring mvc, so i am not using .net and i am attaching a screen shot here i want to do like this using kendo grid ui.
Konstantin Dikov
Telerik team
 answered on 10 Nov 2017
1 answer
136 views

I have trouble with kendo chart's setOptions method, which randomly inject data into my chart's series data array. 

I our app, we have a grid, on selecting a row in the grid, a chart is plotted below. However, we are finding the chart plotting random points where value should be null (see attached image). I find if I comment out calls to setOptions method, the problem disappears. Similarly, if I change kendo to an older version (2016.~) this problem goes away as well. 

Stefan
Telerik team
 answered on 10 Nov 2017
2 answers
336 views

I am trying to use KendoDataSource with datatype webapi.

Create request post DataSourceRequest and viewmodel to server but datasource request property not bind, viewmodel data passed
I can normally move the DataSourceRequest and viewmodel like this to the ajax call with type: "aspnetmvc-ajax" but when type:"webapi" not bind request property bind

Thanks a lot.

 

<a href="https://ibb.co/j5FT5w" rel="nofollow noreferrer">SS</a>

var dataSourceExperiences  = new kendo.data.DataSource({
            type: "webapi",              
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            page: 1,
            pageSize: 7,
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    id: "Id",
                    fields: {
                        CompanyName: { type: "string" },
                        Description: { type: "string" },
                        WorkTypeName: { type: "string" },
                        PositionHeldId: { type: "number" },
                        PositionHeldName: { type: "string" },
                        WorkTypeId: { type: "number" },
                        StartDate: { type: "date" },
                        EndDate: { type: "date" },
                        Explanation: { type: "string" },
                        CountryId: { type: "number" },
                        CountryName: { type: "string" },
                        CityId: { type: "number" },
                        CityName: { type: "string" },
                        EmployeeId: { type: "number" },
                    }
                }
            },
            transport: {
                read: {
                    url: baseApiUrl + 'api/Experience/ReadExperience',                   
                    type: "GET",
                    beforeSend: function (req) {
                        req.setRequestHeader("Authorization", "Bearer " + '@Model');
                    },
                },
                create: {
                    url: baseApiUrl + "api/Experience/CreateExperience",
                    type: "GET",                     
                    beforeSend: function (req) {
                        req.setRequestHeader("Authorization", "Bearer " + '@Model');
                    },
                }                   
            },
       });
 var dataGrid = $("#dataGrid").kendoGrid({
        dataSource: dataSourceExperiences,
        autoBind: false,
        sortable: true,
        scrollable: true,
        columns: [
            {
            field: "PositionHeldName",
            title:"PositionHeldName",
            filterable: true
            },
            {
                field: "CompanyName",
                title: "CompanyName"
            },
            {
                field: "WorkTypeName",
                title: "WorkTypeName"
            },
            {
                field: "CountryName",
                title: "CountryName"
            },
            {
                field: "CityName",
                title: "CityName"
            },
         ],
        selectable: "row"
    }).data("kendoGrid");
Konstantin Dikov
Telerik team
 answered on 10 Nov 2017
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?