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.
I'm able to show bubbles if the datasource contains them at the time the map is created, but I want to be able to add them dynamically.
To add markers dynamically I do map.markers.add(marker);
To add non-bubble shapes dynamically I define my shapes layer like this:
{ type: "shape", dataSource: shapes, style: { fill: { opacity: 1 }, stroke: { width: 1, color: "#88f" } } },with shapes defined like this:
var shapes = new kendo.data.DataSource({type: "geojson"});According to this thread the only types of fields you can define in a custom datasource are "string", "number", "boolean" and "date". Unfortunately the bubble layer's location field is looking for a Lat Long, so that makes it so I can't use a kendo datasource object.
Is there a way to make this work?