Telerik Forums
UI for ASP.NET MVC Forum
1 answer
24 views
Is there a way I can affect the text color for the checked state of the switch without hacking the theme. through htmlattributes or something like that. I want in in one place not globally.
Petar
Telerik team
 answered on 24 Aug 2021
1 answer
27 views

Hello,

I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.

This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.

For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.

When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.

 

Any idea why this is happening or how to resolve?

I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.

 

.cshtml Grid Code

    @(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
    .Columns(columns =>
    {
        columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
        columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
        columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);

    . . .

    })
            .Sortable()
            .AutoBind(false)
            .Pageable(p => p
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
            .Scrollable()
            .Filterable(f => f
                        .Mode(GridFilterMode.Menu)
                        )
            .Events(e => e
                .FilterMenuInit("OnFilterMenuInit")
            )
        .Resizable(rs => rs.Columns(true))
        .Navigatable()
        .Selectable(s => s
           .Mode(GridSelectionMode.Single)
           .Type(GridSelectionType.Row))
        .NoRecords("No Records!")
        .DataSource(ds => ds
            .Ajax()
            .Model(m=> m.Id(p => p.id))
            .PageSize(10)
                    .Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
            .Update(upd => upd.Action("EditData", "Test"))
            .Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
            .ServerOperation(true))

 

 

.js OnFilterMenuInit function:

function OnFilterMenuInit(e) {

    e.container
      .empty()
        .append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));

    $('#filter').kendoButton({
        click: function () {
            var col1 = $('#col1-tb').val();
            var col2 = $('#col2-tb').val();
            var col3 = $('#col3-tb').val();

            var col1Ops = $('#col1-operators').value();
            var col2Ops = $('#col2-operators').value();
            var col3Ops = $('#col3-operators').value();

            var col1Logic = $('#col1-logic').value();
            var col2Logic = $('#col2-logic').value();
            var col3Logic = $('#col3-logic').value();

            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };

            if (col1 != "") {
                if (col1Logic == 'and') {
                    andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
                else {
                    orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
            }

            if (col2 != "") {
                if (col2Logic == 'and') {
                    andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
                else {
                    orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
            }

            if (col3 != "") {
                if (col3Logic == 'and') {
                    andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
                else {
                    orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
            }
. . .

            andfilter.filters.push(orfilter);
            orfilter = { logic: "or", filters: [] };

            e.sender.dataSource.filter(andfilter);
            localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);

        }
    });

    $('#clear').kendoButton({
        click: function () {
            e.sender.dataSource.filter({});
            localStorage["kendo-grid-filter"] = kendo.stringify({});
        }
    })
}

 

 

.cs TestController GetData Method

        public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int? arg1, string arg2, bool arg3 = false, bool arg4 = false)
        {
            DAL dal = new DAL();
            var result = dal.GetDataDAL(request, arg1, arg2, arg3);
            return Json(result, JsonRequestBehavior.AllowGet);
        }


Anton Mironov
Telerik team
 answered on 23 Aug 2021
1 answer
19 views

Hello, is it possible to open a selected document into the editor ? I'm looking to open a document into the editor when the editor loads up. I have gone through the demos and saw its possible to import a file to the editor, however I'm looking for the editor to open up a document selected in the controller.

Thank you

Anisha

Eyup
Telerik team
 answered on 20 Aug 2021
1 answer
30 views
im using trying to use a multiselect dropdownlist in my grid.. I'm getting error as Typeerror: cannot read property Text of null.

 

Grid:

@(Html.Kendo().Grid().Name("EmployeesGrid").Columns(columns => {

 columns.Bound(e => e.FirstName).Title("First Name");

 columns.Bound(e => e.LastName).Title("Last Name");

 columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");

 columns.Command(command =>{

 command.Edit();

 }

);

}

).ToolBar(toolbar => toolbar.Create()).

Editable(editable => editable.Mode(GridEditMode.InLine)).

DataSource(dataSource => dataSource.Ajax().Events(events => events.Error("error_handler")).

Model(model => model.Id(e => e.Id)).

Create(update => update.Action("CreateEmployee","Home")).

Read(read => read.Action("ReadEmployees","Home")).

Update(update => update.Action("UpdateEmployees","Home"))))

 

After i select the values in the drop-down. im not able to see the values in the field... Need help with this

Petar
Telerik team
 answered on 18 Aug 2021
1 answer
10 views
Is it possible to right align text in this editor
Petar
Telerik team
 answered on 17 Aug 2021
1 answer
17 views

Hi there,

Is the recommended way of dealing with encoded HTML in grid cells being sent back to the controller still using [ValidateInput(false)] on the controller as per this forum post html encode in UI for ASP.NET MVC | Telerik Forums ?

Thank you,

Mike Kingscott

Eyup
Telerik team
 answered on 16 Aug 2021
1 answer
10 views

Hello,

We plan to use kendo UI bar chart for our MVC project to present our business logic. My question is how to handle long text on CategoryField? Is there any way to make label on different direction like brown colored lines on the bottom in below image? Thanks.

Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
 answered on 14 Aug 2021
0 answers
9 views

I am using Telerik UI for ASP.NET MVC R2 2021 SP1 (2021.2.616)  in VB.net, Visual Studio 2019

I have added a FileManager to an MVC view following the code in the Basic Usage demo (https://demos.telerik.com/aspnet-mvc/filemanager) and everything is working correctly, except when I try to implement the code for the New Folder button (Which fires the Create command on the DataSource).


@Html.Kendo().FileManager().Name(Model.ControllerName & "_FileManager").DataSource(Sub(ds)
	ds.Read(Sub(r)
		r.Type(HttpVerbs.Post).Action("Read", Model.ControllerName)
	End Sub)
	ds.Create(Sub(c)
		c.Type(HttpVerbs.Post).Action("Create", Model.ControllerName)
	End Sub)
	ds.Update(Sub(u)
		u.Type(HttpVerbs.Post).Action("Update", Model.ControllerName)
	End Sub)
End Sub).Upload(Sub(u)
	u.Validation(Sub(v)
		v.AllowedExtensions(Model.AllowedFileExtensions)
	End Sub)
End Sub).UploadUrl("Upload", Model.ControllerName).Toolbar(Sub(t)
		t.Items(Sub(i)
		i.Add("createFolder")
		i.Add("upload")
		i.Add("sortDirection")
		i.Add("sortField")
		i.Add("spacer")
		i.Add("search")
	End Sub)
End Sub).InitialView("grid").ContextMenu(Sub(c)   
	c.Items(Sub(i)
		i.Add("download").Command(Model.ControllerName & "DownloadCommand").Text("Download").SpriteCssClass("k-icon k-i-download")
	End Sub)
End Sub)


On the demo page, if you have the developer tab open to the Network, when clicking the New Folder button you can see the request that is sent to the url defined in the Create endpoint and it contains the target path as well as the data for a FileManagerEntry object for the New Folder in the Form Data:

When I click the button in my FileManager view I can see the Form Data only includes the target property but none of the others:

Here is the code for the Create function in my Controller (it's almost identical to the demo code):


        Public Function Create(ByVal target As String, ByVal entry As FileManagerEntry) As ActionResult
            Dim newEntry As FileManagerEntry

            If String.IsNullOrEmpty(entry.Path) Then
                newEntry = CreateNewFolder(target, entry)
            End If

            Return Json(VirtualizePath(newEntry))
        End Function

I have not been able to figure out why the FileManager in my view is not returning the same data to the controller that the demo one does.

Any help would be greatly appreciated.

Cary
Top achievements
Rank 1
 asked on 13 Aug 2021
0 answers
16 views

I have a grid, I have added custom validations on multiple columns. It's working as expected. But there is one issue, I am not able to edit other cells if there is any validation error on the cell, So first I need to fix the error for this cell then only I am allowed to edit other cells. But I want that it should show the validation error in the tooltip and as well as to edit other cells.

I have attached the tooltip message in the question.


columns.Bound(config => config.X).Title("X").HeaderHtmlAttributes(new { @class = "grid-headercustom" }).
ClientTemplate("#if(data.X == 1)" + "{#<span>Y</span>#}" + "else{#<span>N</span>#}#").
HtmlAttributes(new { @class = "grid-rowcustom" }).HtmlAttributes(new { style = "font-size:12px" }).Filterable(ftb => ftb.Enabled(false));

 


$.extend(true, kendo.ui.validator, {
    rules: {
        RateV: function (input, params) {
            if (input.is("[name='X']")) {
                var grid = $("#mygrid").data("kendoGrid");
                var row = input.closest("tr");
                var dataItem = grid.dataItem(row);
                if (dataItem.X == true && dataItem.Y <= 0) {
                    input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return false;
                }
            }
            
            return true;
            }
        },
        messages: {
            RateV: function (input) {
                // return the message text
                return input.attr("data-val-X");
            }
        }
    });
})(jQuery, kendo);

 

I have tried to return true also but it doesn't show the error then.

 input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return true;

Vivek
Top achievements
Rank 1
Iron
 updated question on 12 Aug 2021
0 answers
9 views
I have a grid, I have enabled the InCell editing, I want to edit the multiple cells and on a Save button click, I want to validate all the grid data and show the error messages as tooltip (which is shown on validation error) for the respective cells. It should only allow to Save data if all the validations are passed.
Vivek
Top achievements
Rank 1
Iron
 asked on 12 Aug 2021
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran