DESELECTION OF COMMAND BUTTON COLUMN

3 posts, 1 answers
  1. attuneIT
    attuneIT avatar
    13 posts
    Member since:
    Mar 2014

    Posted 19 Mar 2014 Link to this post

    I'm using Kendo UI Grid to populate list of data and when i click on particular row i need to redirect to another view page of that particular row. but i have a delete command for that particular row. When i try to delete particular row it redirect to another page.i don't need any redirection after deletion. so the possible solution is i want to deselect only the command column when i select a particular row. Both i need row selection but no need command column selection..Please give a solution  for this...

      @(Html.Kendo().Grid<Portal.Presentation.Web.BoundedContext.TNA.Template.MVC.Areas.Razor.Models.TemplateModel>()
                      .Name("grid_Template_Freeze")
                      .AutoBind(true)
                      .Groupable()
                      .Sortable()
                      .HtmlAttributes(new { style = "border: 0;" })
                      .Scrollable(a => a.Height("auto"))
                              .Selectable(sel => { sel.Mode(GridSelectionMode.Single); sel.Type(GridSelectionType.Row); sel.Enabled(true);
                              })
                      .Columns(c =>
                                   {
                                       c.Bound(p => p.TemplateId).Hidden();
                                       c.Bound(p => p.TemplateName).Title("&nbsp;").Title("TEMPLATE NAME");
                                       c.ForeignKey(p => p.ProductTypeId, (System.Collections.IEnumerable) ViewData["ProductTypes"], "Key", "Value").Title("PRODUCT TYPE");
                                       c.ForeignKey(p => p.OwnershipId, (System.Collections.IEnumerable)ViewData["UserTypes"], "Key", "Value").Title("OWNERSHIP");
                                       c.Bound(p => p.CreatedOn).Title("CREATED DATE").Format("{0:dd/MM/yyyy hh:mm}");
                                       c.Bound(p => p.UpdatedOn).Title("LAST MODIFIED DATE").Format("{0:dd/MM/yyyy hh:mm}");
                                       c.ForeignKey(p => p.StatusId, (System.Collections.IEnumerable)ViewData["StatusTypes"], "Key", "Value").Title("STATUS");
                                       c.Command(command => command.Destroy()).Width(80);

                                   })
                      .Events(evt => evt.Change("TemplateTaskHandler.onChange"))
                      .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .Sort(sort => sort.Add(p => p.TemplateName).Descending())
                                                    .Model(model =>
                                                                   {
                                                                       model.Id(p => p.TemplateId);
                                                                       model.Field(p => p.TemplateId);
                                                                   })
                                                    .Events(events => events.Error("error_handler"))
                                                    .PageSize(20).ServerOperation(false)
                                                    .Destroy(destroy => destroy.Action("OnTempaleDelete", "List"))
                                                    .Read(read => read.Action("OnTempaleRead", "List"))
                      ).Pageable(x => { x.Enabled(true); x.PreviousNext(true); x.PageSizes(true); x.Info(true); x.Input(true); x.Numeric(false); x.Refresh(true); }))



     var TemplateTaskHandler = {

            onChange: function (e) {

                var grid = $("#grid_Template_Freeze").data("kendoGrid");
                var item = grid.dataSource.data()[grid.select().index()];
                location.href = "@Model.ResolveRouteUrl(Portal.Presentation.Web.BoundedContext.TNA.Template.MVC.Areas.Razor.Models.TnaModelTypes.Update)" + "&tmpl=" + item.TemplateId;
            }
        };
    }
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2311 posts

    Posted 20 Mar 2014 Link to this post

    Hi Indika,


    A sample approach in the current case would be to keep track of the last clicked cell and then in the change event check if it was the command column.
    E.g.
    .Events(e => e.DataBound("dataBound").Change("change"))

    var lastClickedCell;
     
    function dataBound() {
        this.tbody.on("mousedown", "td", function (e) {
            lastClickedCell = $(this);
        });
    }
     
    function change(e) {
        //assuming that the index of the command column is 5
        if (lastClickedCell.index() === 5) {
            lastClickedCell.closest("tr").removeClass("k-state-selected");
        } else {
            //navigate to other page
        }
    }

    I hope this approach suits the current case. I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. attuneIT
    attuneIT avatar
    13 posts
    Member since:
    Mar 2014

    Posted 07 Apr 2014 in reply to Dimiter Madjarov Link to this post

    Thank you very much....Done...Cheers...!!!
Back to Top