Telerik Forums
Kendo UI for jQuery Forum
12 answers
642 views
In my mobile application I've added a textbox for a searchTerm and a button.  I want to use this to return a dataset for this query and display the results in the ListView.

My problem is that when I use the Kendo Datasource object, no parameters are sent with the request.

Here's is my javascript code:

var validator,
    productViewModel = kendo.observable({
        productDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/products/search",
                    dataType: "json",
                    data: {
                        filterBy: function () {
                            return "ProductName";
                        },
                        searchTerm: function(){
                            return $("#searchTerm").val();
                        },
                        shared: function () {
                            return false;
                        },
                        groupId: function () {
                            return null;
                        }
                    }
                },
                parameterMap: function (options, operation) {
                    return kendo.stringify(options);
                }
            },
            batch: false,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total"
            }
        }),
        selectedproduct: {},
        showDetails: function (e) {
            var product = productViewModel.productDataSource.get(e.context);
            productViewModel.set("selectedproduct", product);
            app.navigate("#product-details");
        }
    });
 
 
$("#search-button").click(function () {
    var searchTerm = $("#searchTerm").val();
    var $searchMsg = $("#search-message");
 
    if (searchTerm == "") {
        $searchMsg.html("You must enter a search value.");
        return;
    }
 
    productViewModel.productDataSource.read();
});
Here's what the request looks like in Firebug:

http://localhost:64060/api/products/search?{}
This is what it should look like:

http://localhost:64060/api/products/search?filterBy=ProductName&searchTerm=&shared=false&groupId=
Here's my HTML code:

<div data-role="view" id="products-listview" data-title="products" data-model="productViewModel" data-layout="databinding">
    <ul data-role="listview" data-style="inset">
        <li>
            Search For: <input id="searchTerm" class="km-text" />
        </li>
    </ul>
    <div id="search-message"></div>             
    <a class="km-button" data-role="button" id="search-button"><span class="km-text">Search</span></a
    <ul id="flat-products-listview" data-role="listview" data-style="inset" data-template="productsListviewTemplate" data-model="productViewModel">
    </ul>
</div>
 
<script type="text/x-kendo-template" id="productsListviewTemplate">
    <a href="\#product-details?id=#= Id #" class="km-listview-link">#= ProductName #</a>
</script>
Any thoughts?

BTW, json data is returned, but it's all the data, not the requested data, and I haven't figured out how to get the data to populate the ListView, so the ListView is blank.

Thanks,

King Wilder
Lito
Top achievements
Rank 1
 answered on 18 Jan 2013
1 answer
135 views
Hi, I have a pageable Kendo UI Grid which allows users to click a command button on a row and be redirected to a details page. I want the user to be able to return back to the Grid on the previously selected page and row. Current behavior takes the user back to the very first page forcing them to navigate back to the page they were on. I have a ticket in with Telerik and they are suggesting using cookies. Does anyone have a better solution or are cookies the best practice?
Brett
Top achievements
Rank 2
 answered on 18 Jan 2013
2 answers
387 views
Hi!
I am building a Master-Detail with KendoGrids.

My problem is that when I create a new record in the Detail Grid I want the DefaultValue of the ForeignKey column to be set with the value of the PrimaryKey of the Master Grid.

My Grids are the following:

