Maintain Values of grid textbox and dropdown after grid refresh

6 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 12 Aug 2020 Link to this post

    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

     

  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 14 Aug 2020 Link to this post

    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

  3. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 16 Aug 2020 in reply to Anton Mironov Link to this post

    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.

     

  4. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 17 Aug 2020 Link to this post

    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

  5. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 18 Aug 2020 in reply to Anton Mironov Link to this post

    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)

  6. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 20 Aug 2020 Link to this post

    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
Back to Top