Maintain Values of grid textbox and dropdown after grid refresh

[Mohammed]

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

 

[Anton Mironov]

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:

• https://demos.telerik.com/kendo-ui/grid/editing-custom 

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:

• https://dojo.telerik.com/OfUXeteB

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

Kind Regards,
Anton Mironov
Progress Telerik

[Mohammed]

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.

 

[Anton Mironov]

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:

• https://dojo.telerik.com/

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

[Mohammed]

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)

[Anton Mironov]

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