Grid Toolbar functioality outside grid

[Sentil]

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

[Dimiter Madjarov]

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

[Sentil]

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

[Dimiter Madjarov]

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

[Sentil]

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

[Dimiter Madjarov]

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