Master
@(Html.Kendo().Grid<ModelApp.Models.Tickets>()
.Name("ticketgrid")
.Columns(columns =>
    {
 
        columns.Bound(p => p.TicketID).Title("ID").Width(100);
        columns.ForeignKey(p => p.CustomerID, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName").Title("Customer").Width(200) ;
        columns.ForeignKey(p => p.AreaOfBusinessID, (System.Collections.IEnumerable)ViewData["areaofbusinesses"], "AreaOfBusinessID", "AreaOfBusiness1").Title("AreaOfBusiness").Width(100);
        columns.Bound(p => p.OccurredOn).Title("Occured").Format("{0:yyyy-MM-dd}").Width(150);
        columns.ForeignKey(p => p.SeverityID, (System.Collections.IEnumerable)ViewData["severities"], "SeverityID", "Severity1").Title("Severity").Width(100);
        columns.ForeignKey(p => p.AssigneeID, (System.Collections.IEnumerable)ViewData["assignees"], "AssigneeID", "AssigneeName").Title("Assignee").Width(100);
        columns.ForeignKey(p => p.TicketStatusID, (System.Collections.IEnumerable)ViewData["ticketstatuses"], "TicketStatusID", "TicketStatus1").Title("Status").Width(100);
        columns.Bound(p => p.UserID).Title("User").Width(100);
        columns.Bound(p => p.DateRegistered).Title("Registered").Format("{0:yyyy-MM-dd}").Width(150);
})
    .ClientDetailTemplateId("ticketdetailTemplate")
.DataSource(dataSource =>
    dataSource
.Ajax()
    //.Filter(filter => filter.Add(e => e.CustomerID).IsEqualTo(CustomerID))
.Model
(model=>{
    model.Id(p => p.TicketID);
    model.Field(p=>p.TicketID).Editable(false);
    model.Field(p => p.CustomerID);
    model.Field(p => p.AreaOfBusinessID);
    model.Field(p => p.OccurredOn);
    model.Field(p => p.SeverityID);
    model.Field(p => p.AssigneeID);
    model.Field(p => p.TicketStatusID);
    model.Field(p => p.UserID);
    model.Field(p => p.DateRegistered).DefaultValue(DateTime.Now);
     
})
.Read(read => read.Action("Index","Ticket"))
.Create(create => create.Action("Create", "Ticket"))
.Update(update => update.Action("Edit", "Ticket"))
//.Destroy(destroy => destroy.Action("Delete", "Ticket"))       
        )
        .Pageable()
        .Navigatable()
        .Selectable()
        .Sortable()
        .Editable(editing => editing.Mode(GridEditMode.InCell))
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
         
 
 )
Detail (the column I want is in bold)
<script id="ticketdetailTemplate"  type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ModelApp.Models.TicketsDetails>()
            .Name("ticketdetailgrid")
            .Columns(columns =>
            {
                columns.Bound(o => o.TicketsDetailID).Title("ID").Width(100);
                columns.Bound(o => o.TicketID).Title("Ticket").Width(150); //
 
                columns.ForeignKey(o => o.CustomerContactID, (System.Collections.IEnumerable)ViewData["customercontacts"], "CustomerContactID", "CustomerContactName").Title("CustomerContact").Width(150) ;
                columns.ForeignKey(o => o.TicketsDetailsViaID, (System.Collections.IEnumerable)ViewData["ticketsdetailsvia"], "TicketsDetailsViaID", "TicketsDetailsVia1").Title("Via").Width(100) ;
 
                columns.Bound(o => o.TicketsDetailsDesciption).Title("Description").Width(300);
                columns.Bound(o => o.TicketsdetailsNotes).Title("Notes").Width(200);
                columns.Bound(o => o.UserID).Title("User").Width(100);
                columns.Bound(o => o.DateTimeStart).Format("{0:yyyy-MM-dd hh:mm}").Title("Start").Width(150);
                columns.Bound(o => o.DateTimeFinish).Format("{0:yyyy-MM-dd hh:mm}").Title("Finish").Width(150);
                columns.Bound(o => o.DateRegistered).Format("{0:yyyy-MM-dd hh:mm}").Title("Registered").Width(150);
                 
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model
                (model =>
                {
                    model.Id(q => q.TicketsDetailID);
                    model.Field(q => q.TicketsDetailID).Editable(false);

//I want the DefaultValue here
                    model.Field(q => q.TicketID); 

                    model.Field(q => q.CustomerContactID);
                    model.Field(q => q.TicketsDetailsDesciption);
                    model.Field(q => q.TicketsdetailsNotes);
                    model.Field(q => q.UserID);
                    model.Field(q => q.DateTimeStart).DefaultValue(DateTime.Now);
                    model.Field(q => q.DateTimeFinish).DefaultValue(DateTime.Now);
                    model.Field(q => q.DateRegistered).DefaultValue(DateTime.Now);
             
 
                })
                .Read(read => read.Action("TicketsDetailsRead", "Ticket", new { ticketID = "#=TicketID#" }))
                .Update(update => update.Action("TicketsDetailsEdit", "Ticket"))
                .Create(update => update.Action("TicketsDetailsCreate", "Ticket", new { ticketID = "#=TicketID#" }))
            )
            .Pageable()
            .Sortable()
            .Editable(editing => editing.Mode(GridEditMode.InCell))
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
                .ToClientTemplate()
    )
</script>
Thanx in advance
Spyros
Top achievements
Rank 1
 answered on 18 Jan 2013
0 answers
157 views
Ive just started using AutoComplete and Im having a few problems, basically nothing shows up when I start typing in the box, hopefully someone might be able to give me a few pointers.

in my controller (AccountController)  I have this method

[HttpGet]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public JsonResult GetCountries()
        {
            RegisterModel model = new RegisterModel();
            return Json(model.Countries, JsonRequestBehavior.AllowGet);
        }

in my model (AccountModel)  I have this property and method

public IEnumerable<EbsData.TimeZone> Countries { get {return GetCountries();} set{value = GetCountries();} }


/// <summary>
        /// get all the current countries from cache or repository
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EbsData.TimeZone> GetCountries()
        {
            Service.InMemoryCache cacheProvider = new Service.InMemoryCache();
            using (var context = new EbsData.EBSEntities())
            {
                var countries = cacheProvider.Get("countries", () => (from c in context.TimeZones select c).ToList());
                return countries;
            }

        }

and in my view, I have this markup


<li>
                @Html.LabelFor(m => m.Country)
                @Html.Kendo().AutoCompleteFor(m => m.Country).Name("countriesAutoComplete").Animation(true).IgnoreCase(true).DataTextField("Country").DataSource(source =>
                                                                                                                                                         {
                                                                                                                                                                source.Read(read =>
                                                                                                                                                                {
                                                                                                                                                                    read.Action("GetCountries", "AccountController").Data("onAdditionalData"); //Set the Action and Controller name
                                                                                                                                                                })
                                                                                                                                                                .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
                                                                                                                                                         })                                                                                                                                                     

            </li>


which creates this hmtl

<li>
<label for="Country">Country</label>
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style="">
<input id="countriesAutoComplete" class="k-input" type="text" name="countriesAutoComplete" data-val-required="The Country field is required." data-val="true" data-role="autocomplete" style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-owns="countriesAutoComplete_listbox" aria-autocomplete="list">
</span>
<script>
jQuery(function(){jQuery("#countriesAutoComplete").kendoAutoComplete({"dataSource":{"transport":{"read":{"url":"/AccountController/GetCountries","data":onAdditionalData}},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Country","ignoreCase":true});});
</script>
</li>


there is data available for the autocomplete to use, and the javascript function is there, but none of the server code is being executed.  Can anyone see where Im going wrong ?




mww
Top achievements
Rank 1
 asked on 18 Jan 2013
2 answers
209 views
Hi,
I'm  a newbie and trying to get a pair of cascading comboboxes to work from a grid custom editor popup.
The first combobox appears to work fine, but the second one does not appear to be getting the value of the selected item from the first combobox. Accordingly, the 2nd datasource is being called without a paramater

Here is my code. Thanks for assistance.


 
          $(document).ready(function() {
               var element = $("#qcgrid").kendoGrid({
                    dataSource: {
                          type: "json",transport: {
   
                                read: {url: "/backoffice/archiveitemlist"},
update: {url:  "/backoffice/qcupdate"},
destroy: {url: "/backoffice/qcdestroy"},

parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
}

                            },
                            pageSize: 6,
   batch: true,
                            schema: {
                                model: {
                                    id: "FileName",
                                    fields: {
                                        Description: {},
                                        catdescription: {},
                                        catsubdescription: {},
                                        StartDate: {},
                                        EndDate: {},
StartYear:{},
EndYear:{},
                                    }
                                }
                            }
                        },
                        height: 450,
                        //sortable: true,
                        //pageable: true,
                        detailTemplate: kendo.template($("#mytemplate").html()),
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
//    {
// field: "ArchiveItemId",
// title: "ArchiveItemId"                            
//    },
   {
field: "FileName",
   },
   
   {
field: "Description",  
   },
   {
field: 'catdescription',
title: "Category",
       editor: function(container, options) {
   // create first box of a KendoUI cascading combobox widget as column editor
    $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
placeholder: "Select category...",
dataTextField: "Category",
dataValueField: "CategoryId",
dataSource: {
   type: "JSON",
   serverFiltering: true,
   transport: {
   read: "/backoffice/categories.json"
   }
}
});
   
   }
   },
                                    {
field: 'catsubdescription',
title: "SubCategory",
editor: function(container, options) {
   // create second cascading combobox widget
    $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
autoBind: false,
cascadeFrom: "catdescription",
placeholder: "Select subcategory...",
dataTextField: "SubCategory",
dataValueField: "SubCategoryId",
dataSource: {
   type: "JSON",
   serverFiltering: true,
   transport: {
   read: "/backoffice/subcategories.json?filter[filters][0][value]="      //No value is being appended here
   }
}

}).data("kendoComboBox");
}
   },
Peter
Top achievements
Rank 1
 answered on 18 Jan 2013
1 answer
372 views
I recently had cause to configure a kendo mobile listview with a headerTemplate for grouped data. The reason was that I wanted to group by one field but use another for the displayed label since the former had the correct sort order. The template looked like this:
<script type="text/x-kendo-templ" id="header-template">
${data.items[0].section}
</script>

Where 'section' was a defined field in my data source.

When I try the same approach with a kendo web grid then an error 'undefined' is thrown. I've googled and checked the docs and apart from references to 'value', 'max', 'sum' I can't seem to find anything that clarifies what is available to the template at this point. Ideally I want to make the same type of reference as works for the mobile listview.

Thanks,

Mark.

Alexander Valchev
Telerik team
 answered on 18 Jan 2013
5 answers
113 views
Hello,
We're currently evaluating Kendo UI and we've jumped on a strange issue. When using fields with dropdown widgets, the grid sends a not serialized JavasSript object, which basically the string "[object Object]". I've tried to serialize this data by myself, using `parameterMap(options)`, but even there the values were already two "[object Object]" string. Checkout the screenshot I've attached.
 
I've created a static example in order to present you the issue more easily. This my data store:
kendo.django_stores = {};
kendo.django_stores.RoomTypeDataStore = new kendo.data.DataSource({
  "sort": [],
  "serverPaging": false,
  "serverFiltering": false,
  "serverSorting": false,
  "pageSize": null,
  "transport": {
    "read": {
  "dataType": "json",
  "type": "GET"
    },
  "destroy": {
  "dataType": "json",
  "type": "POST"
  },
  "create": {
  "dataType": "json",
  "type": "POST"
  },
  "update": {
    "dataType": "json",
    "type": "POST"
  }
  },
  "schema": {
    "type": "json",
    "model": {
      "fields": {
        "capacity": {
          "nullable": false,
          "defaultValue": 0,
          "editable": true,
          "values": [],
          "validation": {
            "required": true
          },
          "type": "number"
        },
        "name": {
          "nullable": false,
          "defaultValue": null,
          "editable": true,
          "values": [
          {
            "text": "Single room",
            "value": "single"
          },
          {
            "text": "Double room",
            "value": "double"
          }
          ],
            "validation": {
              "required": true
            },
            "type": "string"
        },
        "hotel": {
          "nullable": false,
          "defaultValue": null,
          "editable": true,
          "values": [],
          "validation": {
            "required": true
          },
          "type": "string"
        },
        "pk": {
          "editable": false,
          "nullable": true
        },
        "breakfast": {
          "nullable": false,
          "defaultValue": null,
          "editable": true,
          "values": [
          {
            "text": "With breakfast",
            "value": "breakfast"
          },
          {
            "text": "With continential breakfast",
            "value": "continential"
          },
          {
            "text": "With buffet breakfast",
            "value": "buffet"
          },
          {
            "text": "With English breakfast",
            "value": "English"
          },
          {
            "text": "Without breakfast",
            "value": "without"
          }
          ],
            "validation": {
              "required": true
            },
            "type": "string"
        },
        "id": {
          "nullable": false,
          "defaultValue": null,
          "editable": true,
          "values": [],
          "validation": {
            "required": false
          },
          "type": "string"
        }
      },
      "id": "pk"
    },
    "total": "total",
    "data": "results"
  }
});
I initialize the grid in an empty div
<div id="rooms_grid"></div>
$(document).ready(function() {
  var RoomTypeDataStore = kendo.django_stores.RoomTypeDataStore;
  var fields = RoomTypeDataStore.options.schema.model.fields;
 
  $('#rooms_grid').kendoGrid({
    dataSource: RoomTypeDataStore,
    height: 800,
    sortable: true,
    scrollable: true,
    editable: 'popup',
    destroyable: true,
    toolbar: ["create"],
    columns: [
      {field: "name", title: "Name", values: fields.name.values},
      {field: "capacity", title: "Capacity", format: "{0:n0}"},
      {field: "breakfast", title: "Breakfast", values: fields.breakfast.values},
      {command: ["edit", "destroy"]}
    ]
  });
});
I use jQuery 1.8.3, the latest version of KendoUI Web and this is how the external resources are loaded.:
<link href="./static/styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="./static/styles/kendo.default.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./static/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/js/kendo.web.min.js" charset="utf-8"></script>
Cheers,
Kiril Vladimirov
Brett
Top achievements
Rank 2
 answered on 18 Jan 2013
1 answer
189 views
Hi, I have tried my best but could not resolve one issue. I am using kendo grid in mobile application. Because project requirements are to use grid as starting point (let say list of people with their demographic info) then click on grid row or button to navigate to the details. I am using button and in its click event I want to navigate to kendo mobile view.

   function buttonClick(e) {
                    $('a').prop('href', '#tabstripprofile');
                                        
                    }
tabstripprofile is the id for the view. That code does work in Chrome or Firefox and also works with Windows emulator. But it does not work for android emulator or android device. I have tested an alert by adding in the code and the click event is being called and each time the popup generates twice, but the navigation part does not work. However if I keep pressing the button then it navigates at random times but not every time. Please help. 
Alexander Valchev
Telerik team
 answered on 18 Jan 2013
1 answer
209 views
I am trying to bind the view() function on the DataSource to a select element then apply a filter to restrict the results however it is not working.

My expected result in the demo is that by changing the Package to "Application" the Module values would change.
http://jsfiddle.net/v6PBz/3/

Thanks, Justin
Alexander Valchev
Telerik team
 answered on 18 Jan 2013
2 answers
427 views
I'm new to Kendo UI and struggling to get menus declared using "straight" HTML to work.  However I can get the menus to work if I use code like the following in an MVC view:

   @(Html.Kendo().Menu()
          .Name("Menu")
          .Items(items =>
          {
              items.Add()
                .Text("Menu Option 1")
                .Items(children =>
                    {
                        children.Add().Text("Submenu 1-1")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-1 Option 1");
                                        innerChildren.Add().Text("Submenu 1-1 Option 2");
                                        innerChildren.Add().Text("Submenu 1-1 Option 3");
                                    });

                        children.Add().Text("Submenu 1-2")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-2 Option 1");
                                        innerChildren.Add().Text("Submenu 1-2 Option 2");
                                    });
                        children.Add().Text("Submenu 1-3")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-3 Option 1");
                                        innerChildren.Add().Text("Submenu 1-3 Option 2");
                                    });
                    });
              items.Add()
                .Text("Menu Option 2")
                .Items(children =>
                {
                    children.Add().Text("Submenu 2-1")
                            .Items(innerChildren =>


I'd like to individually style each top level button ("Menu Option 1" and "Menu Option 2") to have a different colour, but cannot see a way to add a CSS style tag to the individual Item (I was hoping for a property similar to "Text" called "Id" or "CssClassId").

In the code example above how could I style "Menu Option 1" to be green, and "Menu Option 2" to be red?
Ian
Top achievements
Rank 1
 answered on 18 Jan 2013
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
Drag and Drop
Map
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
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?