Telerik Forums
Kendo UI for jQuery Forum
1 answer
87 views
Is there any sample that shows how we can disable calendar dates that falls outside certain date range(Min-Max) with X marker or grayed out as shown in attachment?
Iliana Dyankova
Telerik team
 answered on 10 May 2013
1 answer
228 views
Hi,

I have a Kendo grid and am using MVVM binding, I have CRUD operations defined. Everything works fine with out exception I never get a confirmation message when deleting a row.

I have the Grid editable property set to:
editable: { "mode": "popup" }

If I change this to:
editable: "popup"

Then I successfully get the delete confirmation message.

However I need to retain the first method as I want to use a template like below:
editable: { "mode": "popup", "template": $("#popup_editor").html() },

Any ideas why the confirmation message doesn't appear.  Also If I do the following
editable: { "mode": "popup", confirmation: "Are you sure" }

Then it functions correctly.  I'd prefer not to have to do this for localisation reasons.

Thanks,
Keith
Alexander Valchev
Telerik team
 answered on 10 May 2013
1 answer
118 views
In order to flatten my data and avoid circular references, I created a view model for an object generated by OpenAccess ORM. I noticed something interesting, though. When binding the grid to my new view model (Html.Kendo().Grid<ViewModel>()...), my DateTime fields get converted into JSON dates when the grid is rendered (e.g. /Date(1362974400000)/). However, when I bind the grid to the original model (Html.Kendo().Grid<OpenAccessModel>()...), the dates come out as expected (e.g. Mon Mar 11 2013 00:00:00 GMT-0400 (Eastern Daylight Time)).

I've manipulated the code so that I've isolated the binding as the only difference. There's something different about the two classes that is causing a difference in rendering of the date field (even though that field is a DateTime field for both classes). Any idea why this is happening and if there's a simple way to fix this? Perhaps a bit of metadata attached to the field through OpenAccess that I should include in the view model?

Thanks!
Daniel
Telerik team
 answered on 10 May 2013
1 answer
1.2K+ views
I am having a problem with Kendo UI Grid. I am able to read data from the server. But when I update, create or delete a row in the grid, it is redirecting only to “Create”. Below is my code in jQuery/JS and ASP.NET :
 
.CSHTML CODE

$("#employeesGrid").kendoGrid({
        toolbar: ["create"],
        // dataSource: myDataSource2,
        dataSource: new kendo.data.DataSource({
            transport: {
                read: { url: "@Url.Action("GetEmployeesList","Employee")" },
                update: {url: "@Url.Action("UpdateEmployee", "Employee")" },
                destroy: { url: "@Url.Action("DeleteEmployee", "Employee")" },
                create: {url: "@Url.Action("CreateEmployee", "Employee")" }            
            },
            schema: {
                model: {
                    fields: {
                        FirstName: { editable: false},
                        DOB: { type: "date"},
                        Created: {type: "date" },
                        Updated: {type: "date" },
                    }
                }
            },
            pageSize : 3,
            serverPaging : true
        }),
        columns: [
            { field: "FirstName", title: "First Name" },
            { field: "LastName", title: "Last Name"},
            { field: "DOB", title: "Date of Birth", format: "{0:dd/MM/yyyy}" },
            { 
                field: "Role", title: "Role", values: [
                            { text: "Software Engineer", value: "Software Engineer"},
                            { text: "Team Lead", value: "Team Lead"},
                            { text: "Project Manager", value: "Project Manager"},
                            { text: "Technical Architect", value: "Technical Architect"},
                            { text: "Other", value: "Other"}
                ] 
            },
            { field: "Enabled", title: "Enabled" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }
        ],
        filterable: true,
        sortable: true,
        pageable: true,
        editable: "popup"
    });
});

 
ASP.NET Controller Code :
[HttpGet]
public JsonResult GetEmployeesList(int take, int skip, int page, int pageSize)
{
var em = (from e in es.Find()
                     select e.ToModel()).Skip(skip).Take(take).ToList();
return Json(em, JsonRequestBehavior.AllowGet);
}
 
public JsonResult UpdateEmployee(EmployeeModel empModel)
{

}
 
public JsonResult CreateEmployee(EmployeeModel empModel)
{

}
 
public JsonResult DeleteEmployee(EmployeeModel empModel)
{

}
 
I placed breakpoints, the kendo ui grid code only goes to CreateEmployee method for create, update and delete operations. 
Alexander Valchev
Telerik team
 answered on 10 May 2013
