This is a migrated thread and some comments may be shown as answers.

Maintain Values of grid textbox and dropdown after grid refresh

5 Answers 363 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Veteran
Mohammed asked on 12 Aug 2020, 02:32 PM

Hi ,

 

I have below scenarion

I am loading  text box  dropdown and switch in Grid in load, i need to maintain the selected values or entered values after the grid refresh

Is there any way to maintain

 

5 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 14 Aug 2020, 04:12 PM

Hi Mohammed,

Thank you for the details.

Based on the provided information, I assume the needed functionality is to save changed dropdown and text input values in the grid.

If this is the case, I would recommend using a "custom editor" for the dropdown as is shown in this demo:

The custom editor field value points to a JavaScript function that instantiates the column. Furthermore, this approach is taking care of the "CRUD" operations out of the box. 

In order to save the changes try the Save toolbar button of the grid.

Another possible solution is to save the changes programmatically. To do that, use the "saveChanges" method of the grid:

var grid = $("#grid").data("kendoGrid");
grid.saveChanges();

The code above could be used in every needed function scope, before executing a "refresh" of the grid.

Here is an example of the implementation for the main functionalities:

Let me know if this approach works for you or further custom implementations are needed.


Kind Regards,
Anton Mironov
Progress Telerik

0
Mohammed
Top achievements
Rank 1
Veteran
answered on 16 Aug 2020, 11:25 AM

Hi Thanks for the reply,

I am not loading the custom editor instead i am loading kendodropdownList in the grid that will be displayed in the page load it self.

 

0
Anton Mironov
Telerik team
answered on 17 Aug 2020, 03:26 PM

Hello Mohammed,

Based on the information gathered so far, I am not sure whether the DropDownList widget is set as a template for a column of the grid, as an editor template, or is it external for the grid. Could you share the relevant code snippets for the declaration of the grid? Or, ideally, share a runnable example in which the behavior could be observed.

Here is a dojo template that could be used for the purpose:

Use Ctrl+Shift+S to generate a link for the implementation and save it by Ctrl+S.

Examining this example locally will help me fully understand the scenario, and this will help me to find a workaround eventually.

Best Regards,
Anton Mironov
Progress Telerik

0
Mohammed
Top achievements
Rank 1
Veteran
answered on 18 Aug 2020, 07:43 AM

Below is my implementation code,of column with dropdownlist in grid ,same way i load textbox in grid client template column

column.bound(c => c.ColumnName).ClientTemplate(Html.Kendo().DropdownList().Name("ddl#=ID#")

.DataValueField("Value")

.DataTextField("Text")

.OptionLabel("Please Select")

.BindTo(Tempdata["List"]) as IEnumerable<SelectListItem>)ToclientTemplate().toHtmlString()).Width(200)

0
Anton Mironov
Telerik team
answered on 20 Aug 2020, 09:16 AM

Hello Mohammed,

Thank you for the provided code snippet.

Based on the provided information, I reproduced the pointed approach at my side. In order to achieve the desired behavior try to bound the column to a property of the model. For example, let say this property is a class named Category that has its own properties - "CategoryID" and "CategoryName". In this case,  the ClientTemplate will use the CategoryID for DataValueField and CategoryName for DataTextField. The Name of the template needs to be unique so using the Primary Key(Id) of the model is a very good decision. Here is an example:

 @(Html.Kendo().Grid<KendoGridMVC.Models.OrderViewModel>()
        .Name("GridID")
        .Columns(columns => {
            columns.Bound(c => c.Category).ClientTemplate(Html.Kendo().DropDownList().Name("ddl#=OrderID#")
            .DataValueField("CategoryId")
            .DataTextField("CategoryName")
        .BindTo(new List<KendoGridMVC.Models.Category>()
        {
            new KendoGridMVC.Models.Category { CategoryId = 1, CategoryName = "Enable" },
            new KendoGridMVC.Models.Category { CategoryId = 2, CategoryName = "Disable" }
        })
                .OptionLabel("Please Select")
                .ToClientTemplate()
                .ToHtmlString()).Width(200);
        })
        .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
                .Update(read => read.Action("Orders_Update", "Grid"))

            )

        .Events(ev => ev.DataBound("initMenus"))
    )

    function initMenus(e) {
        e.sender.table.find("tr").each(function () {
            $(this).find('script').each(function () {
                eval($(this).html());
            });
        });
    }
In the example above I am using a collection of "primitive data" for the dropdown options. Feel free to use your own collection. 

 

Let me know if further assistance is needed.

Greetings,
Anton Mironov
Progress Telerik
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Mohammed
Top achievements
Rank 1
Veteran
Share this question
or