Questions on Kendo UI for jQuery Forum

4 answers

169 views

How can I create a custom toolbar button, using a template, and attach an event to it from an Angular controller?

Any help would be awesome.

Toolbar

answered on 26 Feb 2020

1 answer

224 views

FileManager

Hello Sir!!!

How to CRUD operation can be done in File Manager.

FileManager

answered on 26 Feb 2020

2 answers

4.4K+ views

Jquery grid not loading data even though Json is returned

I am having an issue which I am hoping is obvious but that I haven't been able to figure out.

I have a grid that when I use call the Read controller the MVC grid it works perfectly fine as below.

@(Html.Kendo().Grid<ProductModel>()

.Name("grid1")

.Columns(columns =>

{

columns.Bound(p => p.Id).Filterable(false);

columns.Bound(p => p.Name);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("ProductRead", "Admin"))

)

But when I use Jquery to create the grid dynamically it makes the call to the controller and retrieves the same JSON correctly as below, but the grid is always blank. The databound event also

{"Data":[{"Id":1,"Name":"Testing1"},{"Id":2,"Name":"Testing2"},{"Id":3,"Name":"Testing3"},],"Total":3,"AggregateResults":null,"Errors":null}

Here is the javascript. I must be missing something:

<script>

CreateGrid("myGrid");

function CreateGrid(gridID) {

var dataSource = new kendo.data.DataSource({

//type: "odata",

transport: {

read: function (options) {

$.ajax({

url: "/Admin/Wells/ReadAll",

dataType: "json",

data: {

models: kendo.stringify(options.data.models)

},

success: function (result) {

options.success(result);

}

});

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return {

models: kendo.stringify(options.models)

};

}

},

batch: true,

pageable: true,

schema: {

model: {

id: "Id",

fields: {

"Id": { "type": "number", "nullable": false },

"Name": { "type": "string", "nullable": false }

}

});

$(gridID).kendoGrid({

sortable: true,

autoBind: false,

dataSource: dataSource,

filterable: true,

columnMenu: true,

resizable: true,

selectable: "single",

autoFitColumn: false,

pageable: {

pageSize: 10 // specifying the pagesize inside the datasource fixed my problem (Nan-Nan of 1 items)

},

//columns: myColumnObject,

columns: [{ field: "Id", minResizableWidth: "125px", type: "number" },

{ field: "Name", minResizableWidth: "350px" }

],

editable: "popup"

});

//Now load the grid with data

var grid = $(gridID).data("kendoGrid");

grid.bind("dataBound", grid_dataBound);

grid.dataSource.fetch();

}

function grid_dataBound(e) {

console.log("dataBound");

}

</script>

and for reference here is the controller it hits.

Productcontroller.cs

public ActionResult ReadAll([DataSourceRequest] DataSourceRequest request)

{

var data = productService.Read();

var serializer = new JavaScriptSerializer();

var result = new ContentResult();

serializer.MaxJsonLength = Int32.MaxValue; // Whatever max length you want here

result.Content = serializer.Serialize(data.ToDataSourceResult(request));

result.ContentType = "application/json";

return result;

}

productService.cs

public IEnumerable<ProductModel> Read()

{

return GetAll();

}



public IQueryable<ProductModel> GetAll()

{

     var wells = entities.WellModel.AsNoTracking().AsQueryable();

     return wells;

}

Grid

answered on 24 Feb 2020

3 answers

789 views

Different closing behaviour for notifications

Hello!

How can I make info and success notifications disappear automatically after a few seconds, but have warning and error notifications to be closed manually by the user?

Best regards,

Kaan

Notification

answered on 24 Feb 2020

1 answer

331 views

Validate partial form

Hello,

I have this valdiation summary:

<div asp-validation-summary="All" class="text-danger" >

<span class="k-invalid-msg" data-for="Description" data-valmsg-for="Description"

id="Description_validationMessage" role="alert" >

</span>

... more fields

</div>

<textarea asp-for="Description" class="form-control mc0" data-bind="value: ent.Description">

</textarea>

let viewModel = kendo.observable({

save: function() {

let editForm = $("#edit-form").kendoValidator().data("kendoValidator");

if (editForm.validate()) {

this.entDataSource.sync();

}

},

})

Because of the business rules, I need to validate only certain fields, based on the current entity state.

Is there a way to validate only certain fields, like all fields with class "mc0" (or fields in a "div#id-for-state-X") and have the error messages displayed in the summary?

Thanks.

Validation

answered on 24 Feb 2020

6 answers

143 views

Grid - Filter - Standard Drop down first actual filtered results

Please correct me if I am wrong. When we try to search in the Name field (without tabbing out), a drop down appears, but only appears to use StartsWith. While when you tab out, the filtering actually uses the filter operator.

Other than wiring up a filter template to a combobox and then wire up to the "Operator button" (change event) make sure the Grid Filter operator matches the Combobox operator, is there anything else I can do?

Thanks

Sample code below:

@(Html
.Kendo()
.Grid<ItemViewDisplay>()
.Name("saleItemSearchGrid")
.Columns(columns =>
{
columns.Bound(c => c.ItemCostId).Hidden(true);
// Name:
columns.Bound(c => c.Name).Filterable(KendoConstants.Grid.FilterConfigs.ContainsOperator);
// IngredientNumber:
columns.Bound(c => c.IngredientNumber).Filterable(KendoConstants.Grid.FilterConfigs.ContainsOperator);
// BarcodeCount:
columns.Bound(c => c.BarcodeDisplayList).Filterable(f => f.Cell(cell => cell.Operator("contains").Delay(1500)))
.ClientTemplate("#=BarcodeDisplayStr#");
columns.Command(command => { command.Custom("gridSelect").Text("Select").Click("jsSaleItemSelected"); }).Title("Action");
})
.HtmlAttributes(KendoConstants.Grid.StandardHtmlAttributes)
.Scrollable()
.Sortable()
.PersistSelection()
.Filterable(KendoConstants.Grid.FilterByRow)
.Pageable(KendoConstants.Grid.Paging5Button)
.DataSource(dataSource => dataSource
.Ajax()
.Events(KendoConstants.StandardErrorFunction)
.Model(model => model.Id(p => p.ItemCostId))
.Read(read => read.Action("MenuButtonItemList_Read", "Menu"))
.PageSize(KendoConstants.Grid.StandardPageSize)
)
)

Grid

answered on 24 Feb 2020

3 answers

495 views

categoryAxis doesn't show all labels

Charts

answered on 24 Feb 2020

3 answers

40 views

Need explanation on something fixed in R1 2020 SP1

H team,

Found this many times in last kendo UI release note :

"Input wrapped in class - 'input-validation-error' is not submitted by jquery-validate greater than version 1.12.0"

Can someone explain me this in details please ?

Best regards,

Laurent.

General Discussions

answered on 21 Feb 2020

1 answer

442 views

Responsive Column Width in Timeline View?

I have a scheduler in timeline view built in Kendo for jQuery. The rest of the site is in ASP.NET MVC. I'm wondering if there's any way to dynamically/responsively set the column width so that on most desktop screens, the whole day is visible without scrolling. I have columnWidth:70 set in the views option, but this is too small on large screens, but 80 is too big on small screens. Any way to tell Kendo to scale the column widths based on window size?

Scheduler

answered on 21 Feb 2020

8 answers

2.1K+ views

The Refresh of Kendo Grid (with endless scrolling option) is not working properly

Hey,

I am working with Kendo Grid with endless Scroll option set to true. I know that we are not suppose to have paging option (Refresh) with the endless or virtual scrolling set to true, that's why I am looking for a workaround that allows us at least to reset the Grid from the start (before scrolling).

here is an example: https://dojo.telerik.com/OZUTIJEz (Try to scroll and then hit the refresh icon)

There is always replicated/wrong data with wrong paging.

I have tried the following things and didn't work:

$('#grid').data('kendoGrid').dataSource.data([]);

$('#grid').data('kendoGrid').dataSource.read();

Any Ideas ?

Thanks.

Grid