1 answer
536 views
i'm trying to bind a grid with hireachical data from server
i read the by  entityframework and the output on the client is the follow:
{"GetDocumentsResult":[{"AnnoEsercizio":2013,"BatchID":636614,"CustomerDocumentTypeID":401,"Data":"\/Date(1366236000000+0200)\/","FileExtension":".jpg","FollowUp":{"Fk_ID_ressol":11,"FollowUp1":"\/Date(1367877600000+0200)\/","FollowUp2":null,"FollowUp3":null,"Id":4,"Note":null},"Frequenza":"MENSILE","Id":4,"Nota":null,"ObjectID":"1","PathBuildingRuleID":9,"Piva":"xdfdff","RagioneSociale":"Kellner","RepositoryRegistrationDate":"\/Date(1358463600000+0100)\/","Stato":"OK"},{"AnnoEsercizio":2013,"BatchID":636614,"CustomerDocumentTypeID":401,"Data":"\/Date(1361142000000+0100)\/","FileExtension":".jpg","FollowUp":null,"Frequenza":"MENSILE","Id":5,"Nota":null,"ObjectID":"2","PathBuildingRuleID":9,"Piva":"xdfdff","RagioneSociale":"Kellner","RepositoryRegistrationDate":"\/Date(1366236000000+0200)\/","Stato":"OK"},{"AnnoEsercizio":2013,"BatchID":636614,"CustomerDocumentTypeID":401,"Data":"\/Date(1363561200000+0100)\/","FileExtension":".jpg","FollowUp":null,"Frequenza":"MENSILE","Id":6,"Nota":null,"ObjectID":"3","PathBuildingRuleID":9,"Piva":"xdfdff","RagioneSociale":"Kellner","RepositoryRegistrationDate":"\/Date(1366236000000+0200)\/","Stato":"OK"},{"AnnoEsercizio":2013,"BatchID":636614,"CustomerDocumentTypeID":401,"Data":"\/Date(1366236000000+0200)\/","FileExtension":".jpg","FollowUp":null,"Frequenza":"MENSILE","Id":7,"Nota":null,"ObjectID":"4","PathBuildingRuleID":9,"Piva":"xdfdff","RagioneSociale":"Kellner","RepositoryRegistrationDate":"\/Date(1366236000000+0200)\/","Stato":"DA VERIFICARE"},{"AnnoEsercizio":2013,"BatchID":636614,"CustomerDocumentTypeID":401,"Data":"\/Date(1357081200000+0100)\/","FileExtension":".jpg","FollowUp":null,"Frequenza":"TRIMESTRALE","Id":11,"Nota":null,"ObjectID":"6","PathBuildingRuleID":9,"Piva":"12345678901","RagioneSociale":"Alessio","RepositoryRegistrationDate":"\/Date(1366236000000+0200)\/","Stato":"OK"}]}



there is a child collection (named "FollowUp" and has got an only one row) in this json output
the field "FollowUp" contains several properties:   FollowUp":{"Fk_ID_ressol":11,"FollowUp1":"\/Date(1367877600000+0200)\/","FollowUp2":null,"FollowUp3":null,"Id":4,"Note":null}

in my javascript i've tried to do the following:

---hirearchicaldatasource-----
Master._resSolDataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                beforeSend: function (xhr, s) {
                    s.data = JSON.stringify(Master._filter);
                },
                type: "POST",
                url: _rootUrl + 'wcf/ResponsabilitaSolidaleService.svc/getdocuments',
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }
        },
        schema: {
            data: "GetDocumentsResult",
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number" },
                    Piva: { type: "string" },
                    RagioneSociale: { type: "string" },
                    Data: { type: "date" },
                    AnnoEsercizio: { type: "number" },
                    Frequenza: { type: "string" },
                    Stato: { type: "string" }
                },
                children: "FollowUp"
            }
        },
        group: { field: "RagioneSociale", dir: "asc" }
 
    });
 
------and in the grid-----
 
$("#adminGrid").kendoGrid({
        ........,
    ...other code....,
    .....,
        columns: [{
            field: "Id",
            hidden: true  
        }, {
            field: "Piva",
            title: "Partiva IVA"
        }, {
            field: "RagioneSociale",
            title: "Ragione Sociale"
        }, {
            field: "Data",
            format: "{0:dd/MM/yyyy}"
        }, {
            field: "AnnoEsercizio",
            title: "Anno esercizio"
        }, {
            field: "Frequenza"
        }, {
            field: "Stato"
        }, {
            command: [
                {
                    name: "download",
                    click: Master.download
                },
                {
                    name: "followup",
                    click: Master.followup
                }
            ],
            title: " "
        }, {
            field: "FollowUp[0].FollowUp1",       //<--FollowUp seems to be null
            title: "fu1 child"
        }]
 
    });



give exception here because the parameter "data.FollowUp.FollowUp1" doesn't exist because data.FollowUp is null

