Questions on UI for ASP.NET MVC Forum

0 answers

332 views

Kendo Grid column as a multiselect dropdown widget (.net mvc, jQuery)

I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.

Please help.

This is how i have prepared my grid :

$("#ListofMF").kendoGrid({
            dataSource: {
                data: extractedData,
                schema: {
                    model: {
                        fields: {
                            Id: {type: "integer"},
                            FullName: { type: "string" },
                            Temp1: { type: "boolean" },
                            Temp2: { type: "boolean" },
                            Industry: { type: "string" },
                            //Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            //scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: true,
                pageSize: 6
            },
            columns: [
                {
                    title: " ",
                    width: 30,
                    field: "Id",
                    hidden: true
                },
                {
                    title: " ",
                    width: 40,
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="isMFSelected"/>'
                },
                {
                    field: "FullName",
                    title: "Data",
                    //width: "140px",
                    headerAttributes: { style: "font-weight: bold;" }
                },
                {
                    field: "Temp1",
                    title: "Temp 1",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
                },
                {
                    field: "Temp2",
                    title: "Temp 2",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
                },
                {
                    field: "Industry",
                    title: "Industry",
                    editor: function (container, options) {
                        // Get the industry template and apply it to the column editor
                        console.log(container.html);
                        var industryTemplate = $("#industryTemplate").html();
                        container.html(industryTemplate);
                    }
                }
            ]
        });

And in another script tag i am preparing the multiselct widget

<script id="industryTemplate" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
        .Name("Industry")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
    )
</script>

My output on screen for Industry column always remains like :

DropDownList

Grid

MultiSelect

asked on 22 Aug 2023

1 answer

358 views

How to Add validation inside the kendo grid.

I have Kendo Grid i need to add validation on innner textbox on updating a row.

I am using code like that.

@html.kendo()

Grid

answered on 21 Aug 2023

2 answers

294 views

Invalid Client Template after upgrading the Kendo UI ASP.NET MVC version from 2021.3.1109 to 2023.2.718

After upgrading the Kendo UI Asp.net MVC version from 2021 to 2023 in our application, we are getting an error saying "Invalid template" . It looks like there is an error in client template. Please let me know if there is anything to update in client template code.

Html.Kendo().Grid<Report>()
.Name("ReportsGrid")
.Columns(columns =>
{
columns
.Bound(r => r.Name);

columns
.Template(@<Text></Text>)
.ClientTemplate(string.Format("<a class='k-button' href='{0}?reportPath=#= ReportPath #' target='_blank'>Open Report</a>", Url.Action("OpenReport", "Report")));
})

Error - Invalid template:'<a class='k-button' href='/Report/OpenReport?reportPath=#= ReportPath #' target='_blank'>Open Report</a>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<a class=\'k-button\' href=\'/Report/OpenReport?reportPath='+( ReportPath )+'\' target=\'_blank\'>Open Report</a>';}return $kendoOutput;

Grid

answered on 16 Aug 2023

0 answers

94 views

DropDowns in detail table showing wrong data until clicked. They show what parent row dropdown shows.

Grid with Parent rows and Detail Table. Parent row has a DropDown bound to choices. The data in the Detail Table includes a DropDown bound to same possible choices. When page 1st renders all the DropDowns in the detail table display the same choice that the parent row shows. It is possible for parent row to have 1 value then each of the 5 detail rows to have different values for the column that is manipulated with dropdown. The problem is that the detail dropdowns although bound to data rows with proper value instead show the text that the parent dropdown shows.

This is before user makes any choices. If user clicks on dropdown in detail table it will change to dropdown and show the correct choice.

How to get the detail tables to render correctly when initially displayed? I added a couple of images for illustration. InitialRender.png is the screen right after it loads. Afterclick.png is the screen after clicking the dropdown control, but not changing the value. You see that the dropdown has selected the value that corresponds to the data in the datasource for that row. The dropdowns in the detail rows dont even have a value of "Multiple" to select.

DropDownList

Grid

updated question on 15 Aug 2023

1 answer

105 views

website start crashing after upgrade to 2023.1.425

I have upgraded kendo UI for ASP.NET MVC from 2021.2.1109 to 2023.1.435. After it it started giving me this error.

General Discussions

answered on 14 Aug 2023

0 answers

90 views

How to set datasource when we have List of objects

Hi Experts,

Please help me in displaying below data in grid like result which i mention.

@model = [ { val : 1, columnName : 'column1' }, { val:2, columnName: 'column2'}, { val:3, columnName: 'column3'} ]

Result should be

column1 column2 column3

1 2 3

we can do this in jquery, but i need this in Asp.net MVC kendo grid.

Grid

asked on 13 Aug 2023

1 answer

151 views

How to set Grid Grouping Fields based on value in model

Hi
Currently, I'm using the following code to display data with initial grouping:
...
.DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Method", "Controller"))
                .ServerOperation(false)
                .GroupPaging(true)
                .PageSize(50)
                .Group(g => 
                    {
                        g.Add(x => x.JahrText);
                        g.Add(x => x.QuartalText);
                        g.Add(x => x.MonatText);
                        g.Add(x => x.TagText);
                    }
                )
                .Aggregates(aggr =>
                {
                    aggr.Add(e => e.JahrText).Count();
                    aggr.Add(e => e.QuartalText).Count();
                    aggr.Add(e => e.MonatText).Count();
                    aggr.Add(e => e.TagText).Count();
                    aggr.Add(e => e.Description).Count();
 
                })
...
Now I'd like to do the initial grouping (when the page gets rendered for the first time) based on a value in the model. 
Let's say, if the model property "GroupLevel" is set to 1, only the "JahrText" is added to the group. 
If the property "GroupLevel" is set to 2, "JahrText" and "QuartalText" are added to the group, etc.

Is there an easy way to implement such a behaviour? 

Thank you for your support!

Best regards,
Daniel

Grid

answered on 10 Aug 2023

1 answer

622 views

Auto height for dropdown with dynamic items list

I have a Kendo dropdown list in my project, data of which is dependent from some external conditions and can be changed while widget is already constructed.

When you have 1 item initially and you open dropdown - height for the suggestions popup is fine and covers this 1 item.

When you later change number of items to 6 for example and try to open it - height is still covers only one item and creates a scroll instead of just expand to all available area.

Here is a Dojo example of how it works: https://dojo.telerik.com/oGubaqiX

You should open dropdown, then hit "Change DS" button and the open dropdown again.

As you can see the behavior is absolutely wrong.

How can I change it or what am I doing wrong?

DropDownList

answered on 10 Aug 2023

0 answers

225 views

How to capture blur event on kendo grid MVC

I have a kendo grid which is populated by a model from an MVC controller. Column 1 and 2 are not editable and are populated with data from the model. Column 3 is an editable column. Column 4 is rendered empty and is not editable.

I need to allow the user to enter a numeric value in the cell in column 3 and then when that cell looses focus, execute a javascript function which will compute a value and place it into the cell in column 4. So, for example, if row 1, column 1 has a value of "2023/24" and row 1, column 2 has a value of 1000, and the user enters 50 into row1, column 3, the javascript function will compute 1000 - 50 and will place the value of 950 into row1, column 4.

Here is the complete kendo grid definition:

                            @(Html.Kendo().Grid<TaxCertApp.ViewModels.SettlementMemoViewModel>()
                                  .Name("SettlementMemodGrid")
                                  .Columns(columns =>
                                  {
                                      columns.Bound(nr => nr.TaxYear).Width(50).Title("Tax Year");
                                      columns.Bound(nr => nr.OriginalAssessment).Width(100).Title("ORIG. ASSESSMENT").Format("{0:##########0}");
                                      columns.Bound(nr => nr.Reduction).Width(100).Title("REDUCTION").EditorTemplateName("Integer");
                                      columns.Bound(nr => nr.FinalAssessment).Width(100).Title("FINAL ASSESSMENT").Format("{0:###,###,##0}");
                                      columns.Bound(nr => nr.Rate).Width(100).Title("RATE").EditorTemplateName("Currency");
                                      columns.Bound(nr=> nr.RefundSavings).Width(100).Title("REFUND/SAVINGS").Format("{0:###,###,##0}");
                                      columns.Bound(e => e.Type).Width(100).EditorTemplateName("TypeList").Title("TYPE (R S R/S)");
                                  })
                                .Editable(editable => editable.Mode(GridEditMode.InCell))
                                .Pageable()
                                .Scrollable()
                                .Selectable(selectable => selectable
                                    .Mode(GridSelectionMode.Single)
                                    .Type(GridSelectionType.Cell))
                                .Events(e => e.Edit("OnEdit"))
                                .Events(ev => ev.Change("OnChange"))
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(n => n.TaxYear);
                                        model.Field(n => n.OriginalAssessment).Editable(false);
                                        model.Field(n => n.Reduction).Editable(true);
                                        model.Field(n => n.FinalAssessment).Editable(false);
                                        model.Field(n => n.Rate).Editable(true);
                                        model.Field(n => n.RefundSavings).Editable(true);
                                        model.Field(n => n.Type).Editable(true);
                                    })
                                    .PageSize(20)
                                    .Read(read => { read.Action("SettlementMemoFetchGrid", "Forms").Data("BuildObjectGridSettMemo"); })
                                 )
                            )

Currently, when a user clicks in row1, column 3, the onChange AND onEdit events fire, even before the user types any data into the cell. Neither event first when the user moves off the cell.

And the second piece of this question is, once the javascript computes the 950 value, how do I get that 950 value to display in the grid?

Thank you for any assistance.

Grid

asked on 09 Aug 2023

1 answer

134 views

Why does a date field always return a default value rather than the input date?

Hello friends,

For the Kendo Grid, when we add a new record, a date field is always the default value 01/01/0001 in the post back record. It should return the input date value rather than 01/01/0001 (or null if this date field is not required)

However, when we update this 01/01/0001 field in this new created record, the correct date value is returned in the post back record and can be updated successfully.

We are using VS 2022. (When checking mdGiving, we found that date field value is always 01/01/0001 no matter what we entered for that field in the grid.)

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddMdGivingData([DataSourceRequest] DataSourceRequest request, MDGIVING mdGiving)
{

}

Any ideas?

Thank you very much for your help.

Andrew

Grid