or
7 answers
1.9K+ views
Well like everyone, I'm trying to get my window to open in the center the first time it's loaded.
Initially, I was completely confused as to why the window wasn't opening int he center since I had copied the code exactly.
So, what I realized is happening is that the window loads in the center while it's waiting for the content to load via ajax. Once it loads via ajax, it doesn't move the window to the center, it expands from the top left corner to fit the content of the page that it's loading.
Now what we've done( and the reason we aren't using a fixed height/width) is that we have have one function we add to the click so that we can load all kinds of different content in there and we don't have to worry about the window looking lost in a big open div or having scrolling content.
So, my question, is there any way to get the window to load AFTER the content loads. Or is there some other way tot get it to center itself again after the content loads? This isn't a huge deal, but it's something we'd definitely like to fix.
I've attached some screen shots for you to see what is happening.
Thanks in advance for any help.
Initially, I was completely confused as to why the window wasn't opening int he center since I had copied the code exactly.
function ShowKendoWindow(link) { var title = link.getAttribute("WindowCaption"); var url = link.getAttribute("WindowURL"); var win = $(".modal-window"); if (!win.data("kendoWindow")) { // window not yet initialized win.kendoWindow({ animation: { open: { effects: { fadeIn: {} }, duration: 200, show: true }, close: { effects: { fadeOut: {} }, duration: 200, hide: true } }, content: url, title: title, draggable: true, modal: true, resizable: false, }).data("kendoWindow").center().open(); } else { // reopening window win.data("kendoWindow") .refresh(url) // request the URL via AJAX .title(title) .center().open() // open the window; } event.preventDefault(); } So, what I realized is happening is that the window loads in the center while it's waiting for the content to load via ajax. Once it loads via ajax, it doesn't move the window to the center, it expands from the top left corner to fit the content of the page that it's loading.
Now what we've done( and the reason we aren't using a fixed height/width) is that we have have one function we add to the click so that we can load all kinds of different content in there and we don't have to worry about the window looking lost in a big open div or having scrolling content.
So, my question, is there any way to get the window to load AFTER the content loads. Or is there some other way tot get it to center itself again after the content loads? This isn't a huge deal, but it's something we'd definitely like to fix.
I've attached some screen shots for you to see what is happening.
Thanks in advance for any help.
6 answers
234 views
When using widget initialization with "data-attributes", can you set min/max date/time for the date/time pickers?
I've tried using "data-min" for both the date and time pickers, but Kendo doesn't like it.
http://jsfiddle.net/q3FPV/3/
Thanks.
I've tried using "data-min" for both the date and time pickers, but Kendo doesn't like it.
http://jsfiddle.net/q3FPV/3/
Thanks.
Todd
Top achievements
Rank 1
Rank 1
answered
on
14 Sep 2012
0 answers
146 views
Hi,
We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.
We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.
Who can help us?
Regards
Paul Sinnema
Here's the manually coded view that we use:
And the DataSource we generate:
And finally the controller we generate:
We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.
We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.
Who can help us?
Regards
Paul Sinnema
Here's the manually coded view that we use:
<script src="@Url.Content("~/DataSources/ProjectOnderhoudDataSource.generated.js")" type="text/javascript"></script><div id="projectEditForm"> <input id="DatumAanvang" data-bind="value: selectedProject.DatumAanvang" /> <hr /> <div id="projectRegelGrid" class="k-content"/> <script type="text/javascript"> $(function () { $("#DatumAanvang").width(220).kendoDatePicker(); ProjectOnderhoudDataSource.bind("change", function (data) { ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]); // not nice yet }); ProjectOnderhoudDataSource.read(); kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel); ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1; $("#projectRegelGrid").kendoGrid ({ dataSource: ProjectOnderhoudProjectRegelListDataSource, navigatable: true, // deletable: true, pageable: true, // sortable: true, height: 400, toolbar: ["create", "save", "cancel"], columns: [ { field: "Aantal", title: "Aantal" }, { field: "Prijs", title: "Prijs", format: "{0:c}" }, { field: "BTW", title: "BTW", format: "{0:c}" }, { field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' }, { field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" }, { command: ["destroy"], title: " ", width: "110px" } ], editable: true }); }); </script></div>And the DataSource we generate:
var ProjectOnderhoudDataSource = new kendo.data.DataSource({ transport: { read: { url: "../ProjectOnderhoud/Get" }, update: { url: function(item) { return "../ProjectOnderhoud/Update/" + item.Id; }, type: "POST" }, destroy: { url: function(item) { return "../ProjectOnderhoud/Delete/" + item.Id; }, type: "DELETE" }, create: { url: "../ProjectOnderhoud/Create", type: "POST" }, parameterMap: function (data, operation) { if(operation === "update") { var date; date = new Date(data.DatumAanvang); data.DatumAanvang = kendo.toString(new Date(data.DatumAanvang), "dd-MM-yyyy HH:mm:ss"); date = new Date(data.DatumFaktuur); data.DatumFaktuur = kendo.toString(new Date(data.DatumFaktuur), "dd-MM-yyyy HH:mm:ss"); date = new Date(data.CreatedOn); data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss"); date = new Date(data.ChangedOn); data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss"); } return data; } }, schema: { model: { id: "Id", fields: { DatumAanvang: { type: "date", validation: { required : true } }, DatumFaktuur: { type: "date", validation: { required : true } }, Name: { type: "string", validation: { required : true } }, Id: { type: "int", validation: { required : true } }, CreatedOn: { type: "date", validation: { required : true } }, CreatedBy: { type: "int", validation: { required : true } }, ChangedOn: { type: "date", validation: { required : true } }, ChangedBy: { type: "int", validation: { required : true } } } } }});var ProjectOnderhoudViewModel = new kendo.observable({ projectSource: ProjectOnderhoudDataSource, selectedProjectOnderhoud: null});var ProjectOnderhoudProjectRegelListDataSource = new kendo.data.DataSource({ transport: { read: { url: function() { var parentId = ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId; return "../ProjectOnderhoud/GetProjectRegelList/" + parentId; }, parentId: null }, update: { url: function(item) { if(item != null && item.Id != undefined) { return "../ProjectRegel/Update/" + item.Id; } return "../ProjectRegel/Update/-1"; }, type: "POST" }, destroy: { url: function(item) { return "../ProjectRegel/Delete/" + item.Id; }, type: "DELETE" }, create: { url: "../ProjectRegel/Create", type: "POST" }, parameterMap: function (data, operation) { if(operation === "update") { var date; date = new Date(data.CreatedOn); data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss"); date = new Date(data.ChangedOn); data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss"); } return data; } }, batch: true, pageSize: 15, schema: { model: { id: "Id", fields: { Aantal: { type: "int", validation: { required : true }, editable: true }, Prijs: { type: "float", validation: { required : true }, editable: true }, BTW: { type: "float", validation: { required : true }, editable: true }, Id: { type: "int", validation: { required : true }, editable: true }, CreatedOn: { type: "date", validation: { required : true }, editable: true }, CreatedBy: { type: "int", validation: { required : true }, editable: true }, ChangedOn: { type: "date", validation: { required : true }, editable: true }, ChangedBy: { type: "int", validation: { required : true }, editable: true } } } }});And finally the controller we generate:
using System;using System.Collections.Generic;using System.Collections.ObjectModel;using System.Net.Http.Formatting;using System.Net.Http;using MVC3DOViewmodel;using System.Web;using System.Web.Mvc;using Xtensive.Orm;using Xtensive.Orm.Web;using System.Net;namespace MVC3DOApp.Controllers{ public partial class ProjectOnderhoudController : MainController { public ActionResult Index() { return this.View(); } public object Get() // List<PCProjectOnderhoud> { if(HasId) { return Json(VMProjectOnderhoud.GetById(this, Id), JsonRequestBehavior.AllowGet); } else { return Json(VMProjectOnderhoud.AllVMProjectOnderhoudList(this), JsonRequestBehavior.AllowGet); } } public HttpResponseMessage Update(int id) { HttpResponseMessage response = new HttpResponseMessage(); if (id == -1) // Batch update { response.StatusCode = HttpStatusCode.OK; } else { using (var entity = VMProjectOnderhoud.GetById(this, Id)) { entity.DatumAanvang = Convert.ToDateTime(Request["DatumAanvang"]); entity.DatumFaktuur = Convert.ToDateTime(Request["DatumFaktuur"]); entity.Name = Request["Name"]; entity.CreatedOn = Convert.ToDateTime(Request["CreatedOn"]); entity.CreatedBy = Convert.ToInt32(Request["CreatedBy"]); entity.ChangedOn = Convert.ToDateTime(Request["ChangedOn"]); entity.ChangedBy = Convert.ToInt32(Request["ChangedBy"]); SaveChanges(); response.StatusCode = HttpStatusCode.OK; } } return response; } public object Delete(int id) { HttpResponseMessage response = new HttpResponseMessage(); using(var entity = VMProjectOnderhoud.GetById(this, Id)) { entity.Delete(); SaveChanges(); response.StatusCode = HttpStatusCode.OK; } return response; } public object Create() { return null; } public object GetProjectRegelList (int id) { VMProjectOnderhoud entity = VMProjectOnderhoud.GetById(this, id); entity.LoadProjectRegelList(); return Json(entity.ProjectRegelList, JsonRequestBehavior.AllowGet); } }}
Paul
Top achievements
Rank 1
Rank 1
asked
on
14 Sep 2012
1 answer
467 views
How can I make it so that when I click on "Add New Item" it will open up a file browser and allow the user to select file/files that they want to upload. Then when the user clicks "ok" it will async upload those files and adds it into the Grid as new row(s) for each new item(s).
Thanks.
Thanks.
Iliana Dyankova
Telerik team
answered
on
14 Sep 2012
8 answers
286 views
Are there any known PhoneGap + Kendo Mobile applications available for download from the App/Play Stores? I am evaluating Kendo as a framework for building web-based native applications, and would love to be able to try out some real-world examples.
Thanks,
Jason
Thanks,
Jason
moegal
Top achievements
Rank 1
Rank 1
answered
on
14 Sep 2012
1 answer
1.4K+ views
How would one go about cancelling the change event?
I need to check a variable when the change event is fired and depending upon the variable value:
I need to check a variable when the change event is fired and depending upon the variable value:
- prevent the change event from bubbling/cancel the event
- maintain the selected state of any rows that were selected prior to the change event firing
Any help would be appreciated.
Vladimir Iliev
Telerik team
answered
on
14 Sep 2012
1 answer
144 views
I'm trying to display large number of items using ListView (web). Solid view looks not good so I need to have striped list.
Below script is not working
$("li:odd").css("background-color", "#202020");
How I can make ListView striped?
Below script is not working
$("li:odd").css("background-color", "#202020");
How I can make ListView striped?
0 answers
158 views
json: 1.jpg
i want grid view is :2.jpg
when i select the cell,i want to get the dataitem like 1.jpg.
how to do?
thx!
i want grid view is :2.jpg
when i select the cell,i want to get the dataitem like 1.jpg.
how to do?
thx!
2 answers
1.5K+ views
Hello,
I am new to Kendo UI and want to start to create my 1st pie chart.
But If I run my webpage, I get following error from firebug:
$('#chart').kendoChart is not a function
This is what I include in the header:
Do I miss a file to include?
What I thought is that I had to include kendo.dataviz.min.js, but this file does not come with the kendo package.
The files I have inside my kendo/js folder are attached as image.
Thank you for any help!
I am new to Kendo UI and want to start to create my 1st pie chart.
But If I run my webpage, I get following error from firebug:
$('#chart').kendoChart is not a function
This is what I include in the header:
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/css/kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="/css/kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="/kendo/js/jquery.min.js" type="text/javascript"></script> <script src="/kendo/js/kendo.web.min.js" type="text/javascript"></script> </head>Do I miss a file to include?
What I thought is that I had to include kendo.dataviz.min.js, but this file does not come with the kendo package.
The files I have inside my kendo/js folder are attached as image.
Thank you for any help!
2 answers
134 views
I'm trying to create a feature which will auto-filter a grid using an input field in the toolbar. The source can be found at http://jsbin.com/odudud/8.
I have 2 questions:
I have 2 questions:
- Each time I apply my manually-created filter, I get "Property '_parse' of object [object Object] is not a function
". Can you explain what I might be doing wrong to get this? - Is there a way to filter a Number field so that I can search its contents (i.e., using 'contains' with a Number field)?
Thanks!
Darren
Top achievements
Rank 1
Rank 1
answered
on
14 Sep 2012