(code generated by visuatudio debugger from kendo.web.min.js)
function anonymous(data) {
var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(data.uid)+'" role=\'row\'><td class="k-group-cell"> </td><td style="display:none" role=\'gridcell\'>'+e(data.Id==null?'':data.Id)+'</td><td  role=\'gridcell\'>'+e(data.Piva==null?'':data.Piva)+'</td><td  role=\'gridcell\'>'+e(data.RagioneSociale==null?'':data.RagioneSociale)+'</td><td  role=\'gridcell\'>'+e(kendo.format("{0:dd/MM/yyyy}",data.Data==null?'':data.Data))+'</td><td  role=\'gridcell\'>'+e(data.AnnoEsercizio==null?'':data.AnnoEsercizio)+'</td><td  role=\'gridcell\'>'+e(data.Frequenza==null?'':data.Frequenza)+'</td><td  role=\'gridcell\'>'+e(data.Stato==null?'':data.Stato)+'</td><td  role=\'gridcell\'><a class="k-button k-button-icontext k-grid-download"  href="#"><span class=" "></span>download</a><a class="k-button k-button-icontext k-grid-followup"  href="#"><span class=" "></span>followup</a></td><td  role=\'gridcell\'>'+e(data.FollowUp.FollowUp1==null?'':data.FollowUp.FollowUp1)+'</td></tr>';}return o;
}


it looks like that this datasource doesn't expose the property "FollowUp" at all!
could you help me to understand, please!
Alessio.
Alex Gyoshev
Telerik team
 answered on 10 May 2013
2 answers
183 views
Hello,
I'm working on a sample form to understand how to work with KendoUI, Asp.net MVC3 and MySql database.
I have created the form as a View on Create action of the controller but I cant seem to get the model to store the data inputed into the form.
 I need to know how to link the Kendo control to my model.

Create.cshtml
@model MvcApplication_Movie.Models.movie_master
@{
    ViewBag.Title = "Create";
}
<h2>Add New Movie</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
                <h3>Movie Name:</h3>
                <input type="text" id="movie_name" class="k-textbox"/>
                
                 <br />

                <h3>Release Date:</h3>
                 @(Html.Kendo().DatePicker()
                              .Name("datepicker")
                              .HtmlAttributes(new { style = "width:150px" })
                  )

                <br />

               <h3>Movie Poster:</h3>
                @(Html.Kendo().Upload().Name("files"))

                 <br />

               <input type="submit" id="submit" onclick="ins_mod()" value="Add Movie" class="k-button" />
    </fieldset>
}

