Hello,
In some demos & examples I found this : "stringifyDates": true in the data source configuration,
but didn't find anything in the documentation about this. (looks like a secret settings option Telerik uses on their demos ;-)
is somebody has a documentation about this "stringifyDates": true ?
another thing on same subject, I try to use the parameterMap , to parse the model sent to the server,
and stringify the date in the model "SupplyDate": { "type": "date" }, but its never called!
please see example here.
var ds = new kendo.data.DataSource({ "type": (function () { if (kendo.data.transports['aspnetmvc-ajax']) { return 'aspnetmvc-ajax'; } else { throw new Error('The kendo.aspnetmvc.min.js script is not included.'); } })(), "transport": { "read": { "url": '/Controller/Products_Get', "data": function () { return { "OrderNumber": "0001" }; }, "complete": function (jqXHR, textStatus) { if (textStatus == "error") { var msg = "read event completed with error. invalid url or other javascript error"; console.log(msg); } else { var result = JSON.parse(jqXHR.responseText); console.log("jqXHR.responseText:\n" + jqXHR.responseText, '#ffffff', '#0011cc'); } } }, "update": { "//type": "POST", //"dataType": "json", //"contentType": "application/json", "url": '/Controller/Product_Upsert', "complete": function (jqXHR, textStatus) { Parse_UpsertOrDelete_Complete("update", jqXHR, textStatus); } }, "create": { //"type": "POST", //"dataType": "json", //"contentType": "application/json", "url": '/Controller/Product_Upsert', "complete": function (jqXHR, textStatus) { Parse_UpsertOrDelete_Complete("create", jqXHR, textStatus); } }, "destroy": { //"type": "POST", //"dataType": "json", //"contentType": "application/json", "url": '/Controller/Product_Delete', "complete": function (jqXHR, textStatus) { Parse_UpsertOrDelete_Complete("destroy", jqXHR, textStatus); } }, "stringifyDates": true, "prefix": "", "parameterMap": function (data, operation) { console.log("operation: " + operation + " data: " + JSON.stringify(data)); if (operation === "update" || operation === "create" || operation === "destroy") { return JSON.stringify({ entity: data }); } return data; } }, "pageSize": 1000, "page": 1, "total": 0, "serverPaging": true, "serverSorting": true, "serverFiltering": true, "serverGrouping": true, "serverAggregates": true, "filter": [], "error": function (jqXHR) { console.log("jqXHR.status =" + jqXHR.status); }, "schema": { "data": "Data", "total": "Total", "errors": "Errors", "model": { "id": "ProductionOrderNumber", "fields": { "OrderNumber": { "type": "number" }, "SupplyDate": { "type": "date" }, "CustomerName": { "type": "string" }, "Units": { "type": "number" } } } }});
function Parse_UpsertOrDelete_Complete(action, jqXHR, textStatus) {
// handle complete...
}
Controller
class ProductEntity { public int OrderNumber {get;set;} public DateTime SupplyDate {get;set;} public string CustomerName {get;set;} public int Units {get;set;}}[AcceptVerbs(HttpVerbs.Post)]public async Task<ActionResult> Product_Upsert([DataSourceRequest]DataSourceRequest request, ProductEntity entity){ ProductEntity product = entity; // product.SupplyDate not set correctly when not using // ( "stringifyDates": true in the DataSource ) }
Hi There,
I have a grid which has a row template. I am facing a problem in making the rows inline editable.
Reason why I need to use the row template ( as I dont know whether this can be achieved without a row template)
I have total 8 fields in my datasource, but
I need to show first two fields in First Column one below another, next two fields in second column just like in the first column and next two in 3 and so on so forth. See the following format
Action ACCT TEMPLATE
A1 OPT1 A: Acct1 SomeTemplate EDITBUTTON
B1 OPT2 B: Acct2
This is how the data would be displayed in one row.
In edit mode, I need to allow the user to edit the OPT(column without header) ACCT and TEMPLATE columns.
All these editable columns will display a Dropdownlist from which the user can select a value.
Can anyone help ?
Thank You,
Nilesh
Hi,
I am using the Grid with inline filter on column header. Users are getting confused as they dunno when the Grid is filtered.
My first thought is to show a message above the Grid with red font saying that Grid is filtered. However, I couldn't find an event on Grid to let me know when the Grid is filtered. is there such thing?
Thanks,
Bilal
//My main grid<div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>() .Name("grid") .Columns(columns => { columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ContractorType); columns.Bound(p => p.BHSISNum); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ContractorIsAlsoRegion); columns.Bound(p => p.ContractorName); columns.Bound(p => p.AddressBkNum); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable() .ClientDetailTemplateId("template") .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo")) ) .ToolBar(toolbar =>{ toolbar.Template(@<text> <div class="toolbar"> <button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button> </div> </text>);}) ) </div> </div></div> //my child grid <script id="template" type="text/kendo-tmpl"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>() .Name("grid_#=Id#") .Columns(columns => { columns.Bound(o => o.Id).Width(50); columns.Bound(o => o.ServiceId); columns.Bound(o => o.ServiceType); columns.Bound(o => o.AdultChild); columns.Bound(o => o.IFGSwitch); columns.Bound(o => o.CodeModifier); columns.Bound(o => o.ServiceModifier); columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}"); }) .ToolBar(toolbar =>{ toolbar.Template(@<text> <div class="toolbar"> <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button> </div> </text>);}) .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" })) ) .Pageable() .Sortable() .ToClientTemplate() )</script> //Main grid button click window @(Html.Kendo().Window() .Name("providerwindow") .Title("Add Business Units") .Content(@<text><div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>() .Name("grid1") .Columns(columns => { columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />"); columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ContractorType); columns.Bound(p => p.BHSISNum); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ContractorName); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .HtmlAttributes(new { style = "height:350px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo")) ) ) <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button> <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button> </div> </div> </div></text> ) .Draggable() .Resizable() .Width(800) .Visible(false) ) //Child grid button click kendo window @(Html.Kendo().Window() .Name("servicewindow") .Title("Add Business Units") .Content(@<text><div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>() .Name("grid1") .Columns(columns => { columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />"); columns.Bound(p => p.Id).Filterable(false).Width(50); columns.Bound(p => p.ServiceId); columns.Bound(p => p.ServiceType); columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.AdultChild); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .HtmlAttributes(new { style = "height:350px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" })) ) ) <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button> <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button> </div> </div> </div></text> ) .Draggable() .Resizable() .Width(800) .Visible(false) ) <script> function additionalInfo() { var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id)); return { Id: contractId } } $(document).ready(function(){ $("#providerskendowindow").click(function(){ alert("inside"); $("#providerwindow").data("kendoWindow").center().open(); }); $("#serviceskendowindow").click(function(){ alert("inside"); $("#servicewindow").data("kendoWindow").center().open(); }); }); $(".close-button").click(function(){ // call 'close' method on nearest kendoWindow $(this).closest("[data-role=window]").kendoWindow("close"); });</script>The issue we're running into is how the update method of the grid is called from the change event of a drop down when using a popup editor on the grid. For our data we're using cascaded drop downs (combobox) to edit category information inside the custom popup (editor). i.e. We have a category and an optional subcategory. What we're seeing is that when we change the value of the category drop down (or the subcategory drop down), the update method of the grid is being called. What we're expecting is that the update method will ONLY fire when we click on the Update button in the dialog.
Here's the grid setup:
@(Html.Kendo() .Grid<CategoryEditModel>() .Name("Categories") .Columns(columns => { columns.Bound(c => c.SKU); columns.Bound(c => c.DeptName); columns.Bound(c => c.Item); columns.Bound(c => c.Category); columns.Bound(c => c.Subcategory); columns.Command(command => command.Edit() .HtmlAttributes(new {@class = "btn btn-primary"})) .Width(95); }) .ToolBar(toolbar => { toolbar.Excel().HtmlAttributes(new { @class = "btn btn-info" }); toolbar.Pdf().HtmlAttributes(new { @class = "btn btn-info" }); }) .ColumnMenu() .ColumnResizeHandleWidth(2) .Editable(editable => editable.Mode(GridEditMode.PopUp)) .Pageable(pg => pg.Refresh(true) .PageSizes(true) .PageSizes(new[] { 25, 50, 100, 250, 500, 1000 })) .Navigatable() .Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); }) .Scrollable(s => s.Height("400px")) .Filterable() .Scrollable() .Groupable() .Events(e => { e.Edit("onCategoryEdit"); }) .DataSource(dataSource => dataSource.Ajax() .Batch(true) .PageSize(25) .Model(model => { model.Id(p => p.ItemId); model.Field(p => p.SKU).Editable(false); model.Field(p => p.DeptName).Editable(false); model.Field(p => p.Item).Editable(false); }) .Sort(s => { s.Add("SKU").Ascending(); }) .Read(read => read.Action("Categorizations_ReadItems", "Admin").Type(HttpVerbs.Get)) .Update(update => update.Action("Categorizations_UpdateItem", "Admin").Type(HttpVerbs.Post)) .Create(create => create.Action("Categorizations_CreateCategory", "Admin").Type(HttpVerbs.Post)) .AutoSync(true) ))The custom editor (snippet):
<div class="editor-field"> @(Html.Kendo() .ComboBoxFor(model => model.CategoryId) .DataTextField("Name") .DataValueField("Id") .DataSource(source => source.Read(read => read.Action("GetCategories", "Admin")) .ServerFiltering(true)) .AutoBind(true) .Events(e => { e.Change("onCategoryChange"); e.Cascade("onCategoryCascade"); }) )</div><div class="editor-field"> @(Html.Kendo() .ComboBoxFor(model => model.SubcategoryId) .DataTextField("Name") .DataValueField("Id") .DataSource(source => source.Read(read => read.Action("GetSubcategories", "Admin") .Data("onNeedCategoryValue")) .ServerFiltering(true)) .AutoBind(true) .CascadeFrom("CategoryId") .Events(e => { e.Change("onSubcategoryChange"); e.Cascade("onSubcategoryCascade"); }) )</div>Any suggestions on how to call the update only when clicking the Update button of the dialog? Or insure that the data posted via the change of the combo boxes pulls the current (UI) version of the data for posting back to the server?
When using Chrome (43.0.2357.124 m), and I'm editing content, I highlight some of the text, click on the down-arrow for either text or background color, and then select a color, and nothing happens. The text doesn't remain selected, and the color bar under the "A" doesn't change from black. I did this in Firefox, and didn't have a problem.
Is this a known issue?
I have not been able to find an example of displaying boolean fields as checkboxes in a Grid. The example on this page (http://demos.telerik.com/aspnet-mvc/grid/editing) works fine but I want the column to always display the checkboxes not just display them when you click in a cell. Is this possible using Razor syntax?
Hello
I want to change the start time (e.g. from 9:00 to 10:00) after the scheduler has been initialized.
Is destroying & re-creating the scheduler (http://www.telerik.com/forums/how-to-change-start-time-and-resources) still the best option?
Regards,
Pawel
Hello Telerik team
--------------- Problem ---------------
I'm using Kendo template to show a Grid. Data bind to this Grid retrieves from 3 tables, each table in Database map to a class in source.
I build my grid using Kendo template, and bind to div using Kendo.
html<div id="GridQuestion" data-bind="..."></div>
<script type="text/html" id="temp-grid"> <div data-bind="..."> .... grid structure </div></script>kendo.bind($('#GridQuestion'), questionViewModel);
Grid shows data as this: List groupQuestionSet, each groupQuestionSet contains many QuestionSet, each QuestionSet contains many Question.
This is Grid screen in browser:
This is Table Relationship.
This is storeprocedure, SQL query :
SELECT GroupQuestionSet.Id AS 'GroupQuestionSetId', GroupQuestionSet.GroupQuestionSetName, QuestionSet.Id AS 'QuestionSetId', QuestionSet.QuestionSetName, Question.Id as 'QuestionId', Question.QuestionContentFROM GroupQuestionSet INNER JOIN QuestionSet ON GroupQuestionSet.Id = QuestionSet.GroupQuestionSetId INNER JOIN Question on Question.QuestionSetId = QuestionSet.IdThis is JSON test data :
function initTestData() { //This is data from GroupQuestionSetTable in database var GroupQuestionSetTable = [ { "Id": 1, "GroupQuestionSetName": "GroupQuestionSet 1" }, { "Id": 2, "GroupQuestionSetName": "GroupQuestionSet 2" }, { "Id": 3, "GroupQuestionSetName": "GroupQuestionSet 3" } ]; //This is data from QuestionSetTable in database //GroupQuestionSetId if foreign key link to Id column of GroupQuestionSetTable var QuestionSetTable = [ { "Id": 1, "GroupQuestionSetId": 1, "QuestionSetName": "QuestionSet 1" }, { "Id": 2, "GroupQuestionSetId": 1, "QuestionSetName": "QuestionSet 2" }, { "Id": 3, "GroupQuestionSetId": 1, "QuestionSetName": "QuestionSet 3" }, { "Id": 4, "GroupQuestionSetId": 2, "QuestionSetName": "QuestionSet 4" } ]; //This is data from SubQuestionTable in database //QuestionSetId if foreign key link to Id column of QuestionSetTable var QuestionTable = [ { "Id": 1, "QuestionSetId": 1, "QuestionContent": "QuestionContent 1" }, { "Id": 2, "QuestionSetId": 1, "QuestionContent": "QuestionContent 2" }, { "Id": 3, "QuestionSetId": 1, "QuestionContent": "QuestionContent 3" }, { "Id": 4, "QuestionSetId": 2, "QuestionContent": "QuestionContent 4" } ]; }------------------------ need ------------------------
When I create, update, delete Question inside QuestionSet (or GroupQuestionSet or QuestionSet) Grid only interact with Database and only reload that row. The same as when we use Kendo grid with create, read, update, delete
------------------------ My curent solution ------------------------
When insert, update, del: Browser rebind all grid. -> it will slow if we have large data.
------------------------ My temporary solution ------------------------
I have read this topic http://stackoverflow.com/questions/16097878/kendo-ui-unable-to-bind-data-to-list-view-using-mvvm but I don't understand.
My temporary solution is :
Source:
Contruct a Temp object the same as result table from above query-->Load Kendo grid using that list of Temp object and use Kendo grid with create, read, update, delete -> In create, read, update, delete I will write code to create, read, update, delete to only GroupQuestionSet or QuestionSet or Question
I still looking for some other solutions.
Thank you.