Grid Toolbar functioality outside grid

6 posts, 0 answers
  1. Sentil
    Sentil avatar
    23 posts
    Member since:
    Jul 2011

    Posted 14 May 2013 Link to this post

    Hi
    i am using telerik for one of my project where i use custom button placed ouside grid for saving the whole grid data. (c#.net)
    Now i am working on MVC Razor i see in kendo with toolbar,
    can we have the same tool bar functionality outside grid meaning ,
    can i use one button (save) where i can take all grid datas and do the same process how toolbar does(iterate)
    and save .

    I know batch process does individual grid save , i need to send some 4 grid to controller and save

    I have one requirement of this type

    Please let me know whether above requirement possible or not

    Senthil

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 14 May 2013 Link to this post

    Hi Sentil,


    If you would like to save the data from multiple Grids on a single page, you could get them via the data-role attribute selector  i.e. data-role='grid' and call the saveChanges method for each of them.
    E.g.
    var grids = $("div[data-role='grid']");
     
    for(var i = 0; i < grids.length; i++){
        var current = $(grids[i]).data("kendoGrid");
        current.saveChanges();
    }

    I hope this approach would work in the current scenario. Wish you a great day!

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sentil
    Sentil avatar
    23 posts
    Member since:
    Jul 2011

    Posted 14 May 2013 Link to this post

    Hi Dimiter Madjarov

    Thank you
    so we need to do every thing on client side?
    var grids = $("div[data-role='grid']");
    can we send to controller the whole list of grids , why i ask is i need to iterate and save 
     (check for some condition )

    for
    (var i = 0; i < grids.length; i++){
    // my guess is here i will get all grid
    var current = $(grids[i]).data("kendoGrid"); //if possible how to iterate
    //save details happens here
    current.saveChanges();
    }

    I am doing this newly so , can you please guide me

    Senthil


  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 14 May 2013 Link to this post

    Hello Sentil,


    In my opinion the easiest way to achieve this is on the client side and through the Grid's API. You could get all of the Grid items via the data method of the Grid's dataSource and iterate over them to perform the custom checks. Here is the updated example.

    E.g.
    //getting all Grid divs
    var grids = $("div[data-role='grid']");
      
    for(var i = 0; i < grids.length; i++){
        //accessing the current Grid
        var current = $(grids[i]).data("kendoGrid");
         
        //getting the Grid data
        var data = current.dataSource;
        for(var j = 0; j < data.length; j++){
            var currentItem = data[j];
            //Perform custom checks over the item's model
        }
         
        current.saveChanges();
    }

     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Sentil
    Sentil avatar
    23 posts
    Member since:
    Jul 2011

    Posted 15 May 2013 Link to this post

    Hi

    Thank you , i started your concept i have one doubt



    @(Html.Kendo().ComboBox()
    .Name("userComboBox") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.
    .DataTextField("UserName") //Specifies which property of the Product to be used by the combobox as a text.
    .DataValueField("UserID") //Specifies which property of the Product to be used by the combobox as a value.
    .Filter(FilterType.StartsWith)
    .Placeholder("Select Name...")

    .DataSource(source =>
    {
    source.Read(read =>
    {
    read.Action("GetUsers", "UserDetails").Data("onAdditionalData"); //Set the Action and Controller name
    })
    .ServerFiltering(true); //If true the DataSource will not filter the data on the client.

    }).Events(e => e.Change("user_change").Open("open_change"))
     

    @(Html.Kendo().Grid<Models.Model>()
    .Name("ClientGrid")
    // .AutoBind(false)
    .Columns(columns =>
    {
    columns.Bound(c => c.ClientID).Visible(false);
    columns.Bound(c => c.ClientName);
    columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= EditRights ? checked='checked':'' # class='chkbxCliEditRights' />").Title("EditRights");
    columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= ViewRights ? checked='checked':'' # class='chkbxCliViewRights' />").Title("ViewRights");
    })
    .Events(e=>e.DataBound("dataBound"))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
    model.Id(c => c.ClientID);
    model.Field(c => c.ClientName);
    }) 
    )

    )

    function dataBound() {
    var entityDetails = $("#entityDetails").data("kendoComboBox").input.val();
    if (entityDetails == "Company" || entityDetails == "Region" || entityDetails == "Site") {

       }
    }

    function user_change() {
    var clientGridUrl = '@Url.Action("GetClientDetails", "UserDetails")' + "?id=" + this.value();
    $.getJSON(clientGridUrl, null,
    function (data) {
    var dataGrid = $('#ClientGrid').data("kendoGrid");
    var ds = new kendo.data.DataSource();
    dataGrid.setDataSource(ds);
    dataGrid.dataSource.add({ ClientID: data.ClientID, ClientName: data.ClientName, EditRights: data.EditRights, ViewRights: data.ViewRights });

    });

    }

    Explaination
    i have one combo box where in onchage event i load data for grid
    in the grid i use template column  check box

    Requirement
    in the databound i need to iterate for one condition and if that condition fails i need to make the EditRights clienttemplate to be read only
    in telerik we can find the control and make it to be disable
    how to do this ?

    can you please guid me

    Senthil
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2284 posts

    Posted 16 May 2013 Link to this post

    Hi Sentil,


    Here is a sample implementation for iterating over the Grid items and disabling the EditRights checkboxes if a condition is satisfied.
    E.g.
    function onDataBound(e) {
        var gridData = this.dataSource.view();
        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
     
            //replace with custom condition
            if (gridData[i].EmployeeId % 2 == 0) {
                var currenRow = this.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).find(".chkbxCliEditRights").attr("disabled", true);
            }
        }
    }

    I hope this approach will work in the current scenario.

     

    All the best,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top