The controller method
[HttpPost]
        public ActionResult Create(movie_master movie_record)
        {
            
            try
            {
                // Insert Movie logic here
                using (var insert = new moviesEntities())
                {
                    insert.movie_master.Add(movie_record);
                    insert.SaveChanges();
                }
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Please help me asap. Thank you
Daniel
Telerik team
 answered on 10 May 2013
9 answers
170 views
Hello,
I have a problem with the method stopEndlessScrolling, what happens is that initially I load my data well (image1). when I go down scroller, it still works well because I have yet to send me the data server (image2). When the server has no more data to send me what I do is stop the scroller with stopEndlessScrolling method after that the scroll is lost and fails to display the data (image3). Additionally, it is assumed that the endless scrolling a request each time scroll down the page by changing the number, but I can see that after there is no more data to bring the server, makes many requests and I do not understand why. This is my code:

<div data-role="view"
    data-title="Art de inventario"
    data-layout="layout_inventory"
        data-init="filterableInventoryList"
         data-model="inventoryModel">
 
    <ul  id="inventoryList"
        data-role="listview"
    </ul>
</div>
 
<script id="inventoryTemplate" type="text/x-kendo-template">
      <div class="row">
            <img class="pullImage" src="#=Photo#"  />#= Name #
          <div class="metadata">
                <span class="sublink" >Código :  #=Code#</span>
          </div>
       </div>
</script>
function filterableInventoryList(e){
             var wid = $(window).width();
             var dataSource = new kendo.data.DataSource({
                    pageSize: 12,
                    serverPaging: true,
                    serverFiltering: true,
                    transport: {
                        read:{
                            url:  localStorage.getItem("url") + "GetInventoryItems",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        },
                        parameterMap: function(options) {
                            var b = selectMenuModel.get("branch");
                            var filter = options.filter ? options.filter.filters[0].value : "";
                            var parameters = {
                                url: JSON.stringify(localStorage.getItem("url")),
                                width : wid,
                                branchId : JSON.stringify(b.Branch_Id),
                                q: JSON.stringify(filter),
                                count: options.pageSize,
                                page: options.page
                            }
 
                            return parameters;
                        }
                    },
                    schema: { // describe the result format
                        data: "d", // the data which the data source will be bound to is in the "results" field
                        model : {  ...
                    },
                    change: function() {
                        //check whether any data is returned
                        if (!this.view()[0]) {
                              //disable endless scroll
                         $("#inventoryList").data("kendoMobileListView").stopEndlessScrolling();
                        }
                    }
                });
 
 
            $("#inventoryList").kendoMobileListView({
                dataSource: dataSource,
                template: $("#inventoryTemplate").text(),
                filterable: {
                    filterable: true,
                    placeholder: "Buscar Item..."
                },
                endlessScroll: true,
                scrollTreshold: 30 //treshold in pixels
            });
    }


Georgi Krustev
Telerik team
 answered on 10 May 2013
1 answer
139 views
I am attempting to create a login user interface using a combination of templates, SPA and MVVM tools. When the button is clicked, it should add the username and password to the account session (DataSource) and send a POST request to the URL specified. However, nothing happens when accountSession.sync() is executed. Have I missed something out?


Javascript Module:
define(['jquery', 'kendo', 'Helpers/TemplateLoader'], function ($, kendo, loader)
    {
 
        var viewModel = null;
        var accountSession = null;
 
        var init = function ()
        {
            //Create the View.
            loader.loadTemplate("login");
            var template = kendo.template($("#login").html())({});
            $("#adbrain").html(template);
 
            //Create the DataSource.
            accountSession = new kendo.data.DataSource(
                {
                    transport: {
                        read: {
                            url: "/accountSession"
                        },
 
                        create: {
                            url: "/accountSession",
                            type: "POST"
                        }
                    }
                }
            )
 
            //Create the ViewModel.
            viewModel = kendo.observable(
                {
                    username:
                    {
                        value: "",
                        enabled: true
                    },
                    password:
                    {
                        value: "",
                        enabled: true
                    },
                    button:
                    {
                        enabled: true
                    },
                    error: "",
                    doSubmit: function (event)
                    {
                        //Prevent the default action.
                        event.preventDefault();
 
                        //Clear the error.
                        this.set("error", "");
 
                        //Disable all controls.
                        this.set("username.enabled", false);
                        this.set("password.enabled", false);
                        this.set("button.enabled", false);
 
                        //Animate the Adbrain logo.
                        $("#login_loading_stable").addClass("hidden");
                        $("#login_loading").removeClass("hidden");
 
                        accountSession.add({UserName: this.username.value, Password: this.password.value});
                        accountSession.sync();
                    }
                }
            );
 
            //Bind View and ViewModel together.
            kendo.bind($("#login_form"), viewModel);
        }
 
        var doLogin = function ()
        {
            alert("login");
        }
 
        return {
            init: init,
            doLogin: doLogin
        }
    }
)
Corresponding HTML template (the code is loaded successfully into the SPA):
<script type="x-kendo-template" id="login" class="template">
    <form id="login_form"  data-bind="events: { submit: doSubmit }">
      <div class="group">
          <img id="login_loading_stable" src="../../Images/login-logo.png" />
          <img id="login_loading" class="hidden" src="../../Images/a-loader.gif" />
        <div class="entity">
          <div class="cell label">
            <label for="username_input">Username</label>
           </div>
          <div class="cell field">
            <input id="username_input" name="UserName" type="text" data-bind="enabled: username.enabled, value: username.value" />
          </div>
        </div>
        <div class="entity">
          <div class="cell label">
            <label for="password_input">Password</label>
           </div>
          <div class="cell field">
            <input id="password_input" name="Password" type="password" data-bind="enabled: password.enabled, value: password.value" />
          </div>
        </div>
        <input id="login_button" type="submit" data-bind="enabled: button.enabled" value="Login"/>
      </div>
        <p id="error_message" class="error" data-bind="text: error"></p>
    </form>
</script>
Atanas Korchev
Telerik team
 answered on 10 May 2013
3 answers
267 views
The frequency for internal builds is higher than in the past. I appreciate that. However, the release notes do not give exact information about what has changed in the most recent internal build. They only show the difference compared to the previous official release.

It would be good, if some additional info were given for each improvement. A short info like "build 509" would be sufficient.

Michael G. Schneider
Atanas Korchev
Telerik team
 answered on 10 May 2013
5 answers
175 views
Hi,

Building a MVVM mobile app using Icenium, I have two separate listviews.

I'd like to accomplish the following with only declarative code (data-...)
  1. for one of the listviews, I need to have the "data-filterable" option enabled, this is fine. What do I need to do next ? How can I specify the field to filter on ? In the doc I've seen "filterable.field", how can I transform that into declarative code ?
  2. the second listview is bound to an array of objects. I'd like to group the listview based on one property of the source objects. How can I achiev that with declarative code ?
Thanks for your help,

Gilles
Petyo
Telerik team
 answered on 10 May 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
Drag and Drop
Application